Containerizing A Sample HTML Application Using Docker
Docker is an open source containerization platform. It enables developers to package applications into containers — standardized executable components combining application source code with the operating system (OS) libraries and dependencies required to run that code in any environment. In this blog post, we are going to containerize a sample html application using docker. Make sure to install docker in your system before starting!
Note: All the code files can be taken from the link.
1. Write a simple HTML web application
Create index.html and add below content to it. Here, I added an image named sample.png as well and put it in the same directory where this html file is.
<!DOCTYPE html>
<html>
<head>
<title>Service 1</title>
</head>
<body style=”background-color:rgb(43, 179, 197);”>
<h1>Service 1</h1>
<p>Hello From Service 1</p>
<img src=”sample.png” alt=”No image”>
</body>
</html>
Now, you should be able to open index.html in the browser and you should get below output in the browser.
Now, you have created the sample html application successfully.
2. Containerizing the HTML web page
Now, we will move to the next step. We want to containerize the application. For that, first we want to create a docker image for the application. For that, we need to define a Dockerfile. Create a file named Dockerfile and add below content to it.
FROM nginx:alpine
COPY . /usr/share/nginx/html
Dockerfile is a text file in which several commands to be executed are listed out.
FROM Imagename
The FROM instruction initializes a new build stage and sets the Base Image for subsequent instructions.
COPY Path
The COPY instruction lets us copy a file (or files) from the host system into the image.
We will add this Dockerfile into the folder where the html application is and will open the terminal there.
2.1. To create the image, run below command
docker build -t sumuduliyan/service-1 .
You have to put dockerhub_userid/prefer_imagename instead of sumuduliyan/index-web part in the command. And If you are a linux fan, you have to put “sudo” in front of every command.
Docker Hub is a service provided by Docker for finding and sharing container images. Create an account there if you haven’t done it yet!
2.2. To check whether you have created the image, use below command and inspect.
docker images
You should find the created image name under images, if your image is successfully created.
2.3. Now, you have created the image. Now we have to start the container. For that, you can use the below command.
docker run -d -p 8002:80 sumuduliyan/service-1
Now, you should be able to see the web page by searching for “localhost:8002” in the web browser. If you get the web page in the browser, you are done! The container is running well!
2.4. To Inspect the containers running in the system, you can use the following command as well.
docker ps
Congratulations! You have successfully containerized the html application.
3. Pushing Images To Docker Hub
Docker Hub is a service provided by Docker for finding and sharing container images. Pushing the images into Docker hub is extremely useful when those images are used in cloud platforms as well. But, if you are running the containers in your local computer, pushing them into Docker hub is not mandatory.
Before pushing the image, you should have created a Docker hub account.
Now, you can push the image into the docker hub. For that, you need to authenticate first.
docker login
You will have to enter the docker hub username and the password.
After that, push the image into the docker hub.
docker push sumuduliyan/index-web
After pushing successfully, you will be able to see the image in Docker hub. But, sometimes it takes a few minutes to show up.
Can We Run Two HTML Docker Containers Same Time?
The answer is yes. Here, we are running our container at port 8002. We can run another container at port 8003 at the same time.
In this blog post, I went through some concepts of Docker and the way of containerizing a sample html application.
Thank you!
