title: Angular App running on nginx and behind an additional nginx reverse proxy
body: <p>I'm currently trying to create a reverse proxy for two Angular apps.
  I want the apps to be both accessible through the 443 port of the docker host with SSL enabled (like <a href="https://192.168.x.x/app1" rel="noreferrer">https://192.168.x.x/app1</a> and <a href="https://192.168.x.x/app2" rel="noreferrer">https://192.168.x.x/app2</a>), so that the users don't have to type in the port numbers for each app.</p>
  
  <p>My setting is, that every part of the application runs within its own Docker container:
   - Container 1: Angular App 1 (Port 80 exposed to host on port 8080)
   - Container 2: Angular App 2 (Port 80 exposed to host on port Port 8081)
   - Container 3: Reverse Proxy (Port 443 exposed)</p>
  
  <p>Both Angular apps and the reverse proxy are running on nginx. The apps are build like that: <code>ng build --prod --base-href /app1/ --deploy-url /app1/</code></p>
  
  <p>The nginx setting of the apps is like that:</p>
  
  <pre><code>server {
    listen 80;
    sendfile on;
  
    default_type application/octet-stream;
  
    gzip on;
    gzip_http_version 1.1;
    gzip_disable      "MSIE [1-6]\.";
    gzip_min_length   256;
    gzip_vary         on;
    gzip_proxied      expired no-cache no-store private auth;
    gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_comp_level   9;
  
    root /usr/share/nginx/html;
  
    index index.html index.htm;
  
    location / {
      try_files $uri $uri/ /index.html =404;
    }
  }
  </code></pre>
  
  <p>The nginx configuration of the reverse proxy is like that:</p>
  
  <pre><code>server {
    listen 443;
    ssl on;
    ssl_certificate /etc/nginx/certs/domaincertificate.cer;
    ssl_certificate_key /etc/nginx/certs/domain.key;
  
    location /app1/ {
      proxy_pass http://192.168.x.x:8080;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
      proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto  $scheme;
      proxy_http_version 1.1;
      proxy_cache_bypass $http_upgrade;
  
    }
    location /app2/ {
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
      proxy_http_version 1.1;
      proxy_cache_bypass $http_upgrade;
       proxy_pass http://192.168.x.x:8081;
    }
  }
  </code></pre>
  
  <p>If I try to open the app on the url '<a href="https://192.168.x.x/app1" rel="noreferrer">https://192.168.x.x/app1</a>', the app is reached, but I get error messages for all static files 'Uncaught SyntaxError: Unexpected token &lt;': 
  <a href="https://i.stack.imgur.com/b3ay4.jpg" rel="noreferrer">Errormessages from chrome</a></p>
  
  <p>It seems, that instead of the static js and css files, the index.html of the app is returned. I believe that this is a problem of the nginx config of the apps themselves. </p>
  
  <p>I have spent quite a time trying to figure out how to solve that problem, but no luck yet. I hope that someone here can help me with that.</p>