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

问题描述

我有一个通过在Nginx服务器上运行的create-react-app创建的React应用程序。当然，它具有内置的webpack服务器，您可以通过运行npm start来启动它，并且它当然可以在localhost：3000上运行。由于已使用Nginx进行设置，因此React应用程序是使用npm run build构建的，并被发送到Nginx静态为其提供服务的位置。

问题是我不想每次更改都静态构建此项目，所以我想执行npm start并激活localhost：3000并从此处查看更改。我不知道如何设置Nginx以便从浏览器访问此localhost：3000。似乎不可能。

我已经在Nginx中使用了“代理通过”设置，但是它不起作用。我是否需要设置另一个.conf文件并输入另一个服务器条目和URL来执行此操作？任何人都对如何设置一些URL有任何想法，可以绕过为静态站点提供服务的生产URL设置，并将其转到localhost：3000。这是一个令人发疯的问题。

解决方法

纱线启动和 nginx 无法监听相同的端口，我对您的情况有所了解。

auto build您的项目，并使用nginx代理您的静态文件。
将port更改为纱线开始，并使用nginx代理localhost：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;
   }
}

create-react-app nginx-config reactjs reactjs