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

Question

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

问题是我不想每次进行更改时都静态构建此项目，因此我想执行 npm start 并激活 localhost:3000 并从此处查看我的更改。我不知道如何设置 Nginx 以从浏览器访问此 localhost:3000。好像不可能。

我在 Nginx 中对位置使用了“代理通行证”设置，但它不起作用。我是否必须设置另一个 .conf 文件并创建另一个服务器条目和 URL 才能执行此操作？任何人都对如何设置一些 url 有任何想法，您可以绕过服务于静态站点的生产 url 设置并使其转到 localhost:3000。这是一个令人抓狂的问题。

Answer 1

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

auto build你的项目，使用nginx代理你的静态文件。
为 yarn start 更改，并使用 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;
   }
}

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

How to set up proxying past NGINX for Create-React-App running on localhost:3000

nginx

node.js

reactjs

create-react-app

nginx-config

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

How to set up proxying past NGINX for Create-React-App running on localhost:3000

nginx

node.js

reactjs

create-react-app

nginx-config

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