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?

The Docker Hub nginx image already provides a basic Nginx config file that will serve files out of /usr/share/nginx/html; can you use that default configuration, and not COPY nginx.conf into the image? — David Maze
– David Maze, Commented Mar 8, 2022 at 11:39

Motscha · Accepted Answer · 2022-03-08 07:06:46Z

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

answered Mar 8, 2022 at 7:06

Motscha

1422 bronze badges

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

Collectives™ on Stack Overflow

Building angular image with dockerfile

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related