如何在Nginx網路伺服器上使用Vultr CDN

如何在Nginx網路伺服器上使用Vultr CDN

Nginx 是一款網路伺服器應用程式,可讓你使用域名 URL 託管和交付網路應用程式。為了交付靜態檔案並減少伺服器負載,你可以整合一個 Vultr CDN,將檔案解除安裝到多個區域交付,而不是你的原始伺服器位置。整合後,Nginx 會向所有匹配的使用者請求交付 Vultr CDN URL 響應資料,而不是原始網路應用程式 URL。

本文介紹如何將 Vultr CDN 與 Nginx 網路伺服器結合使用,將特定型別的請求路由到 CDN 快取的靜態資源。您將根據自己的網路應用程式結構,使用新的請求規則修改現有的 Nginx 配置,以便使用 Vultr CDN URL 傳輸圖片等靜態檔案。

準備工作

開始之前:

定位 Nginx 虛擬主機配置

要設定 Nginx Web 伺服器並將請求轉發到 Vultr CDN URL,請按照以下步驟驗證工作虛擬主機配置,並根據 CDN 規則進行修改。

  1. 切換到 Nginx 資料目錄。
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    $ cd /etc/nginx/
    $ cd /etc/nginx/
    $ cd /etc/nginx/
    
  2. 搜尋包含域名的所有 Nginx 配置。例如, example.com
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    $ grep -r "example.com" /etc/nginx/
    $ grep -r "example.com" /etc/nginx/
    $ grep -r "example.com" /etc/nginx/
    

    輸出結果應如下所示:

    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    /etc/nginx/sites-available/example.com: server_name example.com;
    /etc/nginx/sites-available/example.com: server_name example.com;
    /etc/nginx/sites-available/example.com:    server_name example.com;

    在上述輸出結果中,你的域名使用了 /etc/nginx/sites-available/example.com 虛擬主機配置。通常,如果沒有虛擬主機配置,Nginx會使用預設配置檔案 /etc/nginx/sites-available/default

  3. 檢視虛擬主機配置檔案並驗證網路根目錄值。
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    $ cat /etc/nginx/sites-available/example.com
    $ cat /etc/nginx/sites-available/example.com
    $ cat /etc/nginx/sites-available/example.com
    

    輸出:

    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    root /var/www/example.com;
    root /var/www/example.com;
    root /var/www/example.com;
  4. 切換到網路根目錄,設定示例應用程式結構。
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    $ cd /var/www/example.com
    $ cd /var/www/example.com
    $ cd /var/www/example.com
    
  5. 建立一個新的樣本 images 目錄,以測試 Nginx 規則。.
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    $ sudo mkdir images
    $ sudo mkdir images
    $ sudo mkdir images
    

    將影象檔案等樣本檔案上傳到要快取的目錄,並使用 Vultr CDN URL 進行測試。

方法 1:設定修改響應

Nginx 響應修改使用 sub_filter 模組將特定請求型別轉發到你的 Vultr CDN URL。當使用者建立一個新請求時,Nginx 會修改請求並將其轉換到你的 Vultr CDN URL,而不是原伺服器 URL。請按照以下步驟設定響應修改,以便將特定請求模式匹配到你的 Vultr CDN URL。

  1. 預設情況下,Nginx 的 sub_filter 模組與 http_sub_module 一起執行。請確認該模組在你的伺服器上可用。
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    $ nginx -V
    $ nginx -V
    $ nginx -V
    

    輸出:

    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    ........--with-http_gzip_static_module --with-http_sub_module
    ........--with-http_gzip_static_module --with-http_sub_module
    ........--with-http_gzip_static_module --with-http_sub_module
  2. 使用 Nano 等文字編輯器開啟 Nginx 虛擬主機配置。
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    $ sudo nano /etc/nginx/sites-available/example.com
    $ sudo nano /etc/nginx/sites-available/example.com
    $ sudo nano /etc/nginx/sites-available/example.com
    
  3. 在檔案中新增以下 sub_filter 配置。
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    sub_filter 'https://example.com/images/' 'https://cdn-example88.vultrcdn.com/images/';
    sub_filter 'https://example.com/files/' 'https://cdn-example88.vultrcdn.com/files/';
    proxy_set_header Accept-Encoding "";
    sub_filter_once off;
    sub_filter 'https://example.com/images/' 'https://cdn-example88.vultrcdn.com/images/'; sub_filter 'https://example.com/files/' 'https://cdn-example88.vultrcdn.com/files/'; proxy_set_header Accept-Encoding ""; sub_filter_once off;
    sub_filter 'https://example.com/images/' 'https://cdn-example88.vultrcdn.com/images/';
    sub_filter 'https://example.com/files/' 'https://cdn-example88.vultrcdn.com/files/';
    proxy_set_header Accept-Encoding "";
    sub_filter_once off;
    

    儲存並關閉檔案。

    上述配置會用 Vultr CDN URL 替換所有匹配的請求模式。在配置中:

    • sub_filter '' '';:

    將原始請求 URL '' 修改為目標 URL '' 。例如,所有與 URL 模式 https://example.com/images/ 匹配的請求都會被修改為你的 Vultr CDN URL cdn-example88.vultrcdn.com/images/ 。同一 URL 方案中的檔案請求,例如 example.com/images/image.png,會將請求模式匹配到您的 Vultr CDN URL /cdn- example88.vultrcdn.com/images/image.png

    • proxy_set_header Accept-Encoding "";:

    關閉 Nginx 請求中的 Gzip 壓縮,以避免與 Vultr CDN 響應資料發生壓縮衝突。

    • sub_filter_once off;:

    啟用多個內容修改規則,以持續修改 Vultr CDN URL 請求。

    修改後的 Nginx 配置應如下所示:

    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name example.com;
    root /var/www/html;
    index index.php index.htm index.nginx-debian.html;
    location / {
    try_files $uri $uri/ =404;
    }
    sub_filter 'https://example.com/images/' 'https://cdn-example88.vultrcdn.com/images/';
    sub_filter 'https://example.com/files/' 'https://cdn-example88.vultrcdn.com/files/';
    proxy_set_header Accept-Encoding "";
    sub_filter_once off;
    }
    server { listen 80 default_server; listen [::]:80 default_server; server_name example.com; root /var/www/html; index index.php index.htm index.nginx-debian.html; location / { try_files $uri $uri/ =404; } sub_filter 'https://example.com/images/' 'https://cdn-example88.vultrcdn.com/images/'; sub_filter 'https://example.com/files/' 'https://cdn-example88.vultrcdn.com/files/'; proxy_set_header Accept-Encoding ""; sub_filter_once off; }
    server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name example.com;
    root /var/www/html;
    index index.php index.htm index.nginx-debian.html;
    location / {
    try_files $uri $uri/ =404;
    }
    sub_filter 'https://example.com/images/' 'https://cdn-example88.vultrcdn.com/images/';
    sub_filter 'https://example.com/files/' 'https://cdn-example88.vultrcdn.com/files/';
    proxy_set_header Accept-Encoding "";
    sub_filter_once off;
    }
    
  4. 測試 Nginx 配置是否有錯誤。
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    $ sudo nginx -t
    $ sudo nginx -t
    $ sudo nginx -t
    

    輸出:

    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
    nginx: configuration file /etc/nginx/nginx.conf test is successful
    nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful
    nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
    nginx: configuration file /etc/nginx/nginx.conf test is successful
  5. 重啟 Nginx 以應用配置更改。
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    $ sudo systemctl restart nginx
    $ sudo systemctl restart nginx
    $ sudo systemctl restart nginx
    

方法 2:設定重定向

重定向會將特定的 Nginx 請求型別轉發到你的 Vultr CDN URL。請求將被重定向到 Vultr CDN URL,而不是從你的原始 URL 傳送響應。請按照以下步驟將請求從你的主機 URL 重定向到 Vultr CDN URL。

    1. 開啟 Nginx 虛擬主機配置。
      Plain text
      Copy to clipboard
      Open code in new window
      EnlighterJS 3 Syntax Highlighter
      $ sudo nano /etc/nginx/sites-available/example.com
      $ sudo nano /etc/nginx/sites-available/example.com
      $ sudo nano /etc/nginx/sites-available/example.com
    • 在檔案中新增包含目標請求型別的新 location 塊。用實際的 Vultr CDN URL 替換 cdn-example88.vultrcdn
      Plain text
      Copy to clipboard
      Open code in new window
      EnlighterJS 3 Syntax Highlighter
      location ~ ^(/images/|/files/|/css/|/js/)/.*\.(jpe?g|webp|gif|css|png|js|ico|pdf|m4a|mov|mp3)$ {
      rewrite ^ https://cdn-example88.vultrcdn.com$request_uri?
      permanent;
      access_log off;
      }
      location ~ ^(/images/|/files/|/css/|/js/)/.*\.(jpe?g|webp|gif|css|png|js|ico|pdf|m4a|mov|mp3)$ { rewrite ^ https://cdn-example88.vultrcdn.com$request_uri? permanent; access_log off; }
      location ~ ^(/images/|/files/|/css/|/js/)/.*\.(jpe?g|webp|gif|css|png|js|ico|pdf|m4a|mov|mp3)$ {
                  rewrite  ^ https://cdn-example88.vultrcdn.com$request_uri?
                  permanent;
                  access_log off;
            }
      
      

      儲存並關閉檔案。

      上述配置會將符合  images/files/css/,js/  目錄或副檔名 .jpg,.jpeg.png.webp.css.js 的所有請求重定向到你的 Vultr CDN URL。在配置中

      1. location ~ ^(/images/|/files/|/css/|/js/)/.*\.(jpe?g|webp|gif|css|png|js|ico|pdf|m4a|mov|mp3)$

      :定義要替換為 Vultr CDN URL 的請求模式。

      • rewrite ^ https://cdn-example88.vultrcdn.com$request_uri?:

      用你的 Vultr CDN URL 重寫所有匹配的請求型別。 $request_uri? 表示式與您的請求模式相匹配,以保留原始主機 URL 結構。

      • permanent:

      使用 301 Moved Permanently 狀態程式碼永久重定向請求。

      • access_log off:

      關閉所有重定向資訊的訪問日誌。

      修改後的 Nginx 配置應如下所示:

  1. Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name example.com;
    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;
    location / {
    try_files $uri $uri/ =404;
    }
    location ~ ^(/images/|/files/|/css/|/js/)/.*\.(jpe?g|webp|gif|css|png|js|ico|pdf|m4a|mov|mp3)$ {
    rewrite ^ https://cdn-example88.vultrcdn.com$request_uri?
    permanent;
    access_log off;
    }
    }
    server { listen 80 default_server; listen [::]:80 default_server; server_name example.com; root /var/www/html; index index.html index.htm index.nginx-debian.html; location / { try_files $uri $uri/ =404; } location ~ ^(/images/|/files/|/css/|/js/)/.*\.(jpe?g|webp|gif|css|png|js|ico|pdf|m4a|mov|mp3)$ { rewrite ^ https://cdn-example88.vultrcdn.com$request_uri? permanent; access_log off; } }
    server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name example.com;
    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;
    location / {
    try_files $uri $uri/ =404;
    }
    location ~ ^(/images/|/files/|/css/|/js/)/.*\.(jpe?g|webp|gif|css|png|js|ico|pdf|m4a|mov|mp3)$ {
    rewrite  ^ https://cdn-example88.vultrcdn.com$request_uri?
    permanent;
    access_log off;
    }
    }
    
  2. 測試 Nginx 配置是否有錯誤。
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    $ sudo nginx -t
    $ sudo nginx -t
    $ sudo nginx -t
    
  3. 重啟 Nginx 以應用配置更改。
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    $ sudo systemctl restart nginx
    $ sudo systemctl restart nginx
    $ sudo systemctl restart nginx
    

小結

您已將 Nginx 網路伺服器配置為將網路應用程式請求轉發到 Vultr CDN URL。Web 伺服器會將每個有效的請求模式轉發到 Vultr CDN URL,該 URL 會根據請求的資料型別提供響應。根據你的網路應用程式結構,修改你的 Nginx 配置,使用你的 Vultr CDN URL 傳送符合特定模式的所有內容型別,以提高一般應用程式的效能和使用者體驗。

評論留言