Build A Custom Docker Image For Your Containerized Web Application

Datetime:2017-03-19 05:18:20         Topic: Docker  AngularJS          Share        Original >>
Here to See The Original Article!!!

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:

ngnew 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:

ngserve

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:

ngbuild

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:

dockerbuild -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:

dockerrun -d -p 8080:80 --namemyprojectcontainermyproject

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 thisprevious 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.








New