如何为在localhost:3000上运行的Create-React应用程序设置通过NGINX的代理

Question

我有一个通过运行在Nginx服务器上的createreact应用程序创建的React应用程序。当然，它有内置的Web包服务器，您可以通过运行npm start启动它，它当然运行在localhost:3000上。由于它是使用Nginx设置的，因此react应用程序是使用npm run build构建的，并发送到Nginx静态提供服务的位置。

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

我在Nginx中使用了位置的“代理传递”设置，但它不起作用。我必须再安排一个吗。conf文件并创建另一个服务器条目和URL来执行此操作？任何人都知道如何设置一些url，从而绕过为静态站点提供服务的生产url设置，使其转到localhost:3000。这是一个令人恼火的问题。

Answer 1

纱线开始和nginx不能听同一个端口，我对你的情况有一些想法。

1. 自动构建您的项目，并使用nginx代理您的静态文件。
2. 更改纱线启动端口，并使用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;
   }
}