NginX：在子路径下提供应用程序服务

Question

我有多个单页应用程序，每个应用程序都在主目录下自己的容器中运行，这非常简单。

现在我想使用不同的路径路由到同一 dns 条目下的这些应用程序，例如：

domain.com      -> defaultAppContainer
domain.com/app1 -> container1
domain.com/app2 -> container2

我没有在路由期间重写路径的选项，因此我希望 Nginx 能够分别侦听路径/app1或/app2从那里正确地为应用程序提供服务。目前我所尝试的一切都会导致错误。

我考虑过两种可能性：

• 使用类似的东西代理到 home 的子路径

  location /app1 {
    proxy_pass $host/;
  }
  

  但这似乎不适用于前端，我假设请求中的某些路径混乱了。
• 提供子路由下的所有文件，例如：

  location /app1 {
    alias root /usr/share/nginx/html/;
  }
  

  其中别名指向构建的 Web 应用程序的基本目录。这给了我一个CONN_RESET错误。

此外，简单地使用 307 重定向也不是一种选择，因为这会导致客户端在没有路径的情况下调用基本 URL，然后将其路由到默认应用程序。

Answer 1

通常，当应用程序本身不认为这是一件棘手的事情时，在 URI 前缀下运行应用程序，唯一可靠的解决方案是修复/设置应用程序，使其生成所有资产/路由链接，无论是相对的还是包含其前缀部署在. 几乎所有现有的解决方法都是“即时”重写应用程序响应，用新链接替换生成的链接。这里有某种通用答案，也可以在这里找到一些其他注意事项。

然而，如果它是一个真正的 SPA，假设一个 React 应用程序使用类似HashRouter而不是 的东西BrowserRouter，那么基于根据请求RefererHTTP 标头进行条件重写的解决方法是可能的：

server {
    ...
    if ($http_referer ~ ^https?://yourdomain.com/app1/) {
        rewrite ^ /app1$uri;
    }
    if ($http_referer ~ ^https?://yourdomain.com/app2/) {
        rewrite ^ /app2$uri;
    }
    ...
    location /app1/ {
        proxy_pass http://container1/;
    }
    location /app2/ {
        proxy_pass http://container2/;
    }
}

这里使用的所有尾部斜杠都是故意使用的，删除其中任何一个都会破坏解决方案！

这不适用于 SPA 以外的任何其他内容（包括使用基于 HTML5 浏览器历史记录 API 的“虚拟”路由的应用程序），因为重写逻辑将在第一次页面到页面转换后被破坏。