How I Used Docker to Deploy a Static Website and Saved Its Data to an S3 Bucket

Danielle C. Wormley
AWS in Plain English
7 min readNov 4, 2021

--

Photo Credit: Jeremy Bezanger of Unsplash

As an aspiring DevOps engineer, I was granted the opportunity to learn about containers and Docker. In this assignment, I implemented this newly-gained knowledge by using Docker to deploy an NGINX website then saving its data on an AWS S3 (Simple Storage Service) bucket. This account details how I completed this containerization project.

Docker Logo

Describing Docker and Containers

A container is a method of packaging applications. Containers are lightweight, portable and small units of software that consist of layers of images. Containers do not require the use of a guest operating system (OS). Instead, it can use the virtualization of the host OS. Due to their packaging, with all necessary dependencies and required configuration, containers can operate within isolated environments. The combination of these elements allows containers to run quickly.

Docker is an open-sourced software tool that allows developers to build, deploy and maintain containers. On its website, Docker states that its software platform is “used by millions of developers to build, share, and run any app, anywhere, and 55% of professional developers use Docker every day at work.” One of its most popular products in Docker Desktop, an application available for Mac and Windows that allows users to easily access all of Docker’s containerization tools. Aside from Docker Desktop, other Docker deliverables include:

· Docker Hub (one of the world’s largest repositories for container images)

· Docker Engine (Docker’s main product which allows users to create and containerize applications)

· Docker Compose (a tool that developers use to manage multi-container Docker applications).

Materials

· Gleaned information from online research regarding NGINX and Docker (I began the search by entering the phrase, “deploying an image with NGINX” on my preferred search engine. A helpful document about deploying NGINX and Docker emerged from the search results.

· Docker Desktop (The downloading instructions will vary, based on your operating system.) For this project, we’ll use the Docker CLI that comes with it.

· Your preferred terminal

· Access to your AWS account via the AWS Management Console

· The AWS Command Line Interface (CLI). For OS-specific instructions to download the latest version, visit this link.

· Your choice of an Integrated Developer Environment (As usual, I chose to use Visual Studio Code.)

Instructions

· Create your image with NGINX and add a file that will tell the time and date of the container’s deployment.

· Deploy your container with port 8000 open.

· Save your container data in an S3 bucket.

Prep Work

Since the project requires access to the AWS CLI, let’s make sure that it’s running properly on the terminal. Enter “aws configure” to initiate.

Image of the “aws configure” command in Terminal

Type your credentials for the “AWS Access Key ID” and the “AWS Secret Access Key” prompts. Lastly, confirm your preferences for “Default region name” and “Default output format” choices.

Visual of preferred AWS CLI settings

The AWS CLI configuration is squared away. Now, we also need to make sure that the Docker CLI runs. Typing “docker ps” is a simple way to check it.

Screenshot of the “docker ps” command in Terminal

Currently, the output displays no containers. We haven’t created any yet, but soon we will. We’ve gathered our materials, reviewed the instructions and tested our tools. Let’s begin!

NGINX Logo

Step One: Create your image with NGINX and add a file that will tell the time and date of the container’s deployment.

This project provides exposure to using NGINX (pronounced: “Engine X”). What makes NGINX so popular is its versatility. Based on open-sourced software, NGINX can act as a high-powered web server, a load balancer and a proxy server for email. On its website, NGINX states that it also can be used to stream media and serve as a reverse proxy, among other functions.

The guidance provided on NGINX’s “Deploying NGINX and NGINX Plus on Docker” article served as a great reference for this adventure.

With that being said, pull the latest NGINX image from the registry.

Image of the “docker pull nginx: latest” command and its output

Create a new directory for your NGINX file, then change it.

Visual of creating a directory and changing into it

After changing directories, create a new HTML file.

Image of creating a new directory and a new file

Go to the Integrated Developer Environment (IDE) of your choice to modify this new HTML file. I chose to include a welcoming message to the page viewers, in addition to the deployment’s timestamp.

Screenshot of the “index.html” edited in Visual Studio Code

Step Two: Deploy your container with port 8000 open.

Toggle back from your IDE to the terminal and enter the “docker run” command with the following specifications:

· The name of the container with the NGINX image. In this instance, the name of the container is “dcw102321nginx.”

· -d: Indicates running the container on the “detached” mode.

· -p: Indicates the port assignments. According to the referenced NGINX article, this part of the configuration “tells Docker to map the ports exposed in the container by the NGINX image (port 80) to the specified port on the Docker host. The first parameter specifies the port in the Docker host, the second parameter is mapped to the port exposed in the container.”

The output of the “docker run” command with specifications for deployment

Immediately after hitting the “Return” or “Enter” key, the long form of the container ID appears directly underneath the “docker run” command.

Next, ensure the creation of the container by running the “docker ps” command.

Verification of the created container

We’ve confirmed the container’s presence. While we’re at it, we should take a second to validate the contents of the HTML file by running the “cat” command.

Results of the concatenation, aka “cat,” command on the “index.html” file

After we’ve authenticated the file contents, it’s time to check our work! Go to your web browser of choice and enter the following address to view the page on the localhost: http://localhost:8000

The static website was successfully deployed! Its greeting message, the date and time of the launch appear on the screen.

Display of the static website via the localhost

Step Three: Save the container data in an S3 bucket.

AWS S3 Logo

Go back to the terminal to begin creating an S3 bucket through the AWS CLI.

An S3 bucket is a cloud-based storage container. Some of its capabilities include data backup and restoration, the operation of cloud-native applications and data archiving. At their core, S3s store objects such as data and corresponding metadata with high availability for their users. Due to its service capacity, we will use an S3 bucket to store our static website’s data.

To create the S3 bucket, type the following command with your specific details:

aws s3 mb s3://<type-your-bucket-name>

After typing this command, you’ll see a “make_bucket” return that includes your bucket’s name.

The output of entering the command to create an S3 bucket from the AWS CLI

For the following step, you will need to refer to the path of the “index.html” file created for this project. Type the following command, which includes the file’s directory:

aws s3 cp <“type-path-to-the-index-file”> s3://<type-your-bucket-name>

An “upload” result will appear.

Visual of the “aws s3 cp” command to copy data into the S3 and its result

It’s time to check for progress! Go over to the S3 area of the AWS Management Console to verify the creation of the S3 bucket.

Image of the S3 bucket data displayed on the AWS Management Console

So far, so good. A review of the console validates the creation of the S3 bucket from the AWS CLI. To see more details regarding our newly — created S3 bucket, click on the “Properties” tab.

Image of the S3 bucket’s URL

The information located on the “Properties” tab includes an “object URL.” With your preferred browser, go to this address to check our work for the final time.

Image of the output from the CLI — created S3 bucket

Project completed! We created an image with NGINX, deployed the container with port 8000 opened and saved the container data into an S3 bucket. I recommend deleting any unnecessary AWS resources to prevent incurring extra charges on your account.

On to the next challenge!

Thanks for reading.

More content at plainenglish.io

--

--

Follow the growth of a career switcher who transitioned from public policy analysis to Cloud.