前後端分離-使用Nginx代理
部署兩個Web服務會出現兩個問題:
- 跨域
- 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檔案即可。
-
退出-批處理檔案 檔名:quit.bat 檔案內容: nginx -s quit
-
重新載入配置-批處理檔案 檔名:reload.bat 檔案內容: nginx -s reload
-
啟動-批處理檔案 檔名:start.bat 檔案內容: start nginx
-
停止-批處理檔案 檔名:stop.bat 檔案內容: nginx -s stop
如下圖:
3.啟動Nginx
啟動方式有三種,如下:
- 雙擊nginx.exe檔案,命令列視窗一閃而過,不要緊張,這就代表啟動了
- 使用cmd命令列,進入到對應的nginx目錄,輸入命令 start nginx
- 雙擊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服務就可以了。