Question posted in
The official documentation can be found here.

Docker – Why does my angular app hosted on nginx throw me an error 502 bad gateway error, but build in the terminal

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

And also use:

docker compose up -d

And i have this error

2024/04/28 14:47:13 [error] 32#32: *7 connect() failed (111: Connection refused) while connecting to upstream, client: 172.18.0.1, server: app, request: "GET /favicon.ico HTTP/1.1", upstream: "172.18.0.2:4200/favicon.ico", host: "localhost", referrer: "localhost"
this is the error
I need help with this error

Tags:

2

Answers


  1. 0

    In your default file, aren’t the directives missing?

       proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_set_header   X-Forwarded-Proto $scheme;
    Login or Signup to reply.
  2. 0

    I’m not entirely familiar with Angular, but in interactions with Nginx, this code snippet is necessary in Program.cs to configure header forwarding to work with a reverse proxy like Nginx:

    // Forwarded Headers configuration to work with reverse proxy like Nginx
app.UseForwardedHeaders(new ForwardedHeadersOptions
{
    ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search