伺服器：

阿里雲 Alibaba Cloud Linux

下載

  • 進入到預計存放nginx的目錄，比如：/usr/local/
  • 下載nginx壓縮包，並解壓 
    cd /usr/local
    
wget http://nginx.org/download/nginx-1.18.0.tar.gz
    
tar -zxvf nginx-1.18.0.tar.gz

安裝

  • 進入到解壓的資料夾並安裝 
    cd /usr/local/nginx-1.18.0
    
./configure
    
make -j2
    
make install

    安裝完成後，會有nginx資料夾

配置

配置檔案位置：/usr/local/nginx/conf/nginx.conf

其他的不用變，主要看server：

  server {

        listen       80; # 埠

        server_name  localhost;

        index  index.html index.htm; # 預設檔案，會在索引資料夾下，尋找index配置的檔案

		##	alias 不包含url的路徑

		## 比如url：http://ip/aaa

		## 伺服器索引的檔案是 /home/www/dist/index.html

        location /aaa/ {

            alias   /home/www/dist/;

        }

		##	root 包含url的路徑

		## 比如url:http://ip/aaa

		## 伺服器索引的檔案是 /home/www/dist/aaa/index.html

        location /aaa/ {

            root /home/www/love/dist/;

        }

    }

執行

  • 進入nginx命令目錄：/usr/local/nginx/sbin/

  • 執行

    cd /usr/local/nginx/sbin/
    
./nginx

  • 重啟

    cd /usr/local/nginx/sbin/
    
./nginx -s reload

  • 檢視nginx程序

    ps -ef|grep nginx

    如果顯示如下，則表示啟動成功：

問題排查

  • 檢視日誌檔案

    開啟日誌的配置：



    日誌檔案位置：/usr/local/nginx/logs

    其中nginx.pid檔案記錄的是nginx程序的pid，不要刪除，否則nginx -s reload等需要殺程序的命令會報錯。

  • 資原始檔路徑assets找不到

    預設情況下，打包後的程式碼中，index.html引入的檔案是絕對路徑：



    如果nginx沒有配置assets的location，是找不到資源的。

    就算配了location，如果一個伺服器上部署了多個前端專案，就會存在多個assets，那就要把不同專案的資原始檔夾名稱都改成不一樣的，再把每一個檔案路徑配上location。這樣麻煩，乾脆把把這裡的絕對路徑改為相對路徑：

    webpack打包：修改 assetPublicPath：'./'

    vite 打包：修改base:'./'