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

Posted

技术标签:

【中文标题】如何为在 localhost:3000 上运行的 Create-React-App 设置代理通过 NGINX【英文标题】:How to set up proxying past NGINX for Create-React-App running on localhost:3000 【发布时间】:2021-02-24 02:09:15 【问题描述】:

我有一个通过在 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。这是一个令人抓狂的问题。

【问题讨论】:

【参考方案1】:

yarn startnginx 无法监听同一个端口,我对你的情况有一些想法。

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

【讨论】:

我不明白如何设置 nginx 在浏览器中输入一个 url,然后让 localhost:3000 上的启动服务器为它服务。 @Rachel 使用 proxy_pass 设置是正确的解决方案 感谢您的提示和您的时间!非常感谢

以上是关于如何为在 localhost:3000 上运行的 Create-React-App 设置代理通过 NGINX的主要内容,如果未能解决你的问题,请参考以下文章

如何在 openSUSE 上使用 NGINX 或 Apache2 将我的端口 80 重新路由到 localhost:3000 以便我可以运行我的 Node.js 应用程序

React js 没有在 localhost:3000 上运行我的应用程序

如何为 nodejs Express 服务器启用 CORS?

BIM360 问题编辑器 Forge Node JS App - 试图在 localhost 3000 上运行

React 教程 - 如何为 reactJs 应用程序启动节点服务器?

如何从localhost:5000发送http post请求到localhost:3000