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.
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:
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
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
In your default browser, you’ll see this:
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.
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.
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, we’ll use the FROM statement, where we specify we want to use nginx.
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:
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!