如何在 nginx 上为反应应用程序设置代理通行证？

Question

我的 react 应用有不同的途径来使用不同的功能

例如

localhost:3000,
localhost:3000/Dashboard,
localhost:3000/Hub,
localhost:3000/Person

等等……

我想在生产环境的 nginx 中配置 react 应用路由。到目前为止，我在生产环境中的 nginx 配置中实际上所做的是，

server_name api.vesta-project.net;

location /vqcc {
    proxy_pass http://localhost:3000/;
} 

我的问题在于当前设置，当我说“api.vesta-project.net/vqcc”时，主页运行良好。然而，当我单击导航到 /Dashboard 的按钮时。我得到404 error，因为它没有在内部将“vqcc”附加到react应用程序的路径中，因此在检查每个nginx conf错误的请求时，它就像api.vesta-project.net/Dashboard“。所以每当客户提出一个问题时，我都需要一个解决方案请求时，它应该将“vqcc”附加到路径，以便它成为根据 nginx 路由的有效 url。

e.x 当客户端请求api.vesta-project.net/Dashboard 时，它应该变成

api.vesta-project.net/vqcc/Dashboard

如果我可以在 nginx 或 package.json 处理此问题而无需在内部更改 react 应用程序中的任何路由，请帮助我

Answer 1

您可以尝试在包罗万象的位置重写 uri。

location / {
    rewrite /(.*) /vqcc/$1;
}

location /vqcc{
    proxy_pass http://localhost:3000/;
}