Docker-compose and nginx proxy

Question

I am trying to use jwilder/nginx-proxy as a reverse proxy for my angular2 app that is broken down into 3 containers (angular, express and database).

I have tried different configurations to proxy requests to my app on port 80, however when I try to run docker-compose I get :

ERROR: for angular  Cannot start service angular: driver failed programming 
external connectivity on endpoint example_angular_1
(335ce6d0c775b7837eb436fff97bbb56bfdcaece22d51049e1eb4bf5ce45553c): Bind for 
0.0.0.0:80 failed: port is already allocated

While the message is pretty clear that there is a conflict on port 80, I cannot figure out a way to go around it, it works just fine when I set my angular container to work on port 4200 but then I have to specify the port number in url every time I want to visit the page. I am using the reverse proxy because it is not the only app that will be running in my environment

Below is my docker-compose.yml

version: '3'

services:
    nginx-proxy:
        image: jwilder/nginx-proxy
        container_name: nginx-proxy
        ports: - "80:80"
        volumes: - /var/run/docker.sock:/tmp/docker.sock:ro

    angular:
        build: client
        ports: - "80"
        environment:
            - VIRTUAL_HOST=example.com
            - VIRTUAL_PORT=80
        restart: always

     express:
         build: server
         ports: - "3000:3000"
         links: - database
         restart: always

     database:
         image: mongo
         ports: - "27017:27017"
         restart: always

networks:
  default:
   external:
     name: nginx-proxy

And Dockerfile for the angular container

FROM node:8-alpine as builder

COPY package.json package-lock.json ./

RUN npm set progress=false && npm config set depth 0 && npm cache clean --force

RUN npm i && mkdir /ng-app && cp -R ./node_modules ./ng-app

WORKDIR /ng-app

COPY . .

RUN $(npm bin)/ng build --prod --build-optimizer

FROM nginx:1.13.3-alpine

COPY nginx/default.conf /etc/nginx/conf.d/

RUN rm -rf /usr/share/nginx/html/*

COPY --from=builder /ng-app/dist /usr/share/nginx/html

CMD ["nginx", "-g", "daemon off;"]

EXPOSE 80

Why do you use 2 nginx? You can achieve all you need by simply putting the the proxy pass rules for express inside the angular nginx. — Stefano
– Stefano, Commented Nov 11, 2017 at 22:12
1 is a reverse proxy, the second one is to host the angular2 app itself. express container is angular's backend and I wanted to keep everything as modular as possible so components could be reused on its own. I don't want the angular container to be aware of other apps, if that makes sense. — DKMudrechenko
– DKMudrechenko, Commented Nov 11, 2017 at 22:36

Stefano · Accepted Answer · 2017-11-11 22:08:04Z

1

The problems is that you're trying to open the port 80 on the host twice. Once for the nginx-proxy and once for angular. Remove the "ports 80" from angular.

answered Nov 11, 2017 at 22:08

Stefano

5,1161 gold badge23 silver badges31 bronze badges

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

2 Comments

DKMudrechenko Over a year ago

I have tried deleting the ports: - "80" section of angular config before. the docker-compose starts without errors, however I don't get the green colored done next to the message about starting the angular container and nothing seems to be listening on port 80 when I test.

Stefano Over a year ago

This because you're having the proxy pass on localhost. Try to have the proxy pass set on angular:80 or use a different port for the angular container.

Yonah Dissen · Accepted Answer · 2017-11-14 06:50:41Z

1

The browser will speak to the container on the virtual_port that you set. Maybe you can direct the the request to the backend through an api endpoint

answered Nov 14, 2017 at 6:50

Yonah Dissen

1,3231 gold badge10 silver badges18 bronze badges

Comments

Fiber Optic · Accepted Answer · 2017-11-11 23:50:59Z

0

If you want to use nginx as a reverse proxy, you need to access to it using the 80 port. Then modify the nginx config to redirect to your angular container and port (81 for example). Try this: "proxy_pass http://angular:81". This should work.

answered Nov 11, 2017 at 23:50

Fiber Optic

1945 bronze badges

Collectives™ on Stack Overflow

Docker-compose and nginx proxy

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related