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.

The frontend is just static files, right? If yes - just copy compiled frontend files into nginx container (or, better, attach volume with those files) and change nginx configuration to serve static files. — RidgeA
– RidgeA, Commented Jul 12, 2018 at 14:43
Thanks, @RidgeA, I have explored that option but it didn't seem to apply any styling to the site. Also, would it make sense to do it like that even if we'd want to deploy and serve more website later on? — zelmigreyling
– zelmigreyling, Commented Jul 12, 2018 at 14:52

Dusan Gligoric · Accepted Answer · 2018-07-12 15:09:15Z

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.

answered Jul 12, 2018 at 15:09

Dusan Gligoric

5845 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

zelmigreyling Over a year ago

Thanks, @Dusan Gligoric, I tried your suggestion and changed the 8080 to 80 in the nginx.conf but the 502 - Bad Gateway error persists.

Dusan Gligoric Over a year ago

go inside your those-devs-website, do curl -I 127.0.0.1 and netstat -tlpn | grep :80 @zelmigreyling Also if your project does not contain sensitive info you can compress it and share it so we can actually run that docker-compose and check it out.

zelmigreyling Over a year ago

I really appreciate your input, here is the results from the commands:

/those-devs-website # curl -I 127.0.0.1 /bin/sh: curl: not found /those-devs-website # netstat -tlpn | grep :80 tcp        0      0 127.0.0.1:8080          0.0.0.0:*               LISTEN      44/node

Dusan Gligoric Over a year ago

ok so hm, it loooks like you are only listening on your localhost interface judging by 127.0.0.1:8080 so external requests wont be able to make it, so you would need to change your Dockerfile CMD/ENTRYPOINT or docker-compose command argument neither of which I see btw so please add a comment about how is server starting on your these-devs-website container, and it looks like you are listening on 8080 after all huh, seams that you got your docker-compose port's published other way around since its HOST PORT:CONTAINER PORT, thats other minor issue @zelmigreyling

zelmigreyling Over a year ago

I changed my those-devs-website Dockerfile to include CMD ["npm", "start"] instead of running the build and just getting a folder with static files.

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related