时间戳

首页 > 解决方案 > 如何通过nginx运行两个react项目

javascript - 如何通过nginx运行两个react项目

问题描述

我正在使用前端的反应。我有一个在端口 3000 上运行的代码。

在该管理面板下的代码也在那里，我需要移出项目并在不同的端口上单独运行，比如说 3001。所以在 nginx 配置文件中，我已经为这两个项目创建了位置

Under server block
location /admin/ {
            proxy_pass http://127.0.0.1:3001;
            
        }

location / {
            proxy_pass http://127.0.0.1:3000;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }

通过这种方式，当我打开 localhost 时，我的代码运行正常。

现在如果我输入 localhost/admin/ 然后它返回 404。

对于 nginx 路由确认，我更改了管理面板 index.html 的标题，以便清楚地提到我的 nginx 路由是否正常工作所以在此之后，当我点击管理 url 然后通过检查元素我看到了那个标题已更改，但由于主服务器的路由问题，它返回 404。

看起来它同时选择了两条路线。因此，在点击管理 url 后，立即加载 index.html 页面，然后从 3000 端口项目而不是 3001 路由加载。在 3000 端口项目上没有这样的路由，因此它返回 404。

任何人都知道如何解决此类问题。

如果通过 localhost:3000/ 或 localhost:3001/admin/ 等端口号单独运行，两个项目都运行良好

非常感谢任何帮助或建议。提前致谢。

标签： javascriptreactjsnginxreact-router

解决方案

从那以后，您已将 3001 端口分配给 /admin 路由。它将在该端口本身上运行。

localhost 默认侦听默认端口 80 localhost/admin 将侦听 80，除非您指定。

您可以创建两个服务器块并提供不同的服务器名称。

server {
    listen 3000;
}

server {
    listen 3001;
}

推荐阅读