使用Nginx 代理webpack-dev-server项目

前言

使用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请求代理到测试服务器