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/casehttp://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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值