Dockerizing an Angular application + how to solve the issue of an exposed port on the Docker container is not accessible in your browser
Create DockerFile
Create a DockerFile
in the root folder of the project with the following content.
FROM node:14.15.0
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json /app/package.json
RUN npm install
RUN npm install -g @angular/cli@10.2.0
COPY . /app
CMD npm start
- Use the latest LTS version of Node.js to create the Docker container
- Create a working directory in the container (WORKDIR /app)
- Copy package.json and install all dependencies in Docker container
Install the latest version of the angular-cli globally in the container
Copy the current directory into the /app directory of the container
Add the command npm start
Create Docker Image
Create a new DockerImage with the name of your app (angularapp) and a tag of choice (dev in this case).
Then add the current directory (.) as a second parameter to the build command
docker build -t angularapp:dev .
Run Docker container with the created image
docker run -v ${PWD}:/app -v/app/node_modules -p 4200:4200 --rm angularapp:dev
bash
-
-v ${PWD}:/app
mounts the code in the containers /app directory -
-v/app/node_modules
mounts the node_modules of the container to be used instead of the locally installed node_modules folder. Deleting the locally installed node modules is possible now -
-p 4200:4200
exposes the 4200 port (ng serve uses default port 4200) of the Docker container to other docker containers, and maps it to the 4200 port of the Docker host -
--rm
will remove all mounted volumes after the container exits -
angularapp:dev
defines which image with which tag to run
Issue of unaccessible exposed ports
After executing the docker run
command the container is up and running. Running docker ps
confirms this.
Using the container_id or container name and running docker port {container_id/container name}
shows that port 4200 of the host is mapped to the 0.0.0.0:4200
of the running container
(4200/tcp -> 0.0.0.0:4200
)
But using http://localhost:4200
in the browser will not give any results. The browser tells the page is not available/accessible.
Entering the container and verifying that the Angular local dev-server is running in the container and returning a valid HTML page is confirming that the container is working, access from the Docker host is the current issue
How to verify Angular dev-server is up and running
> docker exec -it {container_id/container name} /bin/bash
> curl localhost:4200
A valid HTML file should be visible
The issue is that, if we check the Angular-cli docs for serving an application(ng serve
), the default host the dev-server listens too is localhost
. Unfortunately, an outside connection (from Docker host' browser) to the Docker container is not using localhost
If we add the following params to the ng serve
command to ng serve --host 0.0.0.0
and restart the docker container, using http://localhost:4200
in the Docker host browser should now work
Top comments (5)
3 years later I am still coming to say sir you are heaven sent :)
Thank you very much for a life saving solution :)
Thank you! you really save my life!!
Thanks dude u saved my life , the only person on the entire web who has the right solution , I created an account here just to thank you , I sent you a connection in linkedIn , I would be thankful if you accept it
I did the same :) I was scratching my head for a couple of days and this helped to fix it
Uff you saved me from this one. I was actually bothering with this since yesterday and I didn't know what it could be. Thank you. Greetings from Bogota-Colombia.