title: Nginx reverse-proxy not serving static files
body: <p>I tried to start some services via docker-compose. One of them is a <strong>nginx reverse-proxy</strong>, handling different paths. One path ("/react") is to a <strong>containerized react_app with a nginx</strong> on port 80. Solely, the reverse-proxy is working correctly. Also, if I server the nginx of the react_app on port 80, all work's fine. Combining both <strong>without changing</strong> anything in the config leads to 404 for static files like css and js.</p>
  
  <p><strong>Setup #1</strong><br>
  Correct forward for path /test to Google.</p>
  
  <p><em>docker-compose.yml</em></p>
  
  <pre><code>version: "3"
  
  services:
    #react_app:
    #  container_name: react_app
    #  image: react_image
    #  build: .
    reverse-proxy:
      image: nginx:latest
      container_name: reverse-proxy
      volumes:
        - ./nginx.conf:/etc/nginx/nginx.conf
      ports:
        - '80:80'
  </code></pre>
  
  <p><em>nginx.conf</em> (reverse-proxy)</p>
  
  <pre><code>location /test {
      proxy_pass http://www.google.com/;
  }
  </code></pre>
  
  <p><strong>Setup #2</strong><br>
  No reverse proxy. Correct answer from nginx inside of container react_app.</p>
  
  <p><em>docker-compose.yml</em></p>
  
  <pre><code>version: "3"
  
  services:
    react_app:
      container_name: react_app
      image: react_image
      build: .
    #reverse-proxy:
    #  image: nginx:latest
    #  container_name: reverse-proxy
    #  volumes:
    #   - ./nginx.conf:/etc/nginx/nginx.conf
    #  ports:
    #    - '80:80'
  </code></pre>
  
  <p><strong>Setup #3 (not working!)</strong><br>
  Reverse proxy and React App with nginx. Loads index.html, but fails so load files in /static</p>
  
  <p><em>nginx.conf</em> (reverse-proxy)</p>
  
  <pre><code>location /react {
      proxy_pass http://react_app/;
  }
  </code></pre>
  
  <p><em>docker-compose.yml</em></p>
  
  <pre><code>version: "3"
  
  services:
    react_app:
      container_name: react_app
      image: react_image
      build: .
    reverse-proxy:
      image: nginx:latest
      container_name: reverse-proxy
      volumes:
        - ./nginx.conf:/etc/nginx/nginx.conf
      ports:
        - '80:80'
  </code></pre>
  
  <p>Activating both systems leads to failing static content. It seems to me that the reverse-proxy tries to server the files, but fails (for good reason), because there is no log entry in reac_app's nginx. Here's the config from the reac_app nginx, perhaps I'm missing something out.</p>
  
  <p><em>nginx.conf</em> (inside react_app container)</p>
  
  <pre><code>events {}
  http {
      include       /etc/nginx/mime.types;
      default_type  application/octet-stream;
  
      access_log  /var/log/nginx/access.log  main;
  
      sendfile        on;
      keepalive_timeout  65;
      server {
          listen       80;
          server_name  localhost;
  
          root   /usr/share/nginx/html;
          location / {
              try_files $uri /index.html;
          }
      }
  }
  </code></pre>
  
  <p><strong>--> Update</strong></p>
  
  <p>This is a rather unsatisfying workaround - but it works. Although now reacts routing is messed up. <strong>I cannot reach /react/login</strong></p>
  
  <pre><code>http {
      server {
          server_name services;
  
          location /react {
              proxy_pass http://react_app/;
          }
  
          location /static/css {
              proxy_pass http://react_app/static/css;
              add_header  Content-Type    text/css;
  
          }
          location /static/js {
              proxy_pass http://react_app/statics/js;
              add_header  Content-Type    application/x-javascript;
          }
      }
  }
  </code></pre>