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

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.