nginx反向代理的简单使用

Simple use of reverse proxy in nginx

Posted by if on 2022-01-26
Estimated Reading Time 4 Minutes
Words 1.2k In Total

nginx反向代理的简单使用

前言

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

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

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

用nginx代理的好处

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

nginx部署静态文件

静态文件部署

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

打包vue项目

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

1
npm run build

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

放置静态文件

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

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

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

配置文件路径

这个配置没啥好说的

监听80端口

服务名称是localhost

默认寻找index.html文件

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

1
2
3
4
5
6
7
8
9
10
11
12
13
# 静态代理
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就行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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让它去帮忙规定路径了

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

总代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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.comb.xxx.com解析到服务器ip123.123.123.123

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

反代域名到端口

server_name表示需要服务的域名

而proxy_pass表示需要转发的端口

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 反代域名到端口
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;
}
}

本个人博客提供的内容仅用于个人学习,不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关!