Problem when I dockerize my Angular application

Question

My problem is that I cna't see my application on the broswer (http://localhost:1999/), My docker command are this: docker-compose build docker-compose up

I'm doing something wrong? Why can't I see my application running? I tried to add the CMD line with ng -serve but it give me the error that ng isn't istalled, any other suggest?

My docker console:

/docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
/docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
/docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
10-listen-on-ipv6-by-default.sh: info: Getting the checksum of /etc/nginx/conf.d/default.conf
10-listen-on-ipv6-by-default.sh: info: Enabled listen on IPv6 in /etc/nginx/conf.d/default.conf
/docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
/docker-entrypoint.sh: Launching /docker-entrypoint.d/30-tune-worker-processes.sh
/docker-entrypoint.sh: Configuration complete; ready for start up
2022/08/26 13:47:26 [notice] 1#1: using the "epoll" event method
2022/08/26 13:47:26 [notice] 1#1: nginx/1.23.1
2022/08/26 13:47:26 [notice] 1#1: built by gcc 11.2.1 20220219 (Alpine 11.2.1_git20220219) 
2022/08/26 13:47:26 [notice] 1#1: OS: Linux 5.10.16.3-microsoft-standard-WSL2
2022/08/26 13:47:26 [notice] 1#1: getrlimit(RLIMIT_NOFILE): 1048576:1048576
2022/08/26 13:47:26 [notice] 1#1: start worker processes
2022/08/26 13:47:26 [notice] 1#1: start worker process 32
2022/08/26 13:47:26 [notice] 1#1: start worker process 33
2022/08/26 13:47:26 [notice] 1#1: start worker process 34
2022/08/26 13:47:26 [notice] 1#1: start worker process 35
2022/08/26 13:47:26 [notice] 1#1: start worker process 36
2022/08/26 13:47:26 [notice] 1#1: start worker process 37
2022/08/26 13:47:26 [notice] 1#1: start worker process 38
2022/08/26 13:47:26 [notice] 1#1: start worker process 39

My Dockerfile:

FROM node:latest as node
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build --prod
EXPOSE 1999
#stage 2
FROM nginx:alpine
COPY --from=node /app/dist /usr/share/nginx/html

My docker-compose:

version: "3.8" 
services:
  db:
    image: mongo:latest
    ports:
      - 27017:27017
    environment:
      SPRING_DATA_MONGODB_URI: mongodb://host.docker.internal:27017
      MONGO_INITDB_ROOT_USERNAME: user
      MONGO_INITDB_ROOT_PASSWORD: password
    volumes:
      - ./mongo-init.js:/docker-entrypoint-initdb.d/mongo-init.js:ro
  web:
    build: ./PersonBE/src/main/resources/person-fe
    ports:
      - 1999:1999
  api:
    build: ./PersonBE
    ports:
      - 8090:8090
volumes:
  person:

My content in dist:

My browser:

Why do you install node and nginx in the same Dockerfile? They are not supposed to run within the same container. Also 40 workers for local dev is draining your performance for no reason. Make sure the node app is running on the specified port 1999. — Daniel W.
– Daniel W., Commented Aug 26, 2022 at 13:59
Hi @DanielW. I followed a tutorial online because is the first time I use docker, do you suggest me to take off the nginx:alpine line? and anything else? — Sonn
– Sonn, Commented Aug 26, 2022 at 14:05
@DanielW. because it's a multi-stage build. node is used to build the app, nginx is used at runtime to serve te app — Sébastien Helbert
– Sébastien Helbert, Commented Aug 26, 2022 at 15:09

Sébastien Helbert · Accepted Answer · 2022-08-29 07:17:03Z

1

You are using a multistage build. The port exposed is the nginx port (80) not the node port 1999 (the line EXPOSE 1999 is useless here)

Try :

[...]
  web:
    build: ./PersonBE/src/main/resources/person-fe
    ports:
      - 80:80 # port mapping like the command "docker run -d 80:80 person-fe:latest" will do
[...]

Next open : http://localhost:80 or http://localhost

Also, your app is generated in the /app/dist/person-fe so you must COPY the content of this folder in nginx folder with COPY --from=node /app/dist/person-fe /usr/share/nginx/html :

FROM node:latest as node
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build --prod
EXPOSE 1999
#stage 2
FROM nginx:alpine
COPY --from=node /app/dist/person-fe /usr/share/nginx/html

edited Aug 29, 2022 at 7:17

answered Aug 26, 2022 at 15:11

Sébastien Helbert

2,20014 silver badges24 bronze badges

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

8 Comments

Sonn Over a year ago

I can see it starts nginx but It can't find my angular endpoint

Sébastien Helbert Over a year ago

when you run npm run build --prod what is the content of the generated dist folder?

Sonn Over a year ago

are: -dist -person-app -assets -index.html -runtime... Indeed I cannot see my componets, is that normal?

Sébastien Helbert Over a year ago

I don't understand your reply but if you used COPY --from=node /app/dist /usr/share/nginx/html, nginx is just showing up the content of this dist folder. If the content is not as you expect it won't work.

Sonn Over a year ago

BTW I solved by running this command on the console: "docker build --rm -f person-fe/Dockerfile -t person-fe:latest person-fe"and: "docker run --rm -d -p 80:80 person-fe:latest", do you know how can I do dirrectly this commans with docker-compose or dockerfile??

|

Collectives™ on Stack Overflow

Problem when I dockerize my Angular application

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related