【測試開發】知識點-配置 Nginx 解決多端口訪問

目前項目下多個模塊各自有着不同的端口號,前端進行訪問的時候就有問題了。

用的是 vue-admin-template後臺的前端框架,這裏配置後端訪問地址的時候如果我指定了 8202,那麼8201的服務接口就訪問不了。

爲了提供統一的 api 接口,所以使用nginx作爲反向代理服務器。

一、Nginx 介紹

反向代理,其實客戶端對代理是無感知的。

因爲客戶端不需要任何配置就可以訪問,我們只需要將請求發送到反向代理服務器,由反向代理服務器去選擇目標服務器獲取數據後再返回給客戶端。

此時反向代理服務器和目標服務器對外就是一個服務器,暴露的是代理服務器地址,隱藏了真實服務器IP地址。

更多相關介紹,可以參考我之前的一篇分享:【Nginx 快速入門】反向代理、負載均衡、動靜分離

二、Nginx 配置文件

我本機上之前裝過win版的 nginx,找到配置文件所在,打開在裏面修改相關規則即可。

修改配置:

	server {
        listen       9001;
        server_name  localhost;
		
		location ~ /hsop/ {
			proxy_pass http://localhost:8201;
		}
		location ~ /cmn/ {
			proxy_pass http://localhost:8202;
		}


    }
  • listen:9001 表示 Nginx 對外的端口號,最後都要通過這個端口進行Nginx的訪問
  • server_name:主機名稱,我這裏是本地

下面的就是規則,比如location ~ /hsop/,就是當訪問路徑中存在/hsop/,就轉發到http://localhost:8201。這裏的~表示一種正則匹配。

然後在 cmd 中啓動一下:start nginx.exe

訪問http://localhost:9001/,看到這個說明啓動成功了:

三、修改前端部分

修改配置文件裏的BASE_API,改成訪問 9001 。

同時啓動了 2 個端口的後端模塊,前端頁面分別進行訪問,訪問成功。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章