前端本地 Nginx 反向代理
一、问题引入
本地开发遇到线上bug，debug得stash代码切换分支，同时需切换开发环境与生产环境服务，npm run serve 或 npm start 费时
二、webpack-dev-server反向代理
webpack-dev-server 可以解决跨域，它基于Node代理中间件 http-proxy-middleware
配置如下
proxy: { // 需要代理的url规则 "/api": { target: "https://dev.xxx.tech", // 反向代理的目标服务 changeOrigin: true, // 开启后会虚拟一个请求头Origin pathRewrite: { "^/api": "" // 重写url，一般都用得到 } } }
补充：反向代理隐藏了真实的服务端；相反地，正向代理隐藏了真实的客户端
三、Nginx代理
1.下载Nginx
下载Nginx，选择Windows稳定版即可。
2.固定前端代理
为了避免在debug线上问题时需要切换 proxy target 而重新运行 npm start，我们在前端层把 proxy target 固定下来。比如我固定访问 127.0.0.1:8090（当然，实际上访问哪个端口可以视个人情况调整）。
proxy: { "/api": { target: "127.0.0.1:8090", // 固定代理目标 changeOrigin: true, pathRewrite: { "^/api": "" } } }
3.Nginx代理
由于前端的接口访问已经固定为 127.0.0.1:8090，我们只要在 Nginx 中监听本地 8090 端口，把请求统统转发给目标服务器即可，配置如下
server { listen 8090; server_name 127.0.0.1; location / { proxy_pass https://dev.xxx.tech; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; # proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }
可以看到，在配置中注释了X-Real-IP，而在生产环境下配置 Nginx 时，一般会保留这几项Host，X-Real-IP，X-Forwarded-For，用以保留请求的服务器域名，原始客户端和代理服务器的IP等信息。
如果不注释X-Real-IP，前端访问入口的真实IP是 127.0.0.1 或 localhost，Nginx不认可这样的本地ip，直接返回404，客户端请求不予代理到其他远程服务器（这里没找到原因）。
有了以上的配置，我们就可以将前端代理层和Nginx代理层解耦，前端固定通过本地 127.0.0.1:8090 访问后端接口，而具体接口是代理到开发环境、测试环境或是生产环境，由Nginx决定，只需要修改 nginx.conf 后重启即可。
而Nginx热重启是非常快的，一条命令即可实现，几乎零等待时间。
// windows下是这个命令 nginx.exe -s reload // linux是这样的 nginx -s reload
四、本地域名
杜绝 ip 被占用这种情况，可以引入本地域名。
域名是通过解析后才能得到真实的服务IP。而域名解析过程中也有这么一些关键节点。
- 浏览器缓存
- 操作系统hosts文件
- Local DNS
- Root DNS
- gTLD Server
借用网上一张图说明下大致流程（侵删）
首先，我们找到 C:\Windows\System32\drivers\etc\hosts 这个文件，打开后在最后新增一条解析记录
127.0.0.1 www.devtest.com
然后保存这个文件，保存hosts文件时需要administrator权限。
这就相当于告诉本地操作系统，如果用户访问 www.devtest.com，我就给他解析到 127.0.0.1 这个ip
所以，我们在Nginx只要监听 127.0.0.1 的 80 端口即可，配置如下
server { listen 80; server_name 127.0.0.1; location / { proxy_pass https://dev.xxx.tech; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }
最后，我们只要在前端工程中把代理目标设置为 www.devtest.com即可。
proxy: { "/api": { target: "http://www.devtest.com", // 固定代理目标 changeOrigin: true, pathRewrite: { "^/api": "" } } }
这样前端访问的某接口 http://localhost:8080/api/user/login 就会被代理到 http://www.devtest.com/user/login，而 www.devtest.com 被本地 hosts 文件解析到127.0.0.1，接着Nginx监听了127.0.0.1 的 80 端口，将请求转发到真实的后端服务。
