一、背景介紹
背景:公司原有項目demo1,前端項目放在放在Linux環境目錄 /usr/local/nginx/demo1
,demo1下存放index.html和static文件夾(包含一些靜態資源)
nginx.conf中配置爲:
http {
include mine.types;
default_type application/octer-stream;
client_max_body_size 10M;
sendfile on;
upstream demo_channel {
# 根據權重請求分發到不同的服務器
# 8091端口是配置的zuul網關端口
server 10.137.128.120:8091 weight=1;
server 10.137.128.122.8091 weighr=1;
server 10.137.128.123.8091 weighr=1;
}
......
}
server {
listen 80;
server_name localhost;
# 前端主頁
location / {
root demo1;
try_files $uri $uri/ /index.html;
index index.html index.html;
}
location /user {
proxy_pass http://demo1_channel;
}
location /backend {
proxy_pass http://demo1_channel;
}
location /case {
proxy_pass http://demo1_channel;
}
......
}
公司共有四臺服務器,前端項目部署在10.137.128.121上,其他後端服務部署在120、122、123上,當瀏覽器訪問地址http://10.137.128.122:80
時,請求會被location /
匹配到,就會訪問root後配置的路徑加上location後配置的路徑,即請求就會請求到demo1/
下的靜態資源。
至於前端vue項目如何訪問後臺接口?Vue項目中配置了一個接口路徑,公司前端項目配置的總路徑是http://10.137.128.122:80/
,然後請求不同微服務時就再加上不同的微服務名(也是Vue中寫),如http://10.137.128.122:80/case
、http://10.137.128.122:80/user
等,瀏覽器訪問前端項目時請求這些路徑時,就會被Nginx配置的location /case location /user
攔截到,從而請求轉發給proxy_pass
後配置的路徑。
該路徑公司配置的是upstream demo_channel { ... }
,根據權重將請求轉發給不同的服務器,從而實現負載均衡。即實際上請求後臺服務的路徑爲10.137.128.120:8091/case/...
或10.137.128.122:8091/user/...
。且由於後臺配置了Zuul,所有的微服務接口都可以使用Zuul網關的IP地址加上端口號(這裏是8091)再加上微服務名訪問到,即前端用http://10.137.128.122:80/微服務名
就可以請求到不同服務器的不同微服務的接口方法。
二、配置前端
新增:新增一個單獨模塊,不配置網關,並要有一套獨立的前端。
方法1:配置不同的端口,server{ listen 不同的端口; ...}
,類似原先配置,只不過換一個端口,訪問時端口要使用現在配置的端口。
但是由於公司內部網絡只能允許客戶使用80端口訪問,只能把新項目配置在原來的80端口下,配置文件如下:
server {
listen 80;
server_name localhost;
# 前端主頁
location / {
root demo1;
try_files $uri $uri/ /index.html;
index index.html index.html;
}
# 前端項目demo2
location /demo2 {
root demo2;
try_files $uri $uri/ /index.html;
index index.html index.html;
}
......
}
瀏覽器訪問地址會根據location後配置的路徑匹配,會先匹配/demo2
,再匹配/
,訪問路徑爲http://10.137.128.122:80/demo2
時,匹配到location /demo2
,即請求前端資源路徑爲root + location後配置的路徑,即爲demo2/demo2
目錄下的靜態資源,所以demo2項目放置的路徑爲/usr/local/nginx/demo2/demo2
。
由於不想在外面又多出一層demo2目錄,曾想過類似原先那樣配置,但是不能有兩個{ location / }
,配置文件不允許。
所以可以使用alias
,配置文件如下
server {
......
# 前端項目demo2
location /demo2 {
alias demo2/;
try_files $uri $uri/ /index.html;
index index.html index.html;
}
......
}
alias和root不同的區別之處就在於,使用alias時,請求前端資源時不會帶上location後的路徑,即http://10.137.128.122:80/demo2
請求時只會請求/usr/local/nginx/demo2
下的靜態資源。
注意:
- 使用alias時,目錄名後面一定要加
/
,root可加可不加; - alias只能位於location塊中,root可以不放在location中。
三、配置後端接口服務器反向代理
當時配置完前端項目能在開發機上正常訪問後,也能正常請求到後臺接口後就不管了,結果交付客戶使用時,發現始終報network error
,後來想到原因可能是請求不到後臺接口,因爲客戶電腦僅允許訪問80端口,而我僅僅只配置了前端。當時和前端聯調時,前端在Vue項目中寫死的請求後臺接口地址爲http://10.137.128.120:9092
,應該是客戶無法請求該地址。
現配置放置新增接口服務器反向代理,Nginx配置文件如下:
server {
listen 80;
server_name localhost;
......
# 後端服務
location /entryCase {
# 該服務未配置網關,是單體SpringBoot應用
proxy_pass http://10.137.128.120:9092/entryCase;
proxy_read_timeout 30s;
}
......
}
Vue前端項目中請求接口地址改爲http://10.137.128.121:80
,即用戶訪問主頁資源後,進行某個操作後,瀏覽器發送請求爲http://10.137.128.121:80/entryCase/...
,該服務名也是前端代碼中寫死,該路徑被nginx.conf中配置的location /entryCase
匹配到,由nginx這個反向代理服務器去proxy_pass後配置的路徑請求數據,再返回給客戶端。
到此配置完成,整個配置文件如下:
server {
listen 80;
server_name localhost;
# 前端主頁
location / {
root demo1;
try_files $uri $uri/ /index.html;
index index.html index.html;
}
# 前端項目demo2
location /demo2 {
alias demo2/;
#try_files $uri $uri/ /index.html;
index index.html index.html;
}
# 後端服務
location /entryCase {
# 該服務未配置網關,是單體SpringBoot應用
proxy_pass http://10.137.128.120:9092/entryCase;
proxy_read_timeout 30s;
}
......
}
四、Complement
1. nginx.conf修改後(Linux環境)需重加載
/usr/local/nginx/sbin/nginx -t
,測試配置文件修改是否正常;/usr/local/nginx/sbin/nginx -s reload
,重新加載Nginx配置文件。
2. Location匹配規則
3. Proxy_pass配置
本次前端請求後臺微服務的地址爲:http://10.137.128.121:80/entryCase/...
,比如說請求一個get方法,http://10.137.128.121:80/entryCase/get
,Nginx配置文件中可配置的proxy_pass有兩種:
-
proxy_pass http://10.137.128.120:9092
-
proxy_pass http://10.137.128.120:9092/entryCase
以上兩種都能正確請求到http://10.137.128.120:9092/entryCase/get
。