title: Proxying react app using nginx on docker-compose
body: <p>I am trying to use docker-compose to run 2 containers - a sample react app and an nginx to behave as reverse-proxy.<br>
  I've ran <code>npx create-react-app react-app</code> to create the first container, and added the following Dockerfile to the folder - </p>
  
  <pre><code>FROM node
  RUN yarn global add serve
  WORKDIR /usr/src/app
  COPY package.json yarn.lock ./
  RUN yarn
  COPY . ./
  RUN yarn build
  CMD serve -s build
  </code></pre>
  
  <p>I've then proceeded to create the following nginx configuration file under <code>./nginx</code> - </p>
  
  <pre><code>server {
      listen       80;
      server_name  localhost;
      location / {
          root   /usr/share/nginx/html;
          index  index.html index.htm;
      }
      location /react {
          proxy_pass http://react:5000;
      }
  }
  </code></pre>
  
  <p>Finally, I've created this <code>docker-compose.yaml</code> file in the root of the project - </p>
  
  <pre><code>version: '3'
  services:
    nginx: 
      image: nginx:latest
      container_name: production_nginx
      volumes:
        - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
      ports:
        - 80:80
        - 443:443
  
    react:
      build: ./react-app
      container_name: react-app
      expose:
        - "5000"
      ports:
        - 5000:5000
  </code></pre>
  
  <p>I then use <code>docker-compose up --build</code> to launch my stack, but when I use the <code>http://localhost/react</code> path I get the following errors in my nginx access logs - </p>
  
  <pre><code>eact-app | INFO: Accepting connections at http://localhost:5000
  production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:29 +0000] "GET /react HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
  production_nginx | 2020/01/29 18:24:29 [error] 7#7: *1 open() "/usr/share/nginx/html/static/css/main.d1b05096.chunk.css" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /static/css/main.d1b05096.chunk.css HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
  production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:29 +0000] "GET /static/css/main.d1b05096.chunk.css HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
  production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:29 +0000] "GET /static/js/2.250dc4af.chunk.js HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
  production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:29 +0000] "GET /static/js/main.de4c6317.chunk.js HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
  production_nginx | 2020/01/29 18:24:29 [error] 7#7: *4 open() "/usr/share/nginx/html/static/js/2.250dc4af.chunk.js" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /static/js/2.250dc4af.chunk.js HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
  production_nginx | 2020/01/29 18:24:29 [error] 7#7: *3 open() "/usr/share/nginx/html/static/js/main.de4c6317.chunk.js" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /static/js/main.de4c6317.chunk.js HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
  production_nginx | 2020/01/29 18:24:29 [error] 7#7: *5 open() "/usr/share/nginx/html/manifest.json" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /manifest.json HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
  production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:29 +0000] "GET /manifest.json HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
  production_nginx | 2020/01/29 18:24:34 [error] 7#7: *3 open() "/usr/share/nginx/html/static/js/2.250dc4af.chunk.js" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /static/js/2.250dc4af.chunk.js HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
  production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:34 +0000] "GET /static/js/2.250dc4af.chunk.js HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
  production_nginx | 172.18.0.1 - - [29/Jan/2020:18:24:34 +0000] "GET /static/js/main.de4c6317.chunk.js HTTP/1.1" 404 555 "http://localhost/react" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36" "-"
  production_nginx | 2020/01/29 18:24:34 [error] 7#7: *4 open() "/usr/share/nginx/html/static/js/main.de4c6317.chunk.js" failed (2: No such file or directory), client: 172.18.0.1, server: localhost, request: "GET /static/js/main.de4c6317.chunk.js HTTP/1.1", host: "localhost", referrer: "http://localhost/react"
  </code></pre>
  
  <p>It seems to me like nginx is looking for Reacts static assets in the nginx container, but I'm not sure why doesn't it proxy these requests over to the react container. Any idea how to solve this?</p>