Windows下利用Nginx部署純前端項目（前后台完全分離項目部署及解決跨域請求后台數據問題）

1.下載nginx

https://www.nginx.cn/nginx-download    

下載穩定版本，以nginx/Windows-1.16.1為例，直接下載 nginx/Windows-1.16.1

下載后解壓，解壓后如下：

​

2.啟動nginx

有很多種方法啟動nginx

(1)直接雙擊nginx.exe，雙擊后一個黑色的彈窗一閃而過

(2)打開cmd命令窗口，切換到nginx解壓目錄下，輸入命令 nginx.exe 或者 start nginx ，回車即可

3.檢查nginx是否啟動成功

直接在瀏覽器地址欄輸入網址 http://localhost:80，回車，出現以下頁面說明啟動成功

​

也可以在cmd命令窗口輸入命令 tasklist /fi "imagename eq nginx.exe" ，出現如下結果說明啟動成功

​

nginx的配置文件是conf目錄下的nginx.conf，默認配置的nginx監聽的端口為80，如果80端口被占用可以修改為未被占用的端口即可。

​

檢查80端口是否被占用的命令是：

netstat -ano | findstr 0.0.0.0:80

 或 

netstat -ano | findstr "80"

4、重啟nginx

當我們修改了nginx的配置文件nginx.conf 時，不需要關閉nginx后重新啟動nginx，只需要執行命令

nginx -s reload 

即可讓改動生效

5.關閉nginx

如果使用cmd命令窗口啟動nginx，關閉cmd窗口是不能結束nginx進程的，可使用兩種方法關閉nginx

(1)輸入nginx命令  nginx -s stop(快速停止nginx)  或  nginx -s quit(完整有序的停止nginx)

(2)使用taskkill   taskkill /f /t /im nginx.exe

6.使用nginx代理服務器做負載均衡

我們可以修改nginx的配置文件nginx.conf 達到訪問nginx代理服務器時跳轉到指定服務器的目的，即通過proxy_pass 配置請求轉發地址，即當我們依然輸入http://localhost:80 時，請求會跳轉到我們配置的服務器

​

同理，我們可以配置多個目標服務器，當一台服務器出現故障時，nginx能將請求自動轉向另一台服務器，例如配置如下：

​

當服務器 localhost:8080 掛掉時，nginxnginx能將請求自動轉向服務器 192.168.101.9:8080 。上面還加了一個weight屬性，此屬性表示各服務器被訪問到的權重，weight

越高被訪問到的幾率越高。

7.nginx配置靜態資源

將靜態資源（如jpg|png|css|js等）放在如下配置的f:/nginx-1.12.2/static目錄下，然后在nginx配置文件中做如下配置(注意：靜態資源配置只能放在 location / 中)，瀏覽器中訪問  http://localhost:80/1.png 即可訪問到 f:/nginx-1.12.2/static目錄下的 1.png圖片

​

8、nginx反向代理跨域請求后台服務器：

1) 所有頁面文件放在Nginx文件目錄的html目錄下

nginx.conf配置如下：

​

		// 所有以/blog開頭的請求都將轉發給后台服務器
		location ~ /blog/ {
            proxy_pass   http://localhost:9999;
        }

頁面的接口請求地址如下：

/blog/check_login_status/

        $http({
          method: "POST", url: "/blog/check_login_status/", data: JSON.stringify(values) }) .then(res => { localStorage['token'] = 1; this.props.history.replace("/"); }) .catch(err => { notification["error"]({ message: '錯誤圖示', description: '用戶名或密碼錯誤', }); });

此時經過Nginx代理后，所有以/blog開頭的請求都將轉發給后台服務器。

1) 所有頁面文件放在另外一台服務器上，假設服務器地址為http://localhost:6666，則nginx.conf配置如下：

        // 所有請求(不以/blog開頭的請求)都將轉發給前台應用
        location / {
            proxy_pass   http://localhost:6666;
        }
		
		// 所有以/blog開頭的請求都將轉發給后台服務器
		location ~ /blog/ {
            proxy_pass   http://localhost:9999;
        }

前端代碼不變。