[小技巧]通过 webpack + Nginx 实现无感前后端联调

[PeterChen1997]

前置工作

• 获取后端 IP PORT
• 获取前端的 IP PORT

获取本地内网 IP 方法

options + 点击 wifi 按钮

前端调整点

1. 调整 webpack-dev-server 配置

初始化

通过新增 debug 配置，控制项目运行开关

新增或者修改服务端配置

1. 修改 apiPrefix 为''，确保请求通过 nginx 打回前端服务
2. 修改 proxy.conf.json 中的路由代理逻辑
3. 重启前端服务

2. 调整 Nginx 配置

下方配置为测试环境所在 nginx 文件

# 内部的 IP 为前端 IP PORT
location ~* /api/ {
	if ($http_referer ~ \/chenyangbj01\/$){
		proxy_pass http://10.1.103.216:3000;
  }
}

location /chenyangbj01/ {
	proxy_pass http://10.1.103.216:3000/;
}

访问链接

https://xxx.com/chenyangbj01