Deploy a custom Nginx Docker Image and Push it to Docker Hub

Hasan Cheema
Nerd For Tech
Published in
7 min readMar 2, 2023

Overview:

In this article, I will guide you through the process of creating your own customized Docker image to host a static webpage. After that, I’ll launch a Docker Container with my unique image inside of it and store the Docker Image in the AWS Elastic Container Registry (ECR).

What is Docker?

Docker is an open platform for developing, shipping, and running applications. Docker enables you to separate your applications from your infrastructure so you can deliver software quickly. With Docker, you can manage your infrastructure in the same ways you manage your applications.

What is a Docker Container Image?

A Docker container image is a lightweight, standalone, executable package of software that includes everything needed to run an application for instance code, runtime, system tools, system libraries, and settings.

What is ECR?

Amazon Elastic Container Registry (Amazon ECR) is an AWS-managed container image registry service that is secure, scalable, and reliable. Amazon ECR supports private repositories with resource-based permissions using AWS IAM.

Objectives:

1. Create your own image using Nginx. Include a customized index.html file that can be viewed from a local browser.
2. Deploy your container with port 8080 open
3. Save your container data to the AWS Elastic Container Registry (ECR), and to your Docker Hub account.

Preconditions:

1. AWS Free Tier Account
2. DockerHub Account
3. Basic Knowledge of HTML
4. IDE of your chouse (I will be using Cloud9)

Step 1: Create the Docker image

Before we get started with creating the Docker Image we will create a Directory to keep all the necessary files and resources in one place, making it easier to manage, maintain, and update the image.

The directory will also help Docker to find and use the required files during the image-building process.

Use the mkdir command to create the directory
cd to move into the directory

mkdir directory name
cd directory name

Step 2: Pull the Docker image

For us to deploy our website we need to pull the latest Nginx Image from Docker. We can use the following command to accomplish that.

docker pull nginx:latest

Step 3: Verify that the NGINX image was pulled successfully

We can confirm from the Status line that the Nginx image is the latest and that the pull was successful. We can also use the docker images command to confirm that our pull was successful.

docker images

Step 4: Create the Dockerfile and Index.HTML

We will use the touch command to create the index.html and dockerfile and vim command to edit the files.

Dockerfile

FROM nginx:1.10.1-alpine
COPY index.html /usr/share/nginx/html
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

index.html

<!doctype html>
<html>
<body style="backgroud-color:rgb(49, 214, 220);"><center>
<head>
<title>Docker Project</title>
</head>
<body>
<p>Welcome to my Docker Project!<p>
<p>Today's Date and Time is: <span id='date-time'></span><p>
<script>
var dateAndTime = new Date();
document.getElementById('date-time').innerHTML=dateAndTime.toLocaleString();
</script>
</body>
</html>

Make sure to save the files by using hitting the esc button and using :wq command.

Step 5: Build the image

Run the following command in the Terminal to build the Image.

#make sure to add a dot at the end 
docker build -t <new_image_name> .

Use the following command to verify the Image was successfully built.

docker images

Step 6: Build and deploy the container

Use the following command to create a container with the image we created earlier using the following command.

docker run -d --name <name-container> -p 8080:80 <new_image_name>

Step 7: Check if the container was successfully created.

With the following command, we can verify that our container was successfully created.

docker ps -a

Step 8: Verify that the container is running

Take the Public IPv4 Address of the Instance your Cloud9 is running on and paste it into a web browser. Make sure to add :8080 at the end.

<public_ip>:8080

Step 9: Push the container image to the AWS Elastic container Registry (ECR)

Now that our container is built we can go ahead and push it to Amazon ECR. But before doing that we need to create a Repository. Use the command below to create a Repo.

aws ecr create-repository --repository-name <repo name> --region us-west-1

You should get something like this if the command was run successfully.

Step 10: Verify if our Repo was created

Another way to verify if the Repo was created is to navigate to the Amazon Elastic Container Registry (ECR) from the management console and click on Repositories and you should see the Repository we just created.

Now that we have our Repository we can run the following command to log in to the ECR.

aws ecr get-login-password --region us-west-1

Save this output of the command above somewhere safe because we will need it later. Next, run the following command.

aws ecr --region us-east-1| docker login -u AWS -p <Token Output> <ECR Repository URI>

Step 11: Tag the image and push it to ECR

We have now successfully logged in. Next, we will tag our image before we push it to the ECR Repo with the following command

docker tag <image name> <ECR Repo url>

We have successfully tagged our image and can now push it to the ECR with the following command.

docker push <ECR repo url> 

Step 12: Verify if the image was pushed to the Repo

Navigate back to the ECR Dashboard and click on the Repository name we just created and under images you should see the image we just pushed.

Step 1: Push the image to Docker Hub

Now that we have our image in the ECR Repo we can go ahead and push that to our Docker Hub account. Run this command in the terminal to push the image to Docker Hub.

docker login -u <docker username> 

Step 2: Create a Repository in Docker

Now that we have successfully logged in to our Docker Hub account we can go ahead and create a repository within the Docker Hub account.

From the main page click on Create Repository.

Give your Repo a name
Give it a description
Select either Private or Public
Click on Create

Step 3: Commit the image

Now that we have created the Repository let’s go ahead and commit our image to it with the following command.

docker commit <container id> <dockerhub username/docker hub repo name:tag name

Step 4: Push the image to Docker Repo

Lastly, we can push the image to our Docker Repo with the following command. For the tag, name use the tag we created earlier.

docker push dockerhub username/dockerhub repo:tagname

Step 5: Verify if the image was pushed

Navigate back to the Docker Hub home page and click on your Repository and you should see your image under the Tags section.

Thank you for reading my post! Be sure to clean up your environment after.

--

--