title: Can't access Docker container containing Vue JS front-end app
body: <p>I'm really hoping that someone can help me as I've been stuck with this issue for over a week. I'm a Docker and Nginx beginner and just can't seem to get my configuration right. </p>
  
  <p>Basically I have 3 Docker containers running - Nginx reverse proxy, Node JS back-end and Vue JS front-end. I have the following vision for the 3-container-system: </p>
  
  <ul>
  <li>localhost/ should send requests to the front-end container</li>
  <li>localhost/api/email should send requests to the back-end container (These requests would obviously come from the front-end)</li>
  <li>At a later stage, we'd like to add more websites and api's to be served by the reverse proxy</li>
  </ul>
  
  <p>At the moment when I use Postman to send a request to the back-end via localhost/api/email/send, it works 100% and the e-mail is sent as expected but I'm unable to reach my front-end in a browser via localhost. </p>
  
  <p>The error reads: </p>
  
  <pre><code>reverse-proxy         | 2018/07/12 14:35:55 [error] 5#5: *4 connect() failed (111: Connection refused) while connecting to upstream, client: 172.18.0.1, server: localhost,
  request: "GET / HTTP/1.1", upstream: "http://172.18.0.2:8080/", host: "localhost"
  reverse-proxy         | 172.18.0.1 - - [12/Jul/2018:14:35:55 +0000] "GET / HTTP/1.1" 502 575 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like
  Gecko) Chrome/67.0.3396.99 Safari/537.36"
  </code></pre>
  
  <p>I'm very desperate and eager to learn at this stage. Please see the attached files and configuration for more information. </p>
  
  <p><strong>Reverse proxy Dockerfile:</strong></p>
  
  <pre><code>FROM nginx:alpine
  COPY nginx.conf /etc/nginx/nginx.conf
  </code></pre>
  
  <p><strong>Back-end Dockerfile:</strong></p>
  
  <pre><code>FROM node:7
  WORKDIR /email-api
  COPY package.json /e-mail-api
  RUN npm install
  COPY . .
  CMD node server.js
  EXPOSE 8082
  </code></pre>
  
  <p><strong>Front-end Dockerfile:</strong></p>
  
  <pre><code>FROM alpine:3.7
  RUN apk add --update nodejs
  RUN mkdir -p /var/www/html
  WORKDIR /those-devs-website
  COPY . .
  RUN npm install
  RUN npm run build
  RUN cp -r dist/* /var/www/html
  EXPOSE 8080
  </code></pre>
  
  <p><strong>nginx.conf:</strong></p>
  
  <pre><code>worker_processes 1;
  
  events { worker_connections 1024; }
  
  http {
  
      sendfile on;
  
      upstream email-api {
          server email-api:8082;
      }
  
      upstream those-devs-website {
          server those-devs-website:8080;
      }
  
      proxy_set_header   Host $host;
      proxy_set_header   X-Real-IP $remote_addr;
      proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header   X-Forwarded-Host $server_name;
  
      server {
          listen 80;
          server_name localhost;
  
          location / {
              proxy_pass         http://those-devs-website;
          }
  
          location /api/email/ {
              proxy_pass         http://email-api;
          }
      }
  }
  </code></pre>
  
  <p><strong>docker-compose.yml</strong></p>
  
  <pre><code>version: '3'
  services:
  
    email-api:
      container_name: email-api
      ports:
        - '8082:80'
      image: email-api
  
    those-devs-website:
      container_name: those-devs-website
      ports:
        - '8080:80'
      image: those-devs-website
  
    reverse-proxy: 
      container_name: reverse-proxy
      image: reverse-proxy
      ports:
        - '80:80'
      restart: always
  </code></pre>
  
  <p>Any help, recommendations or input would be greatly appreciated.</p>