Nginx 反向代理

需求

目前负责一个 Web 项目，该项目前后端是分离的，但是只给了一个端口和服务器进行远程连接。所以问题就出现了，前端需要一个端口用于用户访问，而后端也需要一个端口来和前端进行数据传输，那么就需要至少两个端口才能开启这个 Web 服务。为了解决这个问题，在网上查找资料发现 nginx 可以通过反向代理来实现同一个端口访问不同的服务。话不多说，直接开搞！

方案

Nginx 安装

博主的服务器是 Ubuntu 22.04.4 LTS ，首先更新一下系统软件包

1
2
3
4
sudo apt update  # 更新软件包列表
sudo apt upgrade # 更新软件包

sudo apt install nginx # 安装 nginx

输入 nginx -v 命令，如果能看到 nginx 的版本号，则安装成功

安装好之后 Nginx一般会自动打开，如果没有可以使用命令手动打开。（注意如果你开启了防火墙，则需要配置防火墙允许 Nginx可以使用的端口的传输流量。）

1
2
3
4
5
6
sudo systemctl status nginx # 查看 nginx 状态

sudo systemctl start nginx    # 启动 nginx
sudo systemctl stop nginx     # 关闭 nginx
sudo systemctl reload nginx   # 重新加载配置文件（不中断服务）
sudo systemctl restart nginx  # 重启 nginx

Nginx 配置

进入你的 Nginx 配置文件，博主是在 /etc/nginx/sites-available/default 文件中修改的配置。

1
sudo vim /etc/nginx/sites-available/default

以下是博主的配置，前端服务配置在 / 根路径下，后端配置在 /api/ 路径下。这样我们就可以通过 http://127.0.0.1/ 访问前端服务，http://127.0.0.1/api/ 访问后端服务。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
server {
	listen 80; # 监听端口
	
	server_name 127.0.0.1; # 此处填写你的项目的域名或者 IP

	location / {  # 默认访问路径
		proxy_pass http://127.0.0.1:5173; # 该项目对外暴露的接口路径
		proxy_set_header Host $host;
		proxy_set_header X-realIP $remote_addr;
		proxy_set_header X-Forwarded-for $proxy_add_x_forwarded_for;
	}

	location /api/ {
		proxy_pass http://127.0.0.1:5000; # 该项目对外暴露的接口路径
		proxy_set_header Host $host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	}

最终实现效果如下：