nginx反向代理的简单使用

前言

之所以写这篇博文，主要是为了留一点配置信息的记录，以后方便CV大法

不讲理论，理论部分可以百度看，本篇博文直接上代码进入实战

本篇不讲述nginx的负载均衡，以后有机会再发一篇关于负载均衡的吧

用nginx代理的好处

动静分离，效率高
无需每个服务都用原生脚手架运行而是打包部署到nginx，效率高、响应快
只需开放一个80端口即可被代理到服务器任何一个端口的服务，安全省事
缓存文件、负载均衡。。。

nginx部署静态文件

静态文件部署

不是vue项目的可以忽略打包环节

打包vue项目

vue项目打包大家肯定都会了

npm run build

默认打包出来是一个名为dist的文件夹

放置静态文件

我们将文件放入自己喜欢的目录下，我们这放在nginx目录的html的文件夹中

假设我们这个项目我们为其取名为vue，那么我们将dist文件夹放入到/nginx/html下，并将dist文件夹改名为vue

那么我们静态文件路径就是/nginx/html/vue

配置文件路径

这个配置没啥好说的

监听80端口

服务名称是localhost

默认寻找index.html文件

出现问题，404等就找404.html文件

	# 静态代理
    server {
        listen       80;
        server_name  localhost;

        location / {
            root   /nginx/html/vue;
            index  index.html index.htm;
        }

        error_page  404              /404.html;
        error_page   500 502 503 504  /50x.html;
    }

然后我们访问localhost就可以访问到文件了

nginx部署带有动态请求的项目

vue跨域代理api

vue项目我们经常前后端分离作跨域处理

那么打包成静态文件之后还可以跨域访问接口api嘛？

当然是可以的

server_name在生产环境可写成xxx.com的域名形式（为了后面的反向代理做铺垫），测试环境用localhost就行

server{
	  listen 80;
	  server_name xxx.com;
	  
	  location / {
		root   /nginx/html/vue;
		index  index.html index.htm;
	  }
	
	  # 发起请求的代理配置，这个 /api/ 是vue.config.js中配置的跨域的路径
	  location /api/ {
        # 请求的真实域名或ip
		proxy_pass  http://xxx.com;
        # 和location写的 /api/ 要一致
		rewrite ^/api/(.*) /$1 break;
	  }
}

vue项目用nginx部署后刷新出现404

部署后会发现，在二级目录下刷新页面会出现404

那么我们在配置中加上一句话就行

这个表示我先找当前uri，找不到再找uri/，若是还是404，那么只好请求/index.html让它去帮忙规定路径了

# 依次查找uri，还是404就交给index.html处理
try_files $uri $uri/ /index.html;

总代码

server{
	  listen 80;
	  server_name xxx.com;
	  
	  location / {
		root   /nginx/html/vue;
		index  index.html index.htm;
         try_files $uri $uri/ /index.html;
	  }
	
	  # 发起请求的代理配置，这个 /api/ 是vue.config.js中配置的跨域的路径
	  location /api/ {
        # 请求的真实域名或ip
		proxy_pass  http://xxx.com;
        # 和location写的 /api/ 要一致
		rewrite ^/api/(.*) /$1 break;
	  }
	}

反向代理域名到端口

不同的服务，端口不同，输入域名:端口又感觉很麻烦，不方便

而且还要记这么多端口，脑袋都疼了，不知道你有没有这种烦恼

那么nginx可以帮助我们，将不同的域名指向不同/相同的端口

域名解析

首先假设我们有一个域名是xxx.com，有一个服务器ip是123.123.123.123

然后我们打开控制台，将a.xxx.com、b.xxx.com解析到服务器ip123.123.123.123

这里并不一定是要用a.xxx.com去解析，可以是任意自己喜欢的前缀都可以

反代域名到端口

server_name表示需要服务的域名

而proxy_pass表示需要转发的端口

这个时候，当我们访问a.xxx.com时，就会被nginx代理到服务器本地8888端口的服务

而当我们访问b.xxx.com时，就会被nginx代理到服务器本地9999端口的服务

这样通过域名去访问不同端口的服务是不是感觉非常方便了！

# 反代域名到端口
	server{
	  listen 80;
	  server_name  a.xxx.com;
	  location / {
		proxy_pass  http://127.0.0.1:8888; # 转发规则
		proxy_set_header Host $proxy_host; # 修改转发请求头，让端口的应用可以受到真实的请求
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	  }
	}

	server{
	  listen 80;
	  server_name  b.xxx.com;
	  location / {
		proxy_pass  http://127.0.0.1:9999; # 转发规则
		proxy_set_header Host $proxy_host; # 修改转发请求头，让端口的应用可以受到真实的请求
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	  }
	}