1.  前言

        在本地吭哧吭哧的寫了兩個星期，終於到了需要部署到伺服器供測試的時候了！！

        初始的設想是部署到tomcat，放在ROOT目錄下，即可以使用 域名:埠/ 訪問，但是涉及到後臺請求跨域了，百度+諮詢前同事，得出了結論：通過nginx反向代理，實現請求路徑對映到目標後臺伺服器；

        此外，nginx本身可以作為靜態資原始檔伺服器，還可以省去tomcat，豈不一舉兩得！

2. 安裝nginx

 一、Windows安裝

我本地有的時候還是需要一個伺服器來跑，所以就配了一個Windows的環境，windows的配置環境還是相對簡單很多的；

2. 解壓；

3. nginx解壓後的目錄，檔案如下：

4. 因為nginx是綠色版，解壓即可使用，測試nginx是否安裝成功：

    命令列進入nginx解壓後的資料夾，start nginx 啟動nginx;

   開啟瀏覽器輸入 http://localhost/  能看到nginx的歡迎介面則表示nginx啟動成功了；

   切記不要直接雙擊nginx.exe執行，因為會導致nginx無法正常關閉，只能通過工作管理員殺掉程序；

5. nginx的常用命令：

二、Linux安裝

linux系統：redhat2

1. 檢查系統有沒有安裝pcre、openssl、zlib；

    這三個庫是安裝nginx必須的，不然在安裝的時候會報錯；

    nginx的gzip模組需要zlib庫，rewrite模組需要pcre庫，ssl模組需要openssl庫

rpm -q pcre
rpm -q openssl
rpm -q zlib

   如有沒有安裝的話需要先安裝，安裝步驟比較簡單，大致是 下載 tar.gz包 —> 解壓 —> cd資料夾 —> ./configure —> make & make install

 2. 安裝nginx

（2）解壓資料夾，cd進入解壓後的資料夾；

（3）編譯安裝（安裝目錄/usr/local/nginx/）

./configure --prefix=/usr/local/nginx
 

（4）測試是否安裝成功

cd  /usr/local/nginx/sbin
./nginx -t

顯示如下則表示安裝成功：

nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

（5） 啟動nginx

方法一： 

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

方法二：

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

（6）停止

pkill -9 nginx

3. vue部署至nginx&實現跨域

Windows和Linux的配置檔案是一模一樣的，這裡以Linux為例：

這裡講解兩種情況怎麼配置：

一、部署在根目錄下

1. dist檔案拷貝到nginx安裝目錄，proj是我新建的資料夾，專門用來放需要部署的靜態資源專案；

2. 開啟nginx.conf，進行如下配置

在前後端分離的情境下，向後臺請求的時候免不了會出現跨域的問題，如果不作任何配置的話，後臺請求都是異常的，Chrome會報“伺服器找不到”的錯誤。

nginx解決問題的關鍵在於利用了反向代理，攔截指定的路徑，對映到後臺伺服器；

location 路徑匹配符有很多，精確匹配、忽略大小寫、正則表示式等，有需要可以網上查詢，相關文章非常之多……

我使用的是空匹配符，表示攔截指定字串開頭的路徑；

我的專案中後臺使用了微服務，所以不同模組有不同的後臺地址；

一、部署在非根目錄下

當需要在一個nginx下部署多個專案的時候，配置稍稍有些改動，這裡以打包後 專案的地址為：http:// IP:18080/budget/ 為例；

1. 修改vue專案，設定webpack build的時候 publicPath為 /budget/，按照vue-cli的標準模板，修改 config/index.js

build: {
    ……

    assetsPublicPath: '/budget/'

    ……
}

 webpack.prod.config.js

修改router的base屬性為：

2. nginx.conf配置：

以上~~

4. 踩坑

這裡說一個我在windows和Linux配置的時候發現的一個區別，也就是這個區別讓我遇到了一個500的問題；

在配置檔案可以發現我有一個後臺介面為：/sysConfig/.......

同時我有一個路由是：/sysconfig/.....

然後我重新整理路由為 /sysconfig/......的所有頁面，nginx會報500的錯誤，即伺服器的錯誤。

思考了良久，突然意識到可能是nginx忽略了大小寫，所以重新整理/sysconfig/......的介面，按照路徑攔截，會請求到後臺伺服器，所以肯定會報錯。

在測試之後發現，Windows的nginx配置中是大小寫不敏感的，Linux下是敏感的，所以在linux下重新整理是正常的；

花了不少時間在這個問題上，引以為戒呀~~~