如何通过NGINX为在localhost:3000上运行的Create React App设置代理

Question

我有一个React应用程序，它是通过在Nginx服务器上运行的create-rect应用程序创建的。当然，它有内置的webpack服务器，您可以通过运行npm-start来启动它，它当然在localhost:3000上运行。由于它是用Nginx设置的，react应用程序是使用npm运行构建的，并发送到Nginx静态服务的位置。

问题是，我不想每次进行更改时都静态地构建这个项目，所以我想进行npm启动并激活localhost:3000，然后从这里查看我的更改。我不知道如何设置Nginx以从浏览器访问这个localhost:3000。这似乎是不可能的。

我使用了"；代理通行证"；在Nginx中设置位置，但它不起作用。我是否必须设置另一个.conf文件并制作另一个服务器条目和URL才能完成此操作？任何人都知道如何设置一些url，可以绕过为静态站点提供服务的生产url设置，使其转到localhost:3000。这是一个令人抓狂的问题。

Answer 1

yarn start和nginx不能监听同一端口，我对您的情况有一些想法。

1. 自动构建您的项目，并使用nginx代理您的静态文件
2. 更改yarn start的端口，并使用nginxproxylocalhost:3000到您的自定义端口

类似于的ngixn配置文件

server {
listen 3001;
server_name  tomcat.shaochenfeng.com;
index  index.php index.html index.htm;
location / {
proxy_pass  http://localhost:3000;
proxy_set_header Host $proxy_host; 
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}