skip to Main Content

I am actually learning how to develop a website with Angular and to learn even more we are also learning Docker my putting our project in a container.
Our goal is to have Angular exclusively installed on the container, and have our code on our host machine accessible for the container by a bind volume mounted.

So I created a Dockerfile with what was needed and a docker-compose.yaml so the mount volume instruction is directly in it (so we don’t need to run the container with -v each time).

The server launch perfectly, all my files are changed on my container when I modify themn on my host. However, if I want to access it from my host, I have to access it with the "Network" IP provided my Node.js and not the localhost one, and I thought it was supposed to ?

Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4200/
  ➜  Network: http://another.ip:4200/

I can work with that but I would like to understand why does it work like that, because I think it’s just some incomprehension of mine.

Here is my Dockerfile :

FROM node:latest
WORKDIR /app

RUN npm install -g @angular/cli@16

COPY package.json package-lock.json ./
RUN npm install

EXPOSE 4200

CMD ["ng", "serve", "--host", "0.0.0.0", "--disable-host-check"]

And my docker-compose.yaml :

version: '3.8'
services:
  my-website:
    image: image-of-mywebsite
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./:/app
    ports:
      - "4200:4200"

They are in the same folder, the folder where my Angular project is, and I run it with
sudo docker compose run my-website

Thank you for helping me understand.

3

Answers


  1. Have you tried http://0.0.0.0:4200/ or http://127.0.0.1:4200/?

    You can try as well removing the --host flag in your CMD command such as:

    CMD ["ng", "serve" "--disable-host-check"]

    Login or Signup to reply.
  2. Of course you should be able to access it from localhost. The docker compose will create a bridge network if not otherwise specified so you should be able to reach it from localhost.
    Bridge Network

    Have you tried something like this?

    ng serve --host 0.0.0.0 --port 4200
    

    If it does not work I would like more information.

    Login or Signup to reply.
  3. The issue could be in the docker-compose.yaml. It runs the image, not the build. Try removing this line:

    image: image-of-mywebsite
    

    And then run the composition like this:

    docker-compose build && docker-compose up
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search