为在开发模式下运行的ReactJS应用程序创建URL映射

我有一个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;
        }
}

我遗漏了什么或做得不正确？我使用
warn start
启动了react应用程序，如果我在域中提供端口号，它就可以正常工作

另外，如果有人建议以更好的方式运行ReactJS应用程序，请让我知道。
您的问题缺少nodejs代码，因此我猜您也在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;
        }
}

我现在没有理由代理传递后端内容
我有点被你的问题弄糊涂了：/你如何运行你的Web服务器，你如何运行你的后端？有一行你提到ngnix，但nginx是在docker上运行还是只是一个虚拟机？顺便说一句，你说当你输入网址avt1.example.com:3000/demo时，一切正常，对吗？（甚至avt1.example.com:3000/应该已经开始工作了吗？）这就是ngnix的工作原理。或者你是说你想拥有avt1.example.com/demo？？？值得一提的是，您还尝试使用0.0.0，而不是使用localhost。0@CrissCrossCrass这是在azure VM中运行的。是的，我想以
avt1.example.com/demo
的形式运行这个。不想包含端口号。@crosscrass你知道吗？我今天会发布一个答案，给我一些，我需要查看我的源代码（我已经有一段时间没有接触它了xD）顺便问一下，你也可以添加你的节点js代码吗？我想确保您也没有任何url映射：）