Using Docker Nginx Reverse Proxy for Docker containers applications

Question

I am having difficulty on port forwarding using Nginx reverse proxy (docker container) to an angularjs docker containers. Here is my Dockerfile and Nginx configuration with the commands I am using.

Dockerfile:

FROM nginx:latest
COPY nginx-reverseproxy.conf /etc/nginx/conf.d/
RUN mkdir /etc/nginx/ssl
COPY chained.crt /etc/nginx/ssl
COPY private.key /etc/nginx/ssl
RUN chown -R root:root /etc/nginx/ssl
RUN chmod -R 644 /etc/nginx/ssl
EXPOSE 80
EXPOSE 443

Nginx Configuration:

server {
    listen         80;
    listen         443 ssl;
    server_name mywebserver.com;

    if ($scheme = http) {
    return 301 https://$server_name$request_uri;
    }

ssl on;
ssl_certificate    /etc/nginx/ssl/chained.crt
ssl_certificate_key /etc/nginx/ssl/private.key

location / {
      proxy_set_header                Host                    $host:$server_port;
            proxy_set_header                X-Real-IP               $remote_addr;
            proxy_set_header                X-Forwarded-For         $proxy_add_x_forwarded_for;
            proxy_set_header                X-Forwarded-Proto       $scheme;


             proxy_pass                      http://127.0.0.1:4200;
             proxy_read_timeout              180;

             proxy_redirect     off;
             proxy_redirect                  http://127.0.0.1:4200  $scheme://mywebserver.com;


              proxy_http_version              1.1;
              proxy_request_buffering         off;
 }
}

Command to create Nginx container:

docker run -d -p 80:80 -p 443:443 --name "container-nginx" nginx-reverse-proxy-image:latest

Command to create myserver.com container:

docker run -d -p 4200:4200 --name "container-mywebserver" angularjs-image:latest ng serve --host 0.0.0.0 --disable-host-header

I am getting "502 Bad Gateway" error message when I browse. But, when I curl localhost:4200, I could see the content. Any help would be appreciated.

Your application server is not in the same container as the nginx server so 127.0.0.1 or 0.0.0.0 will not work. You should set up a docker-compose with depends on or setup a docker network they are both on — Shawn C.
– Shawn C., Commented Jan 19, 2018 at 22:02
HI @ShawnC. Thank you so much for your quick response. I was just wondering how I can make use of angularjs and other java jar images that are already built using CI server using docker maven plugin. I am confused about how to spin up containers out of the images using docker compose and make everything work together. Thanks again. — AlwaysALearner
– AlwaysALearner, Commented Jan 19, 2018 at 23:44
Look at examples on the site docs.docker.com/compose/django/#create-a-django-project — Tarun Lalwani
– Tarun Lalwani, Commented Jan 20, 2018 at 3:33

vivekyad4v · Accepted Answer · 2018-01-20 13:26:59Z

2

Both nginx & your angular application servers are different containers, hence calling angular app container from nginx container by using 127.0.0.1 will not work. You are missing to link both of them, use the link & then do the proxy pass in nginx. Below is what you can do to solve this -

Change nginx config to point it to angular application -

     proxy_pass                      http://angular:4200;
     proxy_redirect                  http://angular:4200  $scheme://mywebserver.com;

Create angular app container -

$ docker run -d -p 4200:4200 --name "angular" angularjs-image:latest ng serve --host 0.0.0.0 --disable-host-header
Link angular app to nginx container so that nginx container can resolve angular to the app container IP -

$ docker run -d -p 80:80 -p 443:443 --link angular:angular --name "container-nginx" nginx-reverse-proxy-image:latest

answered Jan 20, 2018 at 13:26

vivekyad4v

15.1k7 gold badges64 silver badges71 bronze badges

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

1 Comment

AlwaysALearner Over a year ago

Hi @vivekad4v, you saved my life. Your idea worked as a charm. You have no idea how much I appreciate your help. May god bless you. Thank you so much for your time and help. I wish I could give you more than 5 points instead of only 1.

Collectives™ on Stack Overflow

Using Docker Nginx Reverse Proxy for Docker containers applications

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related