前言
使用create-react-app脚手架搭建的项目, 一般使用webpack-dev-server 进行代理后端接口。下面探索下nginx结合webpack-dev-server进行代理的思路
使用nginx进行代理
假设webpack-dev-server也会新开一个新的监听端口(3333) ,nginx会自己新开一个监听端口(假设为3334)。我们可以采取通过nginx将资源文件代理到webpack-dev-server,然后/api请求代理到真正的后端方式进行分发。
server {
listen 3334;
server_name localhost;
location / {
proxy_pass http://localhost:3333;
}
location /api {
proxy_set_header Host v1.api.com;
proxy_pass http://v1.api.com;
}
}
然后我们访问 http://localhost:3334就可以达到资源文件代理到本地 3333端口, /api请求代理到测试服务器