Containerize an Angular Application into Docker
In this article, we are going to build an angular application using docker and host the production-ready environment in an NGINX container.
Let’s create an angular application.
Before creating an angular application, ensure that you have installed NodeJS and Angular CLI installed into your development environment.
Once the prerequisite is installed start executing the following command for creating an angular application.
ng new sample-app
Navigate to the project directory,
cd sample-app
Run the application by using the below command.
ng serve
Now your angular application starts running,
Let’s create a docker file and dockerizing the angular application.
Creating a Docker File
Docker file consists of the following stages,
- Building the Angular application into production-ready
- Serving the application using the NGINX server.
Let's discuss both the stages in detail and the command which we are going to use while creating a docker file.
Stage 1
FROM
Initializes a build stage, and gets the latest node image from the DOCKERHUB Registry as the base image from executing the instruction related to the angular application configuration. The stage is named build, which helps to reference this stage in the Nginx configuration stage.
WORKDIR
Sets the default directory in which instructions are executed, If the path is not found the directory will be created, In the above code path of usr/local/app is the directory where angular source code move into.
COPY
It copies the project source files from the project root directory into the host environment into the specified directory path on the container subsystem.
RUN
It compiles our application.
Stage 2
FROM
Initializes a build stage, and gets the latest Nginx image from the DOCKERHUB Registry as the base image from executing the instruction related to the Nginx configuration.
COPY
It copies the build output which is generated in STAGE 1(-FROM=build used to replace the default Nginx configuration).
EXPOSE
It informs the docker that the Nginx container listens on port 80, So exposing the specific port.
Docker File
# STAGE 1: Compile and Build angular application
#Using official node image as the base image
FROM node: latest as build
# Setting up the working directory
WORKDIR / usr / local / app
# Add the Source code to app
COPY. / /usr/local / app / # Install all dependencies
RUN npm install
# Generate the Build of the angular application
RUN npm run build
# STAGE 2: Serving the application using NGINX server
# Using official nginx image as the base image
FROM nginx: latest
# Copy compiled file from build stage
COPY– from = build / usr / local / app / dist / sample - app / usr / share / nginx / html
# Expose Port 80
EXPOSE 80
Let's RUN the DOCKER CONTAINER,
In order to run the docker container, open up the terminal or command prompt and navigate to the docker file into your project directory.
docker build -t sample-app:latest
Once the build is successful, execute the following command.
Docker image ls
The above command will list all images which are installed in our docker container.
Let’s run the image,
Docker run -d -p 8080:80 sample-app:latest
Here I am using -d its helps to detach the container and have it run in the background and the -p argument is used for port mapping which is port 80 of the docker container (as mentioned in the docker file), should expose port 8080 of the host machine.
docker ps
The above command displays the details of our running container.
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
13e5642e4s29 gurp13/sample-app:latest "/docker-entrypoint.…" 10 seconds ago Up 10 seconds 0.0.0.0:8080->80/tcp reen_khayyam
Now we can see that the container is up and running. Try to open localhost:8080, you can see your application running.
Application is running and working as expected now we can push out the image to an image repository, which helps to deploy our container to a cloud service, for that you need to create an account on the Docker hub.
Once you created an account on docker hub run the following command,
docker login -u <username> -p <password>
docker push sample-app:latest
Your image is successfully pushed to the Docker hub registry.
Happy Reading :)