Let's containerize angular application using Docker.
You must have an Angular application to containerize it. If you already have the application, then you can skip Angular Application creation step.
1. Create an folder/directory on your machine, let's say HelloWorldApp.
2. Open command-line and navigate to this directory.
3. Create Angular application using ng new HelloWorldAngular command.
4. Navigate to created project folder cd HelloWorldAngular
5. To make sure app is running. run ng serve command here, then navigate to https://locahost:4200 in your browser.
Note : Here we are going to use multistage build to create an optimized image.
Below is the detail of Dockerfile instructions.
FROM node:latest As builder
This line will tell the docker to pull the node image with tag latest if the images don't exist. We are also giving a friendly name (alias) builder to this image so we can refer it later.
WORKDIR /usr/src/app
This WORKDIR command will create the working directory in our docker image. going forward any command will be run in the context of this directory.
COPY package.json package-lock.json ./
This COPY command will copy package.json and package-lock.json from our current directory to the root of our working directory inside a container which is /usr/src/app.
RUN npm install
This RUN command will restore node_modules define in our package.json
COPY . .
This COPY command copies all the files from our current directory to the container working directory. this will copy all our source files.
RUN npm run build --prod
This command will build our angular project in production mode and create production ready files in dist/HelloWorldAngular folder.
FROM nginx:latest
This line will create a second stage nginx container where we will copy the compiled output from our build stage.
COPY --from=builder /usr/src/app/dist/HelloWorldAngular/ /usr/share/nginx/html
This is the final command of our docker file. This will copy the compiled angular app from builder stage path /usr/src/app/dist/HelloWorldAngular/ to nginx container.
Navigate to the project folder in command prompt and run the below command to build the image.
docker build . -t jagdevsingh2020/helloworldappimage
You can run the docker image using the below command.
docker run -p 4000:80 jagdevsingh2020/helloworldappimage
Here -p flag publishes all exposed ports to the host interfaces. we are publishing container port 80 to host 4000 port.
Navigate to your browser with http://localhost:4000 to verify your application.
Pre-requisites for exercise:
- Install Docker for Desktop
- Install Node js
- Install Angular CLI (make sure you have the latest version of Angular CLI installed).
You must have an Angular application to containerize it. If you already have the application, then you can skip Angular Application creation step.
Create Angular Application
2. Open command-line and navigate to this directory.
3. Create Angular application using ng new HelloWorldAngular command.
 |
| Angular Application Creation |
4. Navigate to created project folder cd HelloWorldAngular
5. To make sure app is running. run ng serve command here, then navigate to https://locahost:4200 in your browser.
6. Feel free to make any changes (add new components/modify existing components.
To create a docker image we must create the docker file and specify the required steps to build the image.
1. Create the Dockerfile (name of the file must be Dockerfile) without any extension in the root of your project.
2. Let's update our empty Dockerfile.
Creating Docker file
1. Create the Dockerfile (name of the file must be Dockerfile) without any extension in the root of your project.
2. Let's update our empty Dockerfile.
Note : Here we are going to use multistage build to create an optimized image.
Below is the detail of Dockerfile instructions.
FROM node:latest As builder
This line will tell the docker to pull the node image with tag latest if the images don't exist. We are also giving a friendly name (alias) builder to this image so we can refer it later.
WORKDIR /usr/src/app
This WORKDIR command will create the working directory in our docker image. going forward any command will be run in the context of this directory.
COPY package.json package-lock.json ./
This COPY command will copy package.json and package-lock.json from our current directory to the root of our working directory inside a container which is /usr/src/app.
RUN npm install
This RUN command will restore node_modules define in our package.json
COPY . .
This COPY command copies all the files from our current directory to the container working directory. this will copy all our source files.
RUN npm run build --prod
This command will build our angular project in production mode and create production ready files in dist/HelloWorldAngular folder.
FROM nginx:latest
This line will create a second stage nginx container where we will copy the compiled output from our build stage.
COPY --from=builder /usr/src/app/dist/HelloWorldAngular/ /usr/share/nginx/html
This is the final command of our docker file. This will copy the compiled angular app from builder stage path /usr/src/app/dist/HelloWorldAngular/ to nginx container.
Complete Dockerfile
 |
| Complete Dockerfile |
Building a docker image
docker build . -t jagdevsingh2020/helloworldappimage
This command will look for a docker file in the current directory and create the image. The default convention is <DockerHubUsername>/<ImageName> e.g. jagdevsingh2020/helloworldappimage. jagdevsingh2020 is my docker hub username and helloworldappimage is the image name.
Run docker images command to verify above image. This will list all the Docker images on your machine.
Running a container
docker run -p 4000:80 jagdevsingh2020/helloworldappimage
Here -p flag publishes all exposed ports to the host interfaces. we are publishing container port 80 to host 4000 port.
Navigate to your browser with http://localhost:4000 to verify your application.
Happy Learning !!
No comments:
Post a Comment