Proksi terbalik Nginx pada nixOS mengembalikan 404 apabila cuba memuatkan css/js

Editor PHP Baicao memperkenalkan bahawa apabila menggunakan proksi terbalik Nginx pada nixOS, kadangkala anda akan menghadapi masalah: ralat 404 dikembalikan apabila cuba memuatkan css/js. Masalah ini boleh menyebabkan gaya dan fungsi tapak web tidak dipaparkan dengan betul. Untuk menyelesaikan masalah ini, kita perlu menyemak sama ada konfigurasi Nginx dan laluan fail adalah betul, dan memastikan pelayan proksi boleh mengakses dan memuatkan sumber statik yang diperlukan dengan betul. Melalui penyelesaian masalah dan penyahpepijatan yang teliti, kami boleh menyelesaikan masalah ini dan memastikan operasi biasa tapak web.

Kandungan soalan

Saya telah menyediakan nixos 来运行 nginx 作为 docker 容器的反向代理。在docker容器中运行一个golang服务器，它使用函数处理/，并从两个文件夹static和jskembali fail. Ia berjalan pada port 8181. Kodnya adalah seperti berikut:

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

        }
}

Struktur aplikasi saya kelihatan seperti di bawah.

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

Konfigurasi bahagian

configuration.nix 中 nginx adalah seperti berikut.

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

  };

Apabila saya alamat https://server/myapp 时，index.html 将加载，但 style.css 和 htmx.min.js ia akan mengembalikan 404.

Apabila menangani bekas menggunakan port 8181 dan bukannya url (http://server:8181) semuanya akan dimuatkan seperti biasa.

Saya mahu nginx mengubah hala permintaan untuk memuatkan css dan js ke bekas.

Editor: Ralat yang tepat ialah: get https://server.name/static/style.css net::err_aborted 404 即使我正在访问 https://server.name/myapp.

Satu lagi maklumat penting ialah saya ingin menjalankan berbilang bekas dengan cara ini melalui proksi terbalik yang sama. Oleh itu, mengarahkan fail css- atau js-ke lokasi yang sama tidak akan berfungsi. css- 或 js-files 定向到同一位置将不起作用。

解决方法

请检查 index.html

Penyelesaian

Sila semak rujukan css/js dalam fail

. Anda berkemungkinan besar merujuknya melalui laluan mutlak seperti ini: /myapp

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

Pembetulan pantas ialah menggantikannya dengan laluan relatif:

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

index.htmlKaedah ini mudah melakukan kesilapan. Pendekatan yang lebih baik ialah mengubah suai apl untuk menyampaikan kandungan di

:

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

Dan ubah suai laluan rujukan dalam fail

: /myapp/

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

Kemudian ubah suai konfigurasi nginx: 🎜

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

🎜Dengan pendekatan ini, aplikasi web akan sentiasa dihidangkan pada uri 🎜 sama ada menggunakan proksi terbalik atau tidak, yang sepatutnya memudahkan penyelenggaraan. 🎜

Atas ialah kandungan terperinci Proksi terbalik Nginx pada nixOS mengembalikan 404 apabila cuba memuatkan css/js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!