Can't access Docker container containing Vue JS front-end app

Question

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.

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:

• localhost/ should send requests to the front-end container
• localhost/api/email should send requests to the back-end container (These requests would obviously come from the front-end)
• At a later stage, we'd like to add more websites and api's to be served by the reverse proxy

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.

The error reads:

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"

I'm very desperate and eager to learn at this stage. Please see the attached files and configuration for more information.

Reverse proxy Dockerfile:

FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf

Back-end Dockerfile:

FROM node:7
WORKDIR /email-api
COPY package.json /e-mail-api
RUN npm install
COPY . .
CMD node server.js
EXPOSE 8082

Front-end Dockerfile:

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

nginx.conf:

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;
        }
    }
}

docker-compose.yml

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

Any help, recommendations or input would be greatly appreciated.

Answer 1

If you are hitting the container IP from within other container so you should use port it actually listens to, so use 80 in your nginx.conf instead of 8080.

Published ports will work on interface\s docker interface bridges to.