Build A Custom Docker Image For Your Containerized Web Application

I’ve been working with Docker for a while now and I’ve found that I’m rarely using one of the vanilla images found on Docker Hub. By rarely, I don’t mean never, but in most cases I find that I’m building my own custom Docker image for any web application that I wish to containerize. This allows me to create an image that meets my needs and deploy it anywhere and anytime that I find necessary.

We’re going to see how to build a simple web application and turn it into a Docker image so it is containerized and easily deployable anywhere that Docker Engine is available.

For this example we’re going to create an Angular web application, turn it into a custom Docker image, and then deploy it as a Docker container. This means that both Docker and the Angular CLI must be installed prior to continuing.

Creating an Angular Web Application with the CLI

To get started, let’s create a fresh Angular application. From the Angular CLI, execute the following command:

ng new MyProject

The above command will generate a project will all the necessary boilerplate files, directories, and code. You can test that the application works by executing the following command:

ng serve

If you visit your web browser, you can view your application at http://localhost:4200.

For simplicity, we aren’t going to change the application that the Angular CLI generated. It is a fully functional application and it will make no difference in terms of containerization if we were to change it or leave it as is.

Serving our application is not the same as building our application. While we could serve it via a Docker container, we should probably build it instead. This can be done by executing the following:

ng build

The above command will generate a web application in the dist directory of the project. This can be served by NGINX or any other that we choose.

This is where the Docker stuff comes into play.

Creating a Custom Docker Container from the Angular Application

To create images for Docker you must create a Dockerfile file within your Angular project. This file can exist at the root of your project.

Within the Dockerfile file, include the following:

FROM nginx:alpine

COPY ./dist /usr/share/nginx/html

The above Dockerfile file says we are going to use the Alpine Linux NGINX image and copy the dist directory from our project into the /usr/share/nginx directory of the image, calling it html instead. The base NGINX image knows to serve HTML inside that directory.

To build this image, execute the following from the Docker Shell:

docker build -t myproject /path/to/directory/with/dockerfile

The custom image name will be myproject and it will be based off the directory that contains the Dockerfile file. To build a container from this image, execute the following:

docker run -d -p 8080:80 --name myprojectcontainer myproject

The above command will allow access to the container from the host via port 8080, which is mapped to port 80 in the container. The container name is myprojectcontainer and it is based off the myproject image.

Not so bad right?

Conclusion

By creating custom Docker images, your web applications can become significantly easier to deploy as containers. We just saw how to build an Angular application and build it into an NGINX image to be served on container port 80. The concepts here can easily be translated to other, more complicated web application images.

If you deploy several web applications on a server, you’ll probably want to use a reverse proxy because they can’t all operate on port 80. Check out this previous tutorial on using NGINX as a reverse proxy for your containerized applications.

Need a place to host your Docker containers? I highly recommend using Digital Ocean or Linode due to their amazing prices and service.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.