nginx 部署vue http、https

牛奔發表於2024-07-21
NginxVueHTTP

nignx配置檔案

server {
    listen 80;
    server_name your_domain.com;

    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name your_domain.com;

    ssl_certificate /path/to/your/ssl/certificate;
    ssl_certificate_key /path/to/your/ssl/key;

    location / {
        root /path/to/your/vue/app;
        index index.html;
        try_files $uri $uri/ /index.html =404;
    }
}

try_files

try_files file... uri 這個語法的意思是：

  • try_files 後面可以定義多個檔案路徑和最後一個作為內部跳轉的 uri，其中檔案路徑是和 alias 和 root 兩個指令合在一起構造而成；
  • 多個檔案以第一個找到的檔案作為請求；
  • 而檔案後面以"/"結尾，會檢查目錄是否存在；
  • 當檔案都找不到時，就會去以最後一個uri進行內部跳轉請求。
  • 新增 =404 引數,這將在找不到檔案時返回 404 錯誤,而不是進入內部重定向迴圈。

SSL

SSL 證書檔案 (.crt 或 .pem 格式):

ssl_certificate "/etc/pki/nginx/server.pem";

SSL 證書金鑰檔案 (.key 格式):

ssl_certificate_key "/etc/pki/nginx/private/server.key";

root

在Nginx配置檔案中,確保 root 指令指向正確的Vue.js應用程式目錄:

訪問許可權問題，需要確保 Nginx 使用者(通常是 nginx 或 www-data)對該目錄有讀取和執行的許可權。

先檢查 Nginx 程序執行的使用者和組是否與你設定的許可權一致

ps aux | grep nginx

檢視輸出中 nginx 程序的使用者和組是否為 nginx:nginx。如果不是，你需要更新 Nginx 配置以使用正確的使用者和組，或者移動專案到有許可權的訪問目錄中。

由於 Nginx 程序通常以非 root 使用者（如 nginx 或 www-data）執行，並且 /root 目錄對其他使用者是不可訪問的，因此還是會遇到許可權問題。

建議將你的靜態檔案移動到一個非 root 的目錄下，例如 /var/www，並確保該目錄和檔案的許可權設定正確。

使用以下命令設定許可權:

chown -R nginx:nginx /path/to/your/vue/app;
chmod -R 755 /path/to/your/vue/app;

完成上述步驟後,請重啟 Nginx 服務以應用更改:

nginx -t // 檢查nignx 配置檔案是否出錯
systemctl restart nginx // 重啟nginx

相關文章