Make a Static Webpage with Docker and a Custom Nginx Image

Demonstrating a simple Docker setup using Nginx as a web server and storing the data in AWS S3.

Use Case: Your team needs you to deploy a custom image quickly and write a quick script in a file to accomplish a task.

We will complete four tasks:

1. Create a custom Docker image based on Nginx
2. Add a file that shows the date and time the container was deployed
3. Deploy the Nginx container with port 8080 open
4. Save the container data in an AWS S3 bucket

Prerequisites:

1. A Docker account with Docker Desktop and CLI access
2. A file editor of your choice (I used Atom for this project)
3. An AWS account with AWS CLI configured

Let’s begin!

Step 1: Docker Pull, Docker Build

First, we need to get the Official Nginx Image from Docker Hub. Take a moment to look through the details of the image. To pull this image to use with our Docker setup, we’ll use the command “docker pull nginx” in our terminal. Docker will pull the image from its library and confirm the version is up to date.

We want to create a custom Nginx image with a different index.html file for our static web page. To do this, we’ll create a Dockerfile in Atom and add a few commands to it:

This tells docker to use the latest Nginx image in this build, to remove the default Nginx .conf file, and copy our index.html file to Nginx’s html folder.

After saving the file as “Dockerfile” in your working directory, run “docker build” to build an image from the Dockerfile and tag it with a unique name:

docker build -t <image-name> .

Be sure to include the trailing “.” at the end of the docker build command. On docs.docker.com, it is explained that the “.” specifies that “the PATH is ., and so all the files in the local directory get tard and sent to the Docker daemon….not just the ones listed to ADD in the Dockerfile.”

If your run of the docker build command succeeds, your output will look something like this:

Step 2: Include Datetime Script in index.html

Before we deploy the newly built image as a container, we need to configure the index.html file we specified in the Dockerfile to replace the default Nginx index.html. For this exercise, I created a simple “Hello from Nginx container!” static HTML page, and added a datetime script to run when the page is loaded.

Step 3: Docker Run

The docker run command will run commands in a new container, based on our custom Nginx image.

To deploy the container and ensure port 8080 is open, we could either add this to the Dockerfile, or include the command “-p 8080:80” to specify the port for Docker to expose. The following flags with explanations are found on the docs.docker.com page for “docker run”:

--interactive , -iKeep STDIN open even if not attached

--tty , -t Allocate a pseudo-TTY

--rm Automatically remove the container when it exits

--detach , -d Run container in background and print container ID

My run of the command “docker run” with these flags as used in this exercise is shown below:

Confirm the container is deployed, when it was created, and how long it has been up using the command “docker ps”

Step 4: Save the Container Data in an AWS S3 Bucket

To save the container data in an AWS S3 bucket, the simplest approach I found begins with compressing the container files (in this case, the index.html, the .DS-Store, and our Dockerfile) into a tar file with a unique name.

Then, upload the tar file to your designated AWS S3 bucket using the AWS CLI command “aws s3 cp”

Confirm the compressed file has been uploaded to S3 with the command “aws s3 ls”

… and on the S3 dashboard in the AWS Management Console:

Finally, open localhost:8080 in your browser to see the index.html file we created in action:

Because Docker automatically creates events logs for containers and images, You can also view the exact time a container was deployed using the “docker logs” command with the the flag “timestamps” and the container’s ID:

Congratulations, our custom Docker project works!