Nginx reverse proxy on nixOS returns 404 when trying to load css/js

php editor Baicao introduced that when using Nginx reverse proxy on nixOS, you sometimes encounter a problem: a 404 error is returned when trying to load css/js. This problem may cause the website's style and functionality to not display properly. In order to solve this problem, we need to check whether the Nginx configuration and file path are correct, and ensure that the proxy server can correctly access and load the required static resources. Through careful troubleshooting and debugging, we can solve this problem and ensure the normal operation of the website.

Question content

I have set up nixos to run nginx as a reverse proxy for docker containers. Running a golang server in a docker container that uses functions to handle / and returns files from two folders static and js . It runs on port 8181. The code is as follows:

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

        }
}

The structure of my application is as follows.

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

The configuration of the

nginx part in configuration.nix is as follows.

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

  };

When I address https://server/myapp, index.html will load, but style.css and htmx. min.js will return 404.

When the container is addressed using port 8181 instead of the url (http://server:8181), everything will load as usual.

I want nginx to redirect requests to load css and js to the container.

edit: The exact error is: get https://server.name/static/style.css net::err_aborted 404 even though I'm accessing https://server.name/myapp.

Another important information is that I want to run multiple containers this way through the same reverse proxy. Therefore, directing als css- or js-files to the same location will not work.

Solution

Please check the css/js reference in the index.html file. You'll most likely reference them via absolute paths, like this:

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

A quick fix is ​​to replace them with relative paths:

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

This method is error-prone. A better approach is to modify the application to serve the content at /myapp:

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

And modify the reference path in the index.html file:

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

Then modify the nginx configuration:

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

With this approach, the web application will always be served on uri /myapp/ regardless of whether a reverse proxy is used, which should make it easy to maintain.

The above is the detailed content of Nginx reverse proxy on nixOS returns 404 when trying to load css/js. For more information, please follow other related articles on the PHP Chinese website!