Angular universal with docker giving bad gateway

I am trying to dockerizing a angular universal app using nginx, and it's giving me really hard time.
It keeps saying 502 bad gateway and I am unable to wrap my head around it.

This is my Dockerfile

FROM node:14-alpine AS builder
WORKDIR /app
COPY . .
RUN npm i && npm run build:ssr
FROM nginx:alpine
WORKDIR /usr/share/nginx/html
RUN rm -rf ./*
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/dist/front-end-kevi .
ENTRYPOINT ["nginx", "-g", "daemon off;"]

In my server.ts file, I am starting the app on port 4000.
So I am starting the docker image using this command

> docker run -d -p 4000:80 kevin

for the reference, here is my nginx conf file.

server {
    listen       80;
    server_name  localhost;

    root   /usr/share/nginx/html;
    index  index.html index.htm;

    location ~* \.(eot|ttf|woff|woff2)$ {
        add_header Access-Control-Allow-Origin *;
    }

    location / {
        proxy_pass http://localhost:4000;
        try_files $uri $uri/ =404;
    }

    location /OrderMationApi/api/v3/ {
        proxy_pass http://102.133.225.222;
    }
}

and I am getting this error in error logs

> 7#7: *1 connect() failed (111: Connection refused) while connecting to upstream, client: 172.17.0.1, server: localhost, request: "GET / HTTP/1.1", upstream: "http://127.0.0.1:4000/", host: "localhost:4000"

Any idea where I am doing wrong?
Any help is highly appreciated.
Thanks in advance.

You say that you're starting your server on :4000, but I'm not seeing that in your Dockerfile. From the configuration you have posted in your question, it seems to me that you believe your container will run both Nginx and your application. But what will happen is only Nginx will run, and your app will not be started. That's why you are getting an error - Nginx is not able to find anything on http://localhost:4000 because nothing is listening there.

To address this, you have a couple of options. One is you could build another container, to run your application, and then point Nginx to that container. The best way to do that is to run both of them with docker compose, and point Nginx to http://<service-name>:4000, where <service_name> is the name of your other container.

Another possibility is to replace your entrypoint with a script that launches both of them. This is not a container best practice, but it's possible. In that case, you would write a script (e.g. /docker-entrypoint.sh) with contents such as:

#!/bin/sh

nginx &
npx ts-node server.ts

This would launch nginx into the background, and run your server in the foreground. Again, this is not a best practice, because now Nginx is not logging to stdout/stderr. So I suggest instead doing a multi-container setup with something like docker compose.

The problem is basically with the nginx configuration. This question is already asked here. https://serverfault.com/questions/317393/connect-failed-111-connection-refused-while-connecting-to-upstream