In this post, we will containerize angular application using Docker.
- Creating Sample Application
- Creating Docker file
- Creating docker ignore file
- Building a docker image
- Running a container
- Publish image to docker hub
- Install Docker for Desktop
- Install Node js
- Install Angular CLI Make sure you have the latest version of Angular CLI installed.
If you already have Angular application you can skip this step
- Open Terminal / Command Prompt
- Create new folder
- Initialize Angular application
ng new SampleApp
- Navigate to created project
- Make sure app is running
ng serve -o
- Navigate to https://locahost:4200 in your browser.
- Feel free to make any changes.
To create a docker image we must create the docker file and specify the required steps to build the image.
- Open the Project in Code Editor I'm using VS Code feel free to use your favorite code editor.
- Create the Dockerfile without any extension in the root of your project.
- We will use docker multistage build to create an optimized image. In this process, we will start with the node image to build our angular application and then copy the required file in the nginx server image. You can learn more about Docker multistage build here
- Let's create our docker file
FROM node:12.16.1-alpine As builder
This line will tell the docker to pull the node image with tag 12.6.1-alpine if the images don't exist. We are also giving a friendly name builder to this image so we can refer it later.
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/SampleApp folder.
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/SampleApp/ /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/SampleApp/ to nginx container.
COPY . . command execute it will copy all the files in the host directory to the container working directory. if we want to ignore some folder like .git or node_modules we can define these folders in .dockerignore file.
- Create .dockerignore file in the root folder of your project.
Copy below content in it.
Navigate the project folder in command prompt and run the below command to build the image.
docker build . -t usmslm102/sampleapp
This command will look for a docker file in the current directory and create the image with tag usmslm102/sampleapp. with -t command you can specify the tag for the image the default convention is
usmslm102/sampleapp. usmslm102 is my docker hub username and sampleapp is the image name
docker images command to list all the docker images in your machine
You can run the docker image using the below command.
docker run -p 3000:80 usmslm102/sampleapp
-p flag publishes all exposed ports to the host interfaces. we are publishing container port 80 to host 3000 port.
Navigate to your browser with http://localhost:3000
Docker hub is a container registry maintained by docker. Make sure you have a docker hub account.
Provide valid username and password. once the login is succeed run below command to publish.
docker push <UserName>/<ImageName>
Replace UserName and ImageName with your username and image name. e.g.
docker push usmslm102/sampleapp
My image url: https://hub.docker.com/r/usmslm102/sampleapp
Note: By default, the image will be public. Navigate to docker hub image setting to make it private.