How to run (multiple) dockerized angular apps with nginx inside and nginx as reverse proxy?

Question

i have the following problem: i build an angular app with nginx in docker... like this:

FROM node:slim as build
WORKDIR /usr/local/app
COPY ./ /usr/local/app/
RUN npm install
RUN npm run build

FROM nginx:latest
COPY --from=build /usr/local/app/dist/myapp /usr/share/nginx/html
EXPOSE 4200

when i now build and run the dockerfile local... no problem i could enter "localhost:4200" end reach my app. After that works, i setup github actions and copy my code vis ssh to my vps server. On this server i have an nginx, which works as reverse proxy. The nginx config for my angular app looks like that:


server {
    listen 80;
    return 301 https://$host$request_uri;
}

server {

    listen 443;
    server_name mydomain.com;

    ssl_certificate         /etc/ssl/certs/mydomain.com/cert.pem;
    ssl_certificate_key     /etc/ssl/certs/mydomain.com/key.pem;

    ssl on;

    access_log            /var/log/nginx/access.log;

    location / {
      proxy_pass          http://0.0.0.0:4200;
    }
  }

i create the ssl certificate via cloudflare, and set the tls to strict mode. Now i thought when i entered mydomain.com -> it goes to my ubuntu server with the installed nginx, checks the certificate and after that it redirects to the docker container, but nothing happens when i try to reach my site, there come a 502 Bad Gateway....

I also tried this nginx config (without cloudflare and ssl) but i also got an 502

server {
    listen 80 http2; 
    server_name mydomain.com;
    location / {
        proxy_set_header Host $host;
        proxy_pass http://localhost:4200;
    }
}

Could you maybe help me? I currently not understand why that won´t work.

(i exposed port 4200, and run the angular app like this: docker run -p 4200:4200 myapp when i enter netstat -tulpn it always says that docker is running under port 4200... but when i make curl on my linux it says: (56) Recv failure: Connection reset by peer)

Pavan Jadda · Accepted Answer · 2021-08-14 16:46:01Z

1

You have to deploy the application as static site. You should not use ng serve on production with 4200 port.

Do this

Build the application as static site
Copy that to NgInx location /usr/share/nginx/html
Update NgInx to serve from /usr/share/nginx/html

Here is the updated NgInx file

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events 
{
     worker_connections 768;
     # multi_accept on;
}

http 
{
    upstream springboot
    {
        server localhost:8080  max_conns=10;
    }

    server
    {
        listen 80;
        listen [::]:80;
        server_name     <server ip>;

        location /
        {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Port $server_port;
        }

    }

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##

        gzip on;
}

edited Aug 14, 2021 at 16:46

answered Aug 14, 2021 at 16:22

Pavan Jadda

4,97112 gold badges52 silver badges92 bronze badges

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

1 Comment

weisser.dev Over a year ago

Hello, i deploy it as static site, as you see in the config. But this part with try_files were not in my nginx config. Thx for this :)

Collectives™ on Stack Overflow

How to run (multiple) dockerized angular apps with nginx inside and nginx as reverse proxy?

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