☰

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

tag-icon • tag-icon nginx proxy
NginX：在子路径下提供应用程序

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

现在我想使用不同的路径路由到同一 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，然后将其路由到默认应用程序。

答案1

通常，当应用程序本身不期望使用 URI 前缀时，在 URI 前缀下运行应用程序是一件棘手的事情，唯一可靠的解决方案是修复/设置应用程序，使其生成所有资产/路由链接，无论是相对链接还是包括部署时所用的前缀。几乎所有现有的解决方法都是“动态”重写应用程序响应，用新链接替换生成的链接。某种通用答案是这里，可以发现一些额外的考虑因素这里。

然而，如果它是一个真正的 SPA，比如说一个使用类似HashRouter而不是的React 应用程序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 的“虚拟”路由的应用程序），因为重写逻辑将在第一次页面到页面转换后被破坏。

答案2

这里有一个例子，如何部署多个 angular/react/vue.js 应用程序和一个 API 来分离路径并通过 Nginx 为它们提供服务：

server{
        server_name yourdomain.com;

        location /api{
                proxy_pass          http://127.0.0.1:8080;
                proxy_http_version  1.1;
                proxy_set_header    Upgrade             $http_upgrade;
                proxy_set_header    Host                $host;
                proxy_set_header    X-Real-IP           $remote_addr;
                proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /admin {
                alias /data/app/ui/admin;
                index index.html index.htm;
                try_files $uri $uri/ /admin/index.html;
                }
    location /client {
                alias /data/app/ui/client;
                index index.html index.htm;
                try_files $uri $uri/ /client/index.html;
                }
    location /business {
                alias /data/app/ui/business;
                index index.html index.htm;
                try_files $uri $uri/ /business/index.html;
                }
    location / {
                alias /data/app/ui/common/;
                index index.html index.htm;
                try_files $uri $uri/ /index.html =404;
                }
}

原始解决方案的参考可以在以下链接中找到： 参考链接

相关内容