Nginx工作中詳細配置

一、背景介紹

背景：公司原有項目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比對規則

• 前端開發掌握nginx常用功能之server&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

。

• nginx 之 proxy_pass詳解