title: Nginx reverse proxy + Angular served by Nginx
body: <p>I have an angular app, <code>my-app</code>, which I build locally with <code>ng build --prod</code> and serve with Nginx dockerized, the <code>Dockerfile</code> is: </p>
  
  <pre><code>FROM nginx:alpine
  COPY /dist/my-app /usr/share/nginx/html
  EXPOSE 80
  </code></pre>
  
  <p>As long as I launch a container based on an image build with this <code>Dockerfile</code>, it works.
  Though, I need to put another Nginx acting as a reverse proxy before this one, I want to redirect the traffic with a route like <code>/my-app</code> to the internal Nginx serving Angular, like so:</p>
  
  <pre><code>http://DOMAIN/my-app ---&gt; Reverse Proxy ---&gt; Nginx+Angular
  </code></pre>
  
  <p>I'll use Docker Compose for local dev. My <code>docker-compose.yml</code> is very simple:</p>
  
  <pre><code>version: '3'
  
  services:
      nginx:
          container_name: my-nginx
          build: ./nginx
          ports:
              - "80:80"
      my-app:
          container_name: my-app
          build: ./my-app
  </code></pre>
  
  <p>For the Angular app, I redefine <code>"baseHref": "./my-app/"</code> in my <code>angular.json</code> file, I build again and I configure the reverse proxy as follows:</p>
  
  <pre><code>events {}
  
  http {
  
    server {
      listen 80 default_server;
      listen [::]:80 default_server;
  
      root                /var/www;
      index               index.html;
  
      location / {
          index           index.html;
      }
  
      location /my-app {
        rewrite                     /my-app/(.*) /$1 break;
        proxy_pass                  http://my-app:80;
        proxy_set_header Host       $host;
        proxy_set_header Upgrade    $http_upgrade;
        proxy_set_header Connection $http_connection;
        proxy_set_header Host       $host;
      }
    }
  }
  </code></pre>
  
  <p>Here, the <code>index.html</code> in the <code>location /</code> directive is a custom one, not the Angular app's one. Thus, I expect my reverse proxy to serve the <code>index.html</code> when visiting the route <code>/</code>, which it does, but I get a <strong>400 Bad Request</strong> error when I try to visit <code>/my-app/</code>. 
  Does someone have a solution for this? What am I getting wrong? Thanks!</p>