使用Nginx部署Vue專案全過程及踩坑記錄

2023-02-16 06:03:05

Nginx部署Vue專案

很多小夥伴在做完Vue專案之後，想要部署到伺服器上自己執行試試。

其實使用Nginx就可以輕鬆的做到，並且實現請求轉發等功能。下面來看看使用步驟吧。

使用Nignx部署Vue專案步驟

1.打包Vue專案

npm run build

首先使用打包命令打包Vue專案，之後得到一個dist資料夾。

這裡面存放的是已經打包好的靜態資原始檔。

注意：這裡不同的專案打包的命令可能不一樣，需要在 package.json 裡看 scripts，每個屬性就是一個命令，一般都會有 npm run serve, npm run build, npm run lint… 等等

不同的專案結構不一樣哦。我使用的是vue-element-admin框架。具體打包方法可以檢視框架的相關檔案哦。

2.複製dist資料夾到Vue預設目錄

安裝好Nginx，找到安裝根目錄。將dist目錄裡的檔案複製到html中。

這是預設的nginx根目錄，如果這樣做的話你不用修改組態檔就可以直接執行。

複製完成後，雙擊nginx.exe執行nginx就可以執行啦。

3.高階設定

通常情況下ngxin是安裝到單獨的伺服器上，因此一般是把vue打包後的dist仍到服務上的具體位置，然後修改nginx.conf的root路徑來指向我們的dist。

如果你想根據自己的需求來設定nginx，或者想部署多個專案的話。你需要通過修改組態檔來完成。

這裡放一個我自己的設定。具體可以參考註釋。

server {
    # 需要被監聽的埠號，前提是此埠號沒有被佔用，否則在重啟 Nginx 時會報錯
    listen       8888;
    # 服務名稱，無所謂
    server_name  localhost;

    # 上述埠指向的根目錄
    root /opt/asing1elife/teamnote;
    # 專案根目錄中指向專案首頁
    index index.html;

    client_max_body_size 20m; 
    client_body_buffer_size 128k;

    # 根請求會指向的頁面
    location / {
      # 此處的 @router 實際上是參照下面的轉發，否則在 Vue 路由重新整理時可能會丟擲 404
      try_files $uri $uri/ @router;
      # 請求指向的首頁
      index index.html;
    }

    # 由於路由的資源不一定是真實的路徑，無法找到具體檔案
    # 所以需要將請求重寫到 index.html 中，然後交給真正的 Vue 路由處理請求資源
    location @router {
      rewrite ^.*$ /index.html last;
    }

    # 關鍵步驟，這裡表示將所有的 http://192.168.7.8:8888/teamnote/api/ 開頭的請求都轉發到下面 proxy_pass 指定的連結中
    # 這裡使用 /teamnote/api/ 而不是 /teamnote/ ，是因為前端專案本身的存取連結就是 http:192.168.7.8:8888/teamnote/
    # 為了防止在存取頁面時請求就被 Nginx 代理轉發，這裡需要更具體的設定，才能和前端存取請求區分開
    location /teamnote/api/ {
          # 後端的真實介面
          proxy_pass http://192.168.7.8:2592/teamnote/api/;
          proxy_redirect off;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header   Cookie $http_cookie;
          # for Ajax
          #fastcgi_param HTTP_X_REQUESTED_WITH $http_x_requested_with;
          proxy_set_header HTTP-X-REQUESTED-WITH $http_x_requested_with;
          proxy_set_header HTTP_X_REQUESTED_WITH $http_x_requested_with;
          proxy_set_header x-requested-with $http_x_requested_with;
          client_max_body_size 10m;
          client_body_buffer_size 128k;
          proxy_connect_timeout 90;
          proxy_send_timeout 90;
          proxy_read_timeout 90;
          proxy_buffer_size 128k;
          proxy_buffers 32 32k;
          proxy_busy_buffers_size 128k;
          proxy_temp_file_write_size 128k;
    }
}

重新啟動 Nginx

使用 nginx -s reload 可以重新載入 Nginx 的組態檔，但如果組態檔有錯，不一定會丟擲異常
使用 nginx -s stop 先停止 Nginx 服務，再使用 nginx 嘗試啟動 Nginx 服務，如果組態檔有異常，則會丟擲異常告知啟動失敗

linux環境

通常情況下很少使用windows來作為nginx的伺服器，一般使用linux。

對於linux安裝nginx有兩種方式

一種是使用官方已經編譯好的包來安裝
一種是使用原始碼構建安裝

第一種方式參考官方地址https://nginx.org/en/linux_packages.html

第二種方式參考官方地址https://nginx.org/en/docs/install.html中的Building from Sources片段，這種實際上就是下一個tar.gz包仍到linux服務去自己編譯。

在linux服務上和window環境上使用nginx部署vue專案並沒有太大差異，把構建好的vue專案dist上傳到linux服務上，通用修改nginx伺服器中的root來指向dist就ok了，然後使用

# centos 7
systemctl restart nginx.service
# centos 6
service nginx restart

或者是平滑重啟

service nginx reload

centos 7

systemctl restart nginx.service

centos 6

service nginx restart