Der Nginx-Reverse-Proxy unter NixOS gibt 404 zurück, wenn versucht wird, CSS/JS zu laden

Der PHP-Editor Baicao führte ein, dass bei der Verwendung des Nginx-Reverse-Proxys unter nixOS manchmal ein Problem auftritt: Beim Versuch, CSS/JS zu laden, wird ein 404-Fehler zurückgegeben. Dieses Problem kann dazu führen, dass der Stil und die Funktionalität der Website nicht richtig angezeigt werden. Um dieses Problem zu lösen, müssen wir überprüfen, ob die Nginx-Konfiguration und der Dateipfad korrekt sind, und sicherstellen, dass der Proxyserver korrekt auf die erforderlichen statischen Ressourcen zugreifen und diese laden kann. Durch sorgfältige Fehlerbehebung und Fehlerbehebung können wir dieses Problem lösen und den normalen Betrieb der Website sicherstellen.

Frageninhalt

Ich habe die nixos 来运行 nginx 作为 docker 容器的反向代理。在docker容器中运行一个golang服务器，它使用函数处理/，并从两个文件夹static和jsRückgabedatei eingerichtet. Es läuft auf Port 8181. Der Code lautet wie folgt:

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)
                }

        }
}

Der Aufbau meiner Bewerbung sieht wie folgt aus.

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

Die Konfiguration des

configuration.nix 中 nginx-Teils ist wie folgt.

  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;
      '';
    };

  };

Wenn ich https://server/myapp 时，index.html 将加载，但 style.css 和 htmx.min.js anspreche, wird 404 zurückgegeben.

Wenn Sie den Container über Port 8181 statt über die URL (http://server:8181) ansprechen, wird alles wie gewohnt geladen.

Ich möchte, dass Nginx Anforderungen zum Laden von CSS und JS in den Container umleitet.

Herausgeber: Der genaue Fehler ist: get https://server.name/static/style.css net::err_aborted 404 即使我正在访问 https://server.name/myapp.

Eine weitere wichtige Information ist, dass ich auf diese Weise mehrere Container über denselben Reverse-Proxy ausführen möchte. Daher funktioniert die Weiterleitung von css- oder js-Dateien an denselben Speicherort nicht. css- 或 js-files 定向到同一位置将不起作用。

解决方法

请检查 index.html

Lösung

Bitte überprüfen Sie die CSS/JS-Referenzen in der

-Datei. Sie verweisen höchstwahrscheinlich über absolute Pfade wie diesen: /myapp

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

Eine schnelle Lösung besteht darin, sie durch relative Pfade zu ersetzen:

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

index.htmlBei dieser Methode können leicht Fehler passieren. Ein besserer Ansatz besteht darin, die App so zu ändern, dass Inhalte unter

:

bereitgestellt werden

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

Und ändern Sie den Referenzpfad in der

-Datei: /myapp/

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

Ändern Sie dann die Nginx-Konfiguration: 🎜

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

🎜Bei diesem Ansatz wird die Webanwendung immer auf der URI bereitgestellt 🎜, unabhängig davon, ob ein Reverse-Proxy verwendet wird oder nicht, was die Wartung vereinfachen sollte. 🎜

Das obige ist der detaillierte Inhalt vonDer Nginx-Reverse-Proxy unter NixOS gibt 404 zurück, wenn versucht wird, CSS/JS zu laden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!