HTTP request for resources (js, css) return a 404 error

4/12/2017

context

I deployed an angular 2 app on my kubernetes cluster on GCE. I can access it using a load balancer service through the public IP exposed without any issues. However, I intended to access it on the path /assessment and therefore set up an nginx reverse proxy with the following contents.

config

$ cat nginx/frontend.conf 
server {
    listen 443;
    ssl    on;
    ssl_certificate     /etc/tls/cert.pem;
    ssl_certificate_key /etc/tls/key.pem;
    location /assessment/ {
        proxy_pass http://participation-frontend.default.svc.cluster.local/;
    }

    // etc.
}

symptoms

While the html is rendered, resources (css, js) wouldn’t be found and a 404 would be returned instead. Any idea why this happens? I also noticed, that if I set the location to / instead, everything works perfectly.

logs

As you can see in the log excerpt bellow, the request for a file would be performed directly on root. In this case: /inline.508911a34e3d7fcf458e.bundle.js instead of /assessment/GET /inline.508911a34e3d7fcf458e.bundle.js

“/etc/nginx/html/inline.508911a34e3d7fcf458e.bundle.js” failed (2: No such file or directory), client: 10.132.0.4, server: , request: “GET /inline.508911a34e3d7fcf458e.bundle.js HTTP/1.1", host: “<nginx-public-IP>”, referrer: “https://<nginx-public-IP>/assessment/“
-- Ronin
angular
kubernetes
nginx

1 Answer

4/13/2017

The html5 base url has to match the location defined in nginx.

  • nginx location: location /assessment/
  • base url in index.html of the angular2 app: <base href="/assessment/">
-- Ronin
Source: StackOverflow