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

Issue

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)

Solution

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

Do this

1. Build the application as static site
2. Copy that to NgInx location /usr/share/nginx/html
3. 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;
}

Answered By - Pavan Jadda

Answer Checked By - Pedro (PHPFixing Volunteer)