CODEWITHSUNDEEP
dockernginx
AlwaysALearner
AlwaysALearner

Reputation: 355

Using Docker Nginx Reverse Proxy for Docker containers applications

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.

Upvotes: 1

Views: 2055

Answers (1)

vivekyad4v
vivekyad4v

Reputation: 14903

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 -

  1. Change nginx config to point it to angular application - 

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

  2. 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

  3. 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

Upvotes: 2

Related Questions