Yo
I’ve been trying to host an Angular app on NGINX with Docker but when I build the container and go to localhost:8080 I get an 502 Bad Gateway error.

This is my Dockerfile:

FROM node:latest as build

WORKDIR /usr/local/app

COPY package.json .

RUN npm install

COPY . .

CMD ["npm", "start"]

This is my docker-compose.yml:

version: "3.9"

services:
  app:
    container_name: app
    build:
      context: .

  nginx:
    container_name: nginx
    image: nginx
    ports:
      - "80:80"
    depends_on:
      - app
    volumes:
      - ./default.conf:/etc/nginx/conf.d/default.conf

This is my default.conf file:

server {
    listen 80;
    server_name app;
    location / {
        proxy_pass http://app:4200;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

This is the line I’m using to build the image:

docker build -t front .

This is the line I’m using to run the image:

docker run -d -p 8080:80 front

I don’t know what to do, I’m going crazy.

I need help with this