今天給大家介紹的是在前後端分離的趨勢下，前端同學們利用nginx來開發和除錯自己的前端專案。

換做以前，大家正常的前端除錯流程可能是這樣的。

1、首先搭建好後臺的語言環境

2、把後臺程式碼拉到本機

3、通過啟動 tomcat或者是apache。

4、開啟網頁正常除錯

這樣的好處是整個流程每個人很熟悉，沒什麼坑。介面除錯不通那就找後臺吧。

壞處是

1、前端同學需要熟悉基本的後臺程式執行知識，比如說後臺JAVA的包管理器必須提前下載好依賴，不然後臺程式跑不起來。

2、明明後臺程式碼在後臺同學電腦上可以正常啟動，但是在自己的電腦上偏偏就會出問題，時不時的還得麻煩後臺同學。

3、後臺程式啟動太慢，每次前端程式碼改動都要好幾分鐘才能重啟一次伺服器(假設開發環境前後臺程式碼部署在同一臺伺服器上)。開發效率太低。

前端同學用nginx搭建自己的web伺服器，後臺程式專門部署在一臺伺服器上(我們之前公司就有三套環境，開發/測試/生產)，這樣做的好處是

1、前端程式碼基本都是靜態檔案，重啟一次很快，也就幾秒鐘時間。

2、不用配置後臺語言開發環境，不需要關心後臺程式碼是如何執行起來的，也不用管他究竟用了多少依賴包。

3、對網路環境不限制，無所謂是內網還是外網。

這樣的想法是不錯的，不過需要解決的一個問題是前端搭建了自己的靜態伺服器後，頁面上發出的ajax請求如何迴應？因為我們本地是沒有真正的後臺伺服器介面的。所以我們要想辦法利用nginx把請求轉發到真正的遠端後臺伺服器上，然後後臺伺服器返回資料給nginx，nginx收到資料後再返回給我們頁面。這種技術一般成為請求轉發或者叫反向代理。

（還有一種辦法就是通過判斷當location.href == localhost 時設定所有的API請求都用絕對路徑，然後關閉瀏覽器的跨域檢查.關閉跨域檢查方式，右鍵chrome屬性，在目標那裡追加,  --disable-web-security --user-data-dir=C:\tmp   注意是 追加！！！）

使用nginx搭建靜態伺服器這個不難，網上一大堆的教程，這裡就不介紹了，難就難在如何請求轉發。本人一開始對nginx配置也不太懂，網上的教程也是模稜兩可，自己摸索了好幾天才搞定這一套流程。

下面放出一張nginx的配置圖

配置很簡單，不過我卻搞了好幾天，這裡大概給大家講一下重點部分，

1、location 支援配置專案的絕對路徑

2、假設我們的後臺API地址是以API開頭，location ^~ /api/ 代表nginx將會攔截請求地址中包含"/api/"字樣的請求，其實這就是我們的ajax請求路徑，攔截到請求之後根據寫法會分成兩種情況把這個請求轉發到 下面 proxy_pass 的地址上。

 舉個例子:

a、如上圖，如果proxy_pass 的URL以 / 結尾 ，那麼請求轉發的時候 將 不會 帶上 匹配到的 /api/ ，也就是說如果 登入請求 URL是 localhost:60001/api/user/login，proxy_pass  URL 是 http://a.xx.com:8080/platform/， Nginx將會 把這個請求轉發成 http://a.xx.com:8080/platform/user/login 

b、如果proxy_pass 的URL不以 / 結尾 ，那麼請求轉發的時候 將 會帶上 匹配到的 /api/ ，也就是說如果 登入請求 URL是 localhost:60001/api/user/login，proxy_pass  URL 是 http://a.xx.com:8080/platform/， Nginx將會 把這個請求轉發成 http://a.xx.com:8080/platform/api/user/login 

3、一般我們登入之後伺服器會通過Set-Cookie把token寫回到我們本地，如果不設定 proxy_cookie_path 的話，伺服器Set-Cookie命令會失效，本地存不了cookie，從而導致token丟失。

這裡proxy_cookie_path有一點需要注意的是 如果 proxy_pass  URL 是 http://a.xx.com:8080/platform/ 這種情況  proxy_cookie_path應該設定成 /platform/ / (注意兩個斜槓之間有空格)。

如果 proxy_pass  URL 是 http://a.xx.com:8080/這種情況  proxy_cookie_path應該設定成 / / (注意兩個斜槓之間有空格)

重啟下nginx，你就會發現一切都正常了。

好了，該說的都說完了，希望各位前端同學們能夠更加高效的開發前端專案。