1

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/“
ragnarswanson
  • 315
  • 3
  • 10
Ronin
  • 7,322
  • 6
  • 36
  • 54
  • 1
    [This answer](http://stackoverflow.com/questions/43057099/why-does-angular2-webpack-starter-work-with-localhost3000-but-not-with/43065258#43065258) may help. – Richard Smith Apr 12 '17 at 08:35
  • @RichardSmith I'm already using path-relative variables, e.g. `src="inline.21b67490345418068f8f.bundle.js"`. Also, it's not a single-purpose server, since I want to route to several APIs and SPAs from my nginx reverse proxy. So that means, there is really no solution for my scenario?! – Ronin Apr 12 '17 at 09:53
  • The logs disagree. That log entry does not appear to be path-relative. – Richard Smith Apr 12 '17 at 10:06
  • @RichardSmith maybe I misunderstood your answer. I just checked that in the root html `index.html` the loaded scripts/css files don't point on absolute paths: ` – Ronin Apr 12 '17 at 10:11
  • Are you using `/assessment` or `/assessment/` to access the main page? The path-relative URIs do not work unless there is a path to be relative to. – Richard Smith Apr 12 '17 at 10:16
  • I use `/assessment/`: you can even test it on http://35.187.54.121/assessment/ – Ronin Apr 12 '17 at 10:18

1 Answers1

0

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
  • 7,322
  • 6
  • 36
  • 54