How to build Docker Image for Angular projects

Please Note — This tutorial assumes you have basic knowledge about docker and you have already installed Docker on your machine.

Now let’s start by dockerizing angular project generated using Angular CLI.

I have created a simple angular project that comes out of the box by running the command ng new angular-docker in the terminal. Once this generation is complete, this is how the project structure looks.

Now let’s create a Dockerfile in the home directory as shown below.

  1. First as Angular needs NodeJS to download the dependency and build the project we are taking node:10-alpine image which is a lightweight version of Node image and we are providing an alias production-build to be used later.
  2. We create a directory called app and make it as the working directory.
  3. Next, we are copying package.json from local to the docker to the app directory.
  4. Install NPM dependencies using npm install command.
  5. After dependencies are installed, we copy other files from the present angular project local working directory to the app directory.
  6. Creating production build by executing the command npm run build — prod
  7. As we need some webserver to serve the content, we use Nginx image and copy the contents from /app/dist/angular-docker to /usr/share/nginx/html directory. (app/dist/angular-docker contents are created by running npm run build — prod). Note the use of from in COPY step. This is very important.

Above are the explanations for each step of the Dockerfile. Now let’s create the docker image. But before that, an important point to note is that we might have dependencies installed locally as we might have developed this project locally. Hence in this case node_modules folder where external angular dependencies are stored. As this folder is not needed to be copied to the docker image because we are running npm install inside the Dockerfile as a step we can ignore this folder. To ignore copying node_modules inside docker image we can create a file called .dockerignore in the project root directory and add node_modules like shown below

Now let us build the docker image by running the below command

docker build -t angular-docker:latest .

Now to run the docker image as a container use the following command

Please note if you want to run in a detached mode add -d flag. And for different ports change accordingly. Below is the screenshot of the browser when I visit localhost:8081.

One important point to note is that we are using a Multi-Stage Docker build. How? This is where the role of the alias comes into the picture. In the first stage which is aliased as production-build is the stage where dependencies are downloaded and a production-grade build is generated.

Now in the second stage which starts when we pull FROM nginx:1.17.1-alpine we copy only the dist folder. To Note, each FROM step is a new stage. This step has a huge significance in the process because in order to run the production build we do not need node_modules or other files we used in the first stage. And thus when we check the image size it is just 25MB. To check the docker image size just run docker images in the terminal.

But if we were to include other files from the above stage then the build size will be approx 630MB. This is a huge 25 times reduction. This is where multi-stage docker build helps.

Software Engineer