Building angular image with dockerfile

Question

I'm creating example app.

My first question is do I need to use nginx(for building docker image) since my reverse proxy on docker will be traefik?

Image built with nginx have only 23 mb but without 170mb.

Example dockerfile with nginx:

### STAGE 1: Build ###
FROM node:17.6-alpine AS builder

WORKDIR /usr/src/app

COPY package.json package-lock.json ./

RUN npm cache clean --force

RUN npm install

COPY . .

RUN npm run build --prod

FROM nginx:1.21.6-alpine

COPY --from=builder /usr/src/app/dist/content-admin-frontend /usr/share/nginx/html

COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

nginx.conf file(minimal im using traefik on docker):

events {}
http {  
 server {  
    listen 80; 
  }
}

but after start a container and go on localhost:4200 (mapping port to 4200 in docker) I'm getting:

/docker-entrypoint.sh: Configuration complete; ready for start up

172.17.0.1 - - [08/Mar/2022:02:32:45 +0000] "GET / HTTP/1.1" 404 153 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:97.0) Gecko/20100101 Firefox/97.0"

2022/03/08 02:32:45 [error] 32#32: *1 "/etc/nginx/html/index.html" is not found (2: No such file or directory), client: 172.17.0.1, server: , request: "GET / HTTP/1.1", host: "localhost:4200"

172.17.0.1 - - [08/Mar/2022:02:32:45 +0000] "GET /favicon.ico HTTP/1.1" 404 153 "http://localhost:4200/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:97.0) Gecko/20100101 Firefox/97.0"

2022/03/08 02:32:45 [error] 32#32: *1 open() "/etc/nginx/html/favicon.ico" failed (2: No such file or directory), client: 172.17.0.1, server: , request: "GET /favicon.ico HTTP/1.1", host: "localhost:4200", referrer: "http://localhost:4200/"

I think problem is here "/etc/nginx/html/index.html" is not found. Someone know why it's happened?

Answer 1

In your Dockerfile, you copy your Angular App to /usr/share/nginx/html. But Nginx tries to load everything from /etc/nginx/html.

So you can either change

COPY --from=builder /usr/src/app/dist/content-admin-frontend /usr/share/nginx/html

to

COPY --from=builder /usr/src/app/dist/content-admin-frontend /etc/nginx/html

or modify your nginx.conf to

events {}
http {  
 server {  
    listen 80;
    location / {
        root /usr/share/nginx/html;
        index index.html;
    } 
  }
}