Nginx 提供靜態資源

本章以使用 Docusaurus 建立的靜態網站為範例，說明如何透過 Nginx 提供網站服務。

假設你已經準備好一個網域名稱，並將其指向了你的伺服器，例如：

• your.domain

提示

下方所有指令與設定範例中的 your.domain，請務必替換成你實際使用的網域名稱。

建構靜態網站

建構前，請確認你的 docusaurus.config.js 檔案內的 url 已正確設置為你的網域：

module.exports = {
  url: "https://your.domain",
  // ...其他設定
};

確認完成後，執行以下指令產生靜態檔案：

DOCUSAURUS_IGNORE_SSG_WARNINGS=true yarn build

提示

如果不使用 DOCUSAURUS_IGNORE_SSG_WARNINGS 環境變數，可能會看到一大堆奇怪的警告訊息，但不影響建構結果。

此指令會在 build/ 資料夾內生成靜態 HTML、CSS 與 JS 檔案。

接下來，將建構好的檔案上傳到伺服器的指定目錄，並設定檔案權限：

sudo mkdir -p /var/www/your.domain
sudo rsync -av build/ /var/www/your.domain/
sudo chown -R www-data:www-data /var/www/your.domain

取得 SSL 憑證

建議使用 Let's Encrypt 來簽發 SSL 憑證，確保網站以 HTTPS 安全提供服務：

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d your.domain

配置 Nginx

建立一個專用的 Nginx 設定檔：

sudo vim /etc/nginx/sites-available/your.domain

設定內容範例：

server {
    listen 80;
    server_name your.domain;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name your.domain;

    # SSL 憑證（需要使用 Certbot 簽發）
    ssl_certificate /etc/letsencrypt/live/your.domain/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your.domain/privkey.pem;

    # 設定靜態文件伺服目錄
    root /var/www/your.domain;
    index index.html;

    # 設定 MIME 類型
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

完成後啟用設定檔：

sudo ln -s /etc/nginx/sites-available/your.domain /etc/nginx/sites-enabled/

測試並重新載入 Nginx 設定：

sudo nginx -t
sudo systemctl reload nginx

進階配置

在正式環境中建議加入更多安全與效能設定，以下是一個完整的進階設定範例：

server {
    listen 80;
    listen [::]:80;
    server_name your.domain;

    # 🔒 自動將 HTTP 重導至 HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name your.domain;

    ssl_certificate /etc/letsencrypt/live/your.domain/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your.domain/privkey.pem;

    # 🔒 安全性標頭
    add_header Strict-Transport-Security "max-age=63072000; includeSubdomains; preload" always;

    # 🔧 限制上傳檔案大小，避免 DDoS
    client_max_body_size 10M;

    # 📁 build 目錄
    root /var/www/your.domain;
    index index.html;

    # 🗃️ 靜態資源緩存
    location ~* \.(jpg|jpeg|png|gif|ico|svg|woff2?|ttf|css|js)$ {
        expires 7d;
        add_header Cache-Control "public, must-revalidate";
    }

    # 🔧 主要路由規則
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 設定 MIME 類型
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    # 🔍 自訂日誌檔案位置
    access_log /var/log/nginx/your.domain.access.log main;
    error_log /var/log/nginx/your.domain.error.log warn;
}

結論

透過以上步驟與進階配置，即可使用 Nginx 提供安全、高效的靜態資源服務。配置完成後，即可透過 https://your.domain 來訪問你的網站。

最後，要記得定期檢查 SSL 憑證有效期、更新 Nginx 版本與安全規則。這些都能有效防範潛在的安全風險，確保網站長期穩定運行。