nixOS 上的 Nginx 反向代理程式在嘗試載入 css/js 時傳回 404-Golang-PHP中文網

問題內容

解決方法

首頁

後端開發

Golang

nixOS 上的 Nginx 反向代理程式在嘗試載入 css/js 時傳回 404

王林

Feb 10, 2024 pm 01:09 PM

nixOS 上的 Nginx 反向代理在尝试加载 css/js 时返回 404

php小編草介紹，當在nixOS上使用Nginx反向代理時，有時會遇到一個問題：嘗試載入css/js時傳回404錯誤。這個問題可能會導致網站的樣式和功能無法正常顯示。為了解決這個問題，我們需要檢查Nginx的設定和檔案路徑是否正確，並確保代理伺服器能夠正確存取和載入所需的靜態資源。透過仔細排查和調試，我們可以解決這個問題，確保網站的正常運作。

問題內容

我已經設定了 nixos 來運行 nginx 作為 docker 容器的反向代理。在docker容器中運行一個golang伺服器，它使用函數處理/，並從兩個資料夾static和js#返回文件。它在連接埠 8181 上運行。其程式碼如下所示：

func main() {
        static := http.fileserver(http.dir("static"))
        js := http.fileserver(http.dir("js"))
        http.handle("/static/", http.stripprefix("/static/", static))
        http.handle("/js/", http.stripprefix("/js/", js))
        // register function to "/"
        http.handlefunc("/", indexhandler)
        fmt.println("server is starting...")
        err := http.listenandserve("0.0.0.0:8181", nil)
        if err != nil {
                log.fatal("cannot listen and server", err)
        }
        
}
func indexhandler(w http.responsewriter, r *http.request) {
        wd, err := os.getwd()
        var static = filepath.join(wd, "static")
        var index = filepath.join(static, "index.html")
        if err != nil {
                log.fatal("cannot get working directory", err)
        }

        // check if the request is an options preflight request
        if r.method == "options" {
                // respond with status ok to preflight requests
                w.writeheader(http.statusok)
                return
        }

        // post-request
        if r.method == http.methodpost {
              // do something
        } else {
                // loading the index.html without any data
                tmpl, err := template.parsefiles(index)
                err = tmpl.execute(w, nil) // write response to w
                if err != nil {
                        http.error(w, err.error(), http.statusinternalservererror)
                        log.fatal("problem with parsing the index template ", err)
                }

        }
}

登入後複製

我的應用程式的結構如下所示。

├── web
│   ├── dockerfile
│   ├── go.mod
│   ├── server.go
│   └── static
│   │   ├── index.html
│   │   ├── style.css
│   │   └── table.html
│   └── js
│       └── htmx.min.js

登入後複製

configuration.nix 中 nginx 部分的配置如下所示。

  services.nginx = {
    enable = true;
    recommendedGzipSettings = true;
    recommendedOptimisation = true;
    recommendedProxySettings = true;
    recommendedTlsSettings = true;
    virtualHosts."myapp" = {
      sslCertificate = "/etc/ssl/nginx/ssl.cert";
      sslCertificateKey = "/etc/ssl/nginx/ssl.key";
      sslTrustedCertificate = "/etc/ssl/nginx/ssl.chain";
      forceSSL = true; # Redirect HTTP to HTTPS
      locations = {
        "/myapp" = { proxyPass = "http://localhost:8181/"; };
      };
      extraConfig = ''
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      '';
    };

  };

登入後複製

當我尋址https://server/myapp 時，index.html 將加載，但style.css 和htmx. min.js 將會回傳404。

當使用連接埠 8181 而不是 url (http://server:8181) 位址容器時，一切都會照常載入。

我希望nginx將載入css和js的請求重定向到容器。

編輯： 確切的錯誤是： get https://server.name/static/style.css net::err_aborted 404 即使我正在訪問 https://server.name/myapp。

另一個重要訊息是，我想透過同一個反向代理以這種方式運行多個容器。因此，將 als css- 或 js-files 導向到相同位置將無法運作。

解決方法

請檢查 index.html 檔案中的 css/js 參考。您很可能會透過絕對路徑引用它們，如下所示：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/static/style.css" />
    <script src="/js/htmx.min.js"></script>
  </head>
</html>

登入後複製

快速修復方法是將它們替換為相對路徑：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./static/style.css" />
    <script src="./js/htmx.min.js"></script>
  </head>
</html>

登入後複製

這種方法很容易出錯。更好的方法是修改應用程式以在 /myapp 處提供內容：

http.handle("/myapp/static/", http.stripprefix("/myapp/static/", static))
http.handle("/myapp/js/", http.stripprefix("/myapp/js/", js))
http.handlefunc("/myapp/", indexhandler)

登入後複製

並修改index.html檔案中的參考路徑：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/myapp/static/style.css" />
    <script src="/myapp/js/htmx.min.js"></script>
  </head>
</html>

登入後複製

然後修改nginx配置：

locations = {
  "/myapp/" = { proxyPass = "http://localhost:8181/myapp/"; };
};

登入後複製

透過這種方法，無論是否使用反向代理，web 應用程式將始終在 uri /myapp/ 上提供服務，這應該使其易於維護。

以上是nixOS 上的 Nginx 反向代理程式在嘗試載入 css/js 時傳回 404的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1666

CakePHP 教程

1425

Laravel 教程

1327

PHP教程

1273

C# 教程

1252

Related knowledge

Golang vs. Python：性能和可伸縮性 Apr 19, 2025 am 12:18 AM

Golang在性能和可擴展性方面優於Python。 1)Golang的編譯型特性和高效並發模型使其在高並發場景下表現出色。 2)Python作為解釋型語言，執行速度較慢，但通過工具如Cython可優化性能。

Golang和C：並發與原始速度 Apr 21, 2025 am 12:16 AM

Golang在並發性上優於C ，而C 在原始速度上優於Golang。 1)Golang通過goroutine和channel實現高效並發，適合處理大量並發任務。 2)C 通過編譯器優化和標準庫，提供接近硬件的高性能，適合需要極致優化的應用。

Golang vs.C：性能和速度比較 Apr 21, 2025 am 12:13 AM

Golang適合快速開發和並發場景，C 適用於需要極致性能和低級控制的場景。 1)Golang通過垃圾回收和並發機制提升性能，適合高並發Web服務開發。 2)C 通過手動內存管理和編譯器優化達到極致性能，適用於嵌入式系統開發。

Golang的影響：速度，效率和簡單性 Apr 14, 2025 am 12:11 AM

goimpactsdevelopmentpositationality throughspeed，效率和模擬性。 1）速度：gocompilesquicklyandrunseff，IdealforlargeProjects.2）效率：效率：ITScomprehenSevestAndardArdardArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdArdEcceSteral Depentencies，增強的Depleflovelmentimency.3）簡單性。

開始GO：初學者指南 Apr 26, 2025 am 12:21 AM

goisidealforbeginnersandsubableforforcloudnetworkservicesduetoitssimplicity，效率和concurrencyFeatures.1）installgromtheofficialwebsitealwebsiteandverifywith'.2）