Sitelet https://github.com/PeterChen1997/MyBlog/issues/29
Skip to content

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

Description

@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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions