Why does my angular app hosted on nginx doesn't work?

Question

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 ./ /usr/local/app/
RUN npm install
RUN npm install -g @angular/cli
CMD ["npm", "start"]
FROM nginx:latest
RUN rm /usr/share/nginx/html/*
COPY --from=build /usr/local/app/dist/prueba /usr/share/nginx/html
RUN rm etc/nginx/conf.d/default.conf
COPY default.conf /etc/nginx/conf.d/
EXPOSE 80

This is my default.conf file:

server {
    listen 80;
    server_name app;
    location / {
        proxy_pass http://localhost: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.

datawookie · Accepted Answer · 2024-04-29 05:34:18Z

1

It looks like you want to run both an Angular server and NGINX. Ideally there should just be one process per container.

So I'd suggest using Docker Compose for this.

Create a 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

That has two services:

your Angular app and
NGINX.

Update your default.conf:

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;
    }
}

Notice that the proxy_pass line refers to port 4200 running on the app service.

Finally update your Dockerfile to:

FROM node:latest as build

WORKDIR /usr/local/app

COPY package.json .

RUN npm install

COPY . .

CMD ["npm", "start"]

To run:

docker-compose up --build

Check the compose logs. There should be something like this from the app.

app      | Watch mode enabled. Watching for file changes...                                                         
app      |   ➜  Local:   http://localhost:4200/                                                                     
app      |   ➜  Network: http://192.168.224.2:4200/

It's important that you see both the Local and Network lines here. If not then check that your NPM start command allows connections from outside localhost, for example, ng serve --host 0.0.0.0.

edited Apr 29, 2024 at 5:34

answered Apr 27, 2024 at 5:53

datawookie

6,8022 gold badges22 silver badges33 bronze badges

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

3 Comments

user24718521 Over a year ago

Hi, datawookie! Thanks for your answer! I've tried what you suggested but im still getting the same error. In my terminal when running the docker-compose I get this error: ` 2024/04/28 03:52:51 [error] 30#30: *2 connect() failed (111: Connection refused) while connecting to upstream, client: 172.20.0.1, server: app, request: "GET / HTTP/1.1", upstream: "172.20.0.2:4200", host: "localhost"`

datawookie Over a year ago

Aha. Okay, how is your start script specified in package.json? It should be something like ng serve --host 0.0.0.0. This is important to ensure that the app accepts requests from outside the container (otherwise it only responds to requests originating within the same container, so not able to see requests from NGINX).

datawookie Over a year ago

See updates at the end of my answer.

Collectives™ on Stack Overflow

Why does my angular app hosted on nginx doesn't work?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related