部署兩個Web服務會出現兩個問題：

1. 跨域
2. ip以及埠問題

針對問題1，強大的前端同事，通過vue框架進行一系列騷操作的配置，已經解決了。 針對問題2，我們就需要用到Nginx的反向代理來實現了。

部署兩個Web專案服務，如下：：

使用者訪問頁面地址，如下：

	http://localhost:8081/index.html

當頁面使用ajax請求後端介面服務獲取資料時候，一般URL都會寫成

   http://localhost:8082/getList 

但是由於8081埠跟8082埠不一樣，瀏覽器通常都會報跨域的錯誤。 前端vue框架為了解決跨域的問題，當頁面需要通過ajax請求後端介面服務的時候，便把ajax的url改成了

   http://localhost:8081/api/getList

那麼現在問題來了，怎麼做到以下URL的對映呢？

      http://localhost:8081/api/getList  -->   http://localhost:8082/getList

沒錯，接下來就需要用到我們的Nginx的反向代理了。

安裝Nginx

2.直接解壓下載檔案

【喜歡輸入命令的跳過這一步】解壓完畢後我們不要著急執行nginx.exe檔案，我們先在這個目錄建立幾個bat處理檔案。方便我們以後快捷執行命令。直接新建一個txt文件，每個文件輸入以下對應的簡單的命令，然後把字尾改成bat檔案即可。

1. 退出-批處理檔案 檔名：quit.bat 檔案內容： nginx -s quit

2. 重新載入配置-批處理檔案 檔名：reload.bat 檔案內容： nginx -s reload

3. 啟動-批處理檔案 檔名：start.bat 檔案內容： start nginx

4. 停止-批處理檔案 檔名：stop.bat 檔案內容： nginx -s stop

如下圖：

3.啟動Nginx

啟動方式有三種，如下：

1. 雙擊nginx.exe檔案，命令列視窗一閃而過，不要緊張，這就代表啟動了
2. 使用cmd命令列，進入到對應的nginx目錄，輸入命令 start nginx
3. 雙擊start.bat檔案，命令列視窗也是會一閃而過……

開啟你的瀏覽器，輸入地址： http://localhost

當然如果沒有出現該畫面，就要檢查一下自己電腦的80埠是否被其他應用佔用，如果要關閉nginx的小夥伴們可以輸入命令：nginx -s quit 或者 nginx -s stop 進行關閉，當然寫了bat處理檔案的童鞋們，也只可以直接雙擊對應的bat檔案進行關閉。

4.引入自定義配置檔案

成功啟動了Nginx，那麼我們接下來就開始配置Nginx的反向代理了。開啟conf資料夾，開啟nginx.conf 的配置檔案。

然後你會看到一大堆配置內容以及註釋掉的配置項，對於原先的配置檔案我們先不要理會，我們直接在標籤 http{ …… } 裡面加入一段程式碼

include reverse-procy.conf;

如下圖：

然後儲存，關閉nginx.conf檔案，聰明的你已經看到上圖上面的註釋了。沒錯，這段程式碼的意思就是在nginx.conf的配置檔案裡面引入其他檔案的配置項。對於初學者來說，簡潔的配置項才容易看得懂。

5. 編寫自定義配置檔案，實現反向代理

接下來我們在nginx的安裝目錄下的conf資料夾，新建 reverse-procy.conf 的檔案（其實就是上面在nginx.conf引入自定義配置檔案的檔名）

然後在 reverse-procy.conf 編寫以下內容：

server {
    listen 8080;
    server_name localhost;    # 這是外網訪問進來時的連線地址
    location /{
        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_pass http://localhost:8081;
    }
	location /api{
		rewrite ^.+api/?(.*)$ /$1 break;
		include uwsgi_params;
		proxy_pass http://localhost:8082;
	}
    
}

儲存退出，然後回到nginx安裝目錄下，執行reload.bat批處理檔案重新載入Nginx的配置。 這樣就實現了方向代理。

最後，Nginx其實也可以部署靜態頁面，前端的vue框架打包後的檔案可以直接放在nginx的html目錄下，後端Spring boot再另外部署一個Web服務就可以了。