如何在 Nginx 上使用多个网站/路径提供静态内容？

Question

我一直在关注this article，尝试使用IIS 和Nginx 在同一台机器上托管多个网站。

根据提供的文章，我制作了以下nginx.conf：

http {
    server {
        listen                 80;
        server_name            localhost;
        keepalive_timeout      1;
        gzip_types             text/css text/plain text/xml application/xml application/javascript application/x-javascript text/javascript application/json text/x-json;
        gzip_proxied           no-store no-cache private expired auth;
        gzip_disable           "MSIE [1-6]\.";

        # new website         
        location /bacon/ {
            proxy_pass          http://127.0.0.1:1500/;
            proxy_http_version  1.1;
            gzip_static         on;
        }

        # old website
        location / {
            proxy_pass          http://127.0.0.1:8881;
            proxy_http_version  1.1;
            gzip_static         on;
        }
    }
}

我的old website 工作正常。

然而，当我尝试访问我的 new website 时，我收到以下错误：

请注意，如果通过http://127.0.0.1:1500/ 直接请求，我的new website 工作正常。

我在这里错过了什么？

Answer 1

proxy_pass 指令的 URL 重写仅适用于 http 请求和响应中的 http 重定向。这意味着，如果http://127.0.0.1:1500/; 将回复 HTTP 30x 位置：http://127.0.0.1:1500/aaaa/，则 nginx 会将其重写为 http://localhost/bacon/aaaa/。

但是这个重写不会触及响应体。响应 HTML 中的任何链接都是相同的 - <a href="/aaaa/"，所以这里没有 /bacon/ 部分。

修复它有两种方法。首先 - 编辑您的应用程序。将所有链接替换为 /beacon/ 前缀或使用相对 URL 并在每个文件的头部添加 <base href="/bacon/">。

如果无法编辑文件，您可以使用 ngx_http_sub_module 重写正文。有模块文档http://nginx.org/en/docs/http/ngx_http_sub_module.html

通过这种方式，您需要为所有使用链接的 html 结构添加sub_filter。例如

sub_filter_once off;
sub_filter ' href="/' ' href="/bacon/';
sub_filter ' src="/' ' src="/bacon/';

只是需要小心。您应该将所有sub_filter 放到/bacon/ 位置。

设置后端应用程序是首选，但有时只有 sub_filter 可以提供帮助。

还有第三种方法，但可以在极少数情况下使用。如果/flutter_servivce_worker.js 不存在于 127.0.0.1:8881 后端，您可以将此文件的自定义位置和 proxy_pass 添加到 bacon 后端：

location = /flutter_servivce_worker.js {
  proxy_pass http://127.0.0.1:1500;
}

当您只丢失很少的文件并且不使用任何链接时，这种方法在非常有限的情况下确实可以提供帮助。

Answer 2

我相信您的第一个应用正在从第二个（根路径）加载 ma​​in.dart.js，因为您忘记在 index.html<base href="/"> 更改为 <base href="/bacon/"> /strong> 文件。

Answer 3

与 NGINX 无关。

对于新站点，请求被很好地路由并且 HTML 被加载到浏览器上。但是应用程序的依赖静态文件引用仍然指向基本位置路径'/'。

根据选择的前端语言，基本路由应更改为 /bacon

（或）

创建一个名为 bacon 的文件夹，并将构建的文件放在该文件夹中，并使用 Nginx 和网络服务器配置提供静态内容

Answer 4

你试过了吗？

# new website         
    location /new/ {
        proxy_pass          http://127.0.0.1:1500;
        proxy_http_version  1.1;
        gzip_static         on;
    }

    # old website
    location /old/ {
        proxy_pass          http://127.0.0.1:8881;
        proxy_http_version  1.1;
        gzip_static         on;
    }