Le proxy inverse Nginx sur nixOS renvoie 404 lors de la tentative de chargement de CSS/js

L'éditeur PHP Baicao a introduit que lors de l'utilisation du proxy inverse Nginx sur nixOS, vous rencontrerez parfois un problème : une erreur 404 est renvoyée lors de la tentative de chargement de css/js. Ce problème peut entraîner un mauvais affichage du style et des fonctionnalités du site Web. Afin de résoudre ce problème, nous devons vérifier si la configuration Nginx et le chemin du fichier sont corrects, et nous assurer que le serveur proxy peut accéder et charger correctement les ressources statiques requises. Grâce à un dépannage et un débogage minutieux, nous pouvons résoudre ce problème et assurer le fonctionnement normal du site Web.

Contenu de la question

J'ai mis en place le nixos 来运行 nginx 作为 docker 容器的反向代理。在docker容器中运行一个golang服务器，它使用函数处理/，并从两个文件夹static和jsdossier de retour. Il fonctionne sur le port 8181. Le code est le suivant :

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

        }
}

La structure de ma candidature ressemble à ci-dessous.

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

La configuration de la partie

configuration.nix 中 nginx est la suivante.

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

  };

Quand j'adresserai https://server/myapp 时，index.html 将加载，但 style.css 和 htmx.min.js, il renverra 404.

Lorsque vous adressez le conteneur en utilisant le port 8181 au lieu de l'url (http://server:8181), tout se chargera comme d'habitude.

Je veux que nginx redirige les requêtes pour charger les CSS et js vers le conteneur.

Éditeur : L'erreur exacte est : get https://server.name/static/style.css net::err_aborted 404 即使我正在访问 https://server.name/myapp.

Une autre information importante est que je souhaite exécuter plusieurs conteneurs de cette manière via le même proxy inverse. Par conséquent, diriger les fichiers css ou js vers le même emplacement ne fonctionnera pas. css- 或 js-files 定向到同一位置将不起作用。

解决方法

请检查 index.html

Solution

Veuillez vérifier les références css/js dans le fichier

. Vous les référencez probablement via des chemins absolus comme celui-ci : /myapp

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

Une solution rapide consiste à les remplacer par des chemins relatifs :

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

index.htmlCette méthode est facile à commettre des erreurs. Une meilleure approche consiste à modifier l'application pour diffuser du contenu sur

 : 

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

Et modifiez le chemin de référence dans le fichier

 : /myapp/

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

Modifiez ensuite la configuration de nginx : 🎜

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

🎜Avec cette approche, l'application web sera toujours servie sur l'uri 🎜 que vous utilisiez ou non un proxy inverse, ce qui devrait faciliter sa maintenance. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!