Blog

Let's Make a Docker Image [Part 3]

Posted by Miloš Đorđević on Aug 5, 2020 12:00:59 PM
Find me on:

For creating your own Docker image, you only need to have the right recipe. Learn how to build one, by following step-by-step instructions described in this blog post.

Before we go ahead for the main dish, you can take a look at other two blogs from this series: LET'S MEET DOCKER and LET'S PLAY WITH DOCKER, as they’ll give you the right basis to dive in deeper.

 

Ingredients to Make Docker Image with Angular 10 App

We’ll build a Docker image for Angular 10 app and, for this case, we need to have the following ingredients:

  1. Docker
  2. js
  3. npm
  4. Angular CLI

On the previous links, you can find information on how to install Docker, Node, npm, and Angular CLI on your computer.

 

Angular App with CLI

We’ll create a new Angular project with CLI for this purpose: if you have any other Angular project, you can use that one. The Angular CLI with NG NEW, creates an application that already works, without touching the code.

 ng new project-name (in our case MakeDockerImage)

Docker 3.1

This command can take a few minutes, because Angular CLI will install all necessary npm packages and other dependencies. When everything is done, we can test our angular app to see if everything works.

With your terminal, go to the project folder and try NG SERVE command (the --open option will open your app URL in the default browser).

ng serve –open

Docker 3.2

 

In your default browser, you’ll see this:

Docker 3.3

 

How to Create a Docker Image by Writing a Dockerfile?

Now that we’ve done all the preparations, we’re ready to take the next step and create a Dockerfile. A Dockerfile is a text file that contains commands in order, required to build a Docker image. Create a file with name Dockerfile, without any extension in the root of our Angular app.

Docker 3.4

We’ll use Docker multistage build to create our image. Multistage builds allow us to keep Dockerfile easy to read and maintain. We have two stages. In the first one, we’ll start with the node image to build our angular application, while in the second, we’ll use nginx server image and copy the required file from the first stage.

The first command will call the Docker to pull the node image with tag 14.7.0-alpine. We also can give a name builderapp to this image, so we can refer to it. Builderapp is my example for this case, you can use any name you like.

 

FROM node:14.7.0-alpine As builderapp

This WORKDIR command will set the working directory in our docker image: any command will be run in its context.

 

WORKDIR /usr/src/app

 

This command COPY will copy package.json and package-lock.json to the root of our working directory, inside a container.

 

COPY package.json package-lock.json ./

 

We’ll use npm, since you run the npm install command to install all the dependencies.

RUN npm install

 

Copy all the files to the working directory, in order to run the ng build --prod.

COPY .   .

RUN npm run build --prod

 

For running our Angular app, it’s preferable to use nginx, rather than Node.js. In that case, well use the FROM statement, where we specify we want to use nginx.

 

FROM nginx:1.19-alpine

COPY --from=builderapp /usr/src/app/dist/MakeDockerImage/ /usr/share/nginx/html

With the following copy statements, we’ll copy built Angular app from the/dist folder in the builderapp to the html folder of nginx.

Docker file should look like this:

Docker 3.5

 

How to build a Docker Image?

We have a Dockerfile. We’re ready to run the command to build our image.

docker build -t makedockerimage. 

This command will create a Docker image:

Successfully built 6f1aa1add838
Successfully tagged makedockerimage:latest

You can see your Docker image on your local repository with the command:

docker image ls

The result should be something similar to this one:

REPOSITORY       TAG     IMAGE ID     CREATED             SIZE
makedockerimage latest 6f1aa1add838 About a minute ago 42.1MB

 

 

It's Time to Run a Docker Container!

We have to start a Docker container, based on our Docker image.

docker run --name makedockerimage -d -p 8088:80 makedockerimage

Open URL http://localhost:8088/ in our browser to see our Angular app running.

 

That was great, wasn't it? Congratulations on your new Docker image!

 

Topics: Docker, DockerHub, Containers