Dockerizing my Node.js Selfie App in 30 minutes

This is a showcase of how I will package my previous Selfie App in a docker. Come check it out: https://hub.docker.com/r/ting11222001/selfieapp

Love it so much! My favorite animal has always been a whale!

Goal

I’ve heard about docker for a while, but today I’m going to package my Selfie App in a docker (you can read more about it here) and push it to docker hub (a place where we can share our app’s container images publicly or privately with a subscription plan), so other people can easily download it (i.e. pull the container image down) and run it on their machine. Docker is much more lightweight than virtual machines which makes them appealing to developers to use them to distribute applications around.

Here I’m going to showcase how I set up my docker environment, from installing docker desktop, generating Dockerfile, and Docker images and containers in the following content.

I found most of the concepts behind the packaging process and CLI are somewhat similar to Git :D Hope you will enjoy this piece of demo, and use it in your project if you haven’t tried it out yet!

A few terms before I move forward

I will mention the below terms a lot, and here is the way how I will explain them:

• Dockerfile: a blueprint of building docker image
• Docker image: a template of running docker container
• Docker container: is a running process e.g. here I have a node app to run

I can define the docker environment in Dockerfile. Other developers can use the same Dockerfile to rebuild the environment, which is saved as an immutable snapshot known as a Docker image. Images can be uploaded to the cloud. Other developers who want to run the software can just pull down the image to create a container i.e. a running process of that image, so that image can be run in multiple times and in multiple places.

What I’m doing here is that putting a node in a docker is to reproduce my environment and when other people pull the docker image, it’ll be like running the app in “my environment” for them.

Process

First, install Docker Desktop. Here I’m installing the Mac version:

I chose to install a stable version (which requires at least 4G of RAM, and Catalina Macbook 10.15+):

The reason why I’m using docker desktop is to help myself to have a GUI to easily visualize which container is running and even read the logs inside the GUI. I can do all of these things in CLI as well.

docker desktop GUI dashboard looks like this:

Click on a container, I can see logs from history:

Once installed, I can start using below CLI to give myself a list of running containers on my system. Every container has a unique ID and an image. Same info will be in the desktop GUI as well.

$docker ps

Since my Node.js app was created in VS code this IDE, I also want to install a Docker extension in VS Code:

Now, I’m going to start configuring a Dockerfile on my selfie app.

Create a Dockerfile in the root and configure with below. Since I’m packaging a Node app, so here I used node:12 image as the environment of my app:

The last line is to tell docker to copy all my local files to its working directory, but I don’t need to package the entire dependencies from node_modules here. So I will add .dockerignore like .gitignore i.e. to skip these files from dockerized:

Also, I need to set a port with ENV, EXPOSE, and let the container know how to run this application with CMD:

Back in my Express in index.js, I double checked with my port:

Also, we need to signup an account on the docker hub, so when we build a container image, we can give it a better name tag later on.

After we sign in, we can create a new repository for this project. Mine looks like this:

Next, build our app’s docker image by using $docker build and giving it a <repo name>:<tag>. Make sure you’re in the directory of your project in a terminal using the cd command. Run the following command to build your container image:

$docker build --tag <repo name>:<tag> . 
#remember the dot at the end!

At the end of this command’s response, you will see:

Successfully built fd5049e9c2fd

It’s telling us an image is built with this ID.

Then, try to run container — make sure there’s port forwarding from port 8080 to port 5000:

$docker run -p 5000:8080 fd5049e9c2fd

Once it’s up and running, we can see this container showing green signal on GUI dashboard and we can directly hit the top right OPEN IN BROWSER button to see how our app looks in the browser:

It’s running as I expected:

Main page

Records Page

Now we’re ready to share our container image on docker hub. Use the below code to connect our image to the remote docker hub repo:

$docker tag local-image:tagname new-repo:tagname
$docker push new-repo:tagname

Make sure the images name should be specified as <Your Docker ID>/<Repository Name>:<tag> like below:

$docker tag selfieapp:1.0 ting11222001/selfieapp:1.0
$docker push ting11222001/selfieapp:1.0

When it’s all up, we can come to our dashboard of this repo to check it out. Look there’s one tag shown up:

When we click on the tag, we can see the same sha256 on top, so this is the exact container image we just uploaded:

Conclusion

Now we have successfully shared our app on the docker hub! One thing to note that even when we close the browser that displayed our app above, docker will still keep running, unless we shut it down.

That’s it for today! Hope this helps.

Have a wonderful day ahead!