在开发模式下为我的 ReactJS 应用 运行 创建一个 URL 映射

Question

我有一个 ReactJS 应用程序 运行 处于开发模式，端口号 3000。我正在尝试使用 Nginx 创建一个映射，以便 avt1.example.com/demo 的所有请求都被路由到 http://localhost:3000/demo 但这不起作用，我看到的只是一个空白页面。

但如果我尝试 avt1.example.com:3000/demo，它会按预期工作。我不明白我哪里出错了。这是我为 Nginx 创建的配置文件 example.com

    server {
        listen 80;
        server_name avt1.example.com www.avt1.example.com;
        location /demo {
                # pass to ReactJS app
                proxy_pass http://localhost:3000;
                proxy_set_header Host $host;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        location / {
                # pass to NodeJS app
                proxy_pass http://localhost:3001;
                proxy_set_header Host $host;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}

我遗漏了什么或做错了什么？我使用 yarn start 启动了 react-app，如果我提供域的端口号就可以正常工作。

此外，如果有 运行 ReactJS 应用程序更好的建议，请告诉我。

Answer 1

你的问题缺少节点 js 代码，所以我猜你在 nodejs 代码中也设置了 "demo" url。因此，您需要将站点启用配置编辑为以下内容

server {
        listen 80;
        server_name avt1.example.com www.avt1.example.com;
        location /demo {
                # pass to ReactJS app
                proxy_pass http://localhost:3000/demo;
                proxy_set_header Host $host;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        location / {
                # pass to NodeJS app
                proxy_pass http://localhost:3001;
                proxy_set_header Host $host;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}

但可读性更好的是

# pass to ReactJS app
upstream demotool {
    server 0.0.0.0:3000/demo;
}

server {
        listen 80;
        server_name avt1.example.com www.avt1.example.com;
        location /demo {
                proxy_pass demotool;
                proxy_set_header Host $host;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}

我现在不是代理传递后端内容的理由