Nginx工作中详细配置

待我称王封你为后i 2023-02-17 14:54 7阅读 0赞

#### 一、背景介绍 ####

背景：公司原有项目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匹配规则][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详解][nginx _ proxy_pass]

[nginx_server_location]: https://www.cnblogs.com/wonyun/p/10309491.html
[nginx _ proxy_pass]: https://www.jianshu.com/p/b010c9302cd0