如何在 Nginx 上使用多個網站/路徑提供 static 內容？

Question

我一直在關注這篇文章，嘗試使用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

Url 重寫proxy_pass指令僅適用於 http 請求和 http 重定向響應。 這意味着，如果http://127.0.0.1:1500/; will reply with HTTP 30x Location: http://127.0.0.1:1500/aaaa/ , nginx will rewrite it to 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

我相信您的第一個應用程序正在從第二個（根路徑）加載main.dart.js ，因為您忘記在index.html文件中將<base href="/">更改為<base href="/bacon/"> 。

Answer 3

與 NGINX 無關。

對於新站點，請求路由良好，HTML 被加載到瀏覽器上。 但是應用程序的依賴 static 文件引用仍然指向基本位置路徑“/”。

根據選擇的前端語言，基本路由應更改為 /bacon

（或者）

創建一個名為 bacon 的文件夾，並將構建的文件放在該文件夾中，並提供 static 內容，只需使用 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;
    }