CODEWITHSUNDEEP
dockernginxproxydocker-composejwilder-nginx-proxy
DKMudrechenko
DKMudrechenko

Reputation: 733

Docker-compose and nginx proxy

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

Upvotes: 2

Views: 5864

Answers (3)

Yonah Dissen
Yonah Dissen

Reputation: 1305

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

Upvotes: 1

Fiber Optic
Fiber Optic

Reputation: 194

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.

Upvotes: 0

Stefano
Stefano

Reputation: 5076

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.

Upvotes: 1

Related Questions