如何在本地运行的Create-React-App中设置NGINX代理?

3

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

问题在于,每次进行更改时,我都不想将此项目构建为静态文件,因此我想要运行npm start并激活localhost:3000,并从这里查看我的更改。但是,我不知道如何设置Nginx以从浏览器访问localhost:3000。它似乎是不可能的。

我已经在Nginx中使用了“proxy pass”设置来进行位置设置,但它没有起作用。我是否需要设置另一个.conf文件并制作另一个服务器条目和URL来完成这项工作?是否有人对如何设置某个URL以绕过生产URL设置并使其转到localhost:3000有任何想法? 这是令人发狂的问题。

1个回答

2

yarn startnginx不能监听同一个端口,针对您的情况,我有一些想法。

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

nginx配置文件如下:

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;
   }
}

我不明白如何设置nginx,使浏览器输入一个URL后,启动的服务器可以在本地主机上提供服务。 - Rachel
@Rachel 使用 proxy_pass 设置是正确的解决方案。 - lemon
感谢您的提示和时间!非常感激。 - Rachel

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接