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中文網其他相關文章！
