2

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
DKMudrechenko
  • 725
  • 11
  • 23
  • 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 Nov 11 '17 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 Nov 11 '17 at 22:36

3 Answers3

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.

Stefano
  • 4,730
  • 1
  • 20
  • 28
  • 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. – DKMudrechenko Nov 11 '17 at 22:45
  • 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. – Stefano Nov 12 '17 at 07:34
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

Yonah Dissen
  • 1,197
  • 1
  • 8
  • 16
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.

Fiber Optic
  • 184
  • 5