Web Application Deployment with Docker Containerization

A Beginner’s Guide to Creating a Custom Webpage for a Docker Container

Published in

Women in Technology

8 min readJun 21, 2023

Docker Logo on Edited Adobe Free Stock Image

Welcome, I am so glad you are here! In this article, we will be exploring the foundational steps to creating a Docker Container, then adding a custom Apache2 Webpage. This is a great beginner’s project to get your toes a little wet with Docker.

A little background //

Docker is an open platform designed to assist developers in building, sharing and running applications.

Docker Container is the compiled software, packaged together with everything it needs to appropriately run.

Key Benefits of transitioning to Docker Containerizing:
Elimination of repetitive tasks with streamlined deployment. Increased consistency, portability, isolation, reproducibility, version control, scalability, and overall improved collaboration.

Scenario //

A dynamic technology company offers innovative web solutions to its clients. As part of their software development process, they have decided to adopt containerization using Docker to streamline their web application deployment. Docker provides a flexible and efficient way to package, distribute, and run their applications in isolated containers, ensuring consistency and portability across different environments.

Objective //

Run a Docker Ubuntu container running detached on port 80
Note: Keep in mind that there are different Ubuntu images. Depending on the one you use, you may have to install some tools that come standard in other images.
Using BASH shell update all packages within the container
Using BASH install Apache2 on the Ubuntu container
Add a custom webpage.
Verify you can reach the webserver from your browser.

To follow along with this project you will need //

Access to AWS
Visual Studio Code installed on OS
Attention to Details

Step 1: Creating our EC2 //

To begin, after you have logged into your AWS (Amazon Web Server) Account, head to your EC2 Dashboard. We will need to create an EC2 Instance.

Select Free-tier Ubuntu Server 22.04 LTS

Keep your Instance Type as t2.micro Free tier eligible.
Create a new key pair

Remember to note path of .pem key on your OS

Allow all traffic
Select Launch

Note: Allowing all Traffic for Demonstration Purposes

Back on our EC2 Dashboard, we can verify that our EC2 is running, and rename our EC2. Naming will help when configuring our SSH connection in VS Code.

Step 2: Configure SSH File in Visual Studio Code //

If you do not have VS Code installed you can refer to this article with great resources to help get you ready for the rest of this project.

Successfully Setting up Visual Studio Code

A Beginner’s Guide to Setting up a SSH Connection & GitHub to VS Code with a little Docker fun!

medium.com

Open VS Code, locate the two arrow icon in the lower left had corner.

Select the icon and it will open a new remote window

Select Connect to Host

Select Configure SSH Hosts

Select the first path: C:\Users\yourusername\.ssh\config

The .ssh configuration file will now open. We will configure it with our EC2. (I recommend having a tab open with your AWS Account pulled up ready to access your EC2 information, or split screen so you have it side-by-side.)

Note: Be aware of case sensitivity, spelling, and punctuation. Even an extra space at the end can cause connectivity issues.

After you have updated, file save and close. Once again, navigate back to the lower left hand blue icon and click it once more. Follow the same steps as before, except instead of configuring, you should see FosterWk16 to ssh into.

Select FosterWk16 (You would select what configured)

Select Linux

Select Continue when prompted

Once connected, you should be brought to a Welcome screen. You can select the “x” to close the welcome message. If you look at the lower left hand icon, it now shows SSH: FosterWk16.

Step 3: Update & Install Docker//

Open a new Terminal from the top menu.

A terminal is now open at the bottom portion of your screen.

Update the Instance

sudo apt update

Note: you can adjust the size of your terminal by scrolling over the top line. You can also zoom in or out by going under View from the top menu bar.

Install Docker

sudo apt install docker.io

Type “y” when prompted to initiate install

You can verify two ways. The first way is with a quick command, and the other is referred to as a Hello World test, which to be honest is my favorite way!

sudo docker version

And for fun let’s run:

sudo docker run hello-world

Just something about that Hello World makes me smile every time!

Step 4: Create & Run Docker Container //

For this section I wanted to provide this great reference to help create your commands, as I referred to it and found it absolutely beneficial.

docker exec

docker exec: The `docker exec` command runs a new command in a running container. The command started using `docker…

docs.docker.com

Ok, it’s time to create our Ubuntu detached Docker Container on -p (Host Port to Container's Port) 80:80.

Create & name container while assign ports

sudo docker run -dit --name wk16-container -p 80:80 ubuntu

Success! ***Note:*** *A detached container, means the container will be running in the background allowing the terminal to remain open for use.*

Verify the container

sudo docker container ls

Step 5: Connect to Container & Install Apache2 //

Referring back to the documentation for this section, I provided. We will be connecting to the container by running docker exec -it command followed by /bin/bash which will allow us the ability to update then install Apache2 to the container, using bash shell.

sudo docker exec -it wk16-container /bin/bash

Update container

apt update

Install Apache2

apt install -y apache2

Note: adding in the -y will automatically install without us having to type “y” to confirm install

Start Apache2 service:

service apache2 start

When starting I ran into a message: Could not reliably determine the server’s fully qualified domain name, using 172.17.0.2. Set the ‘ServerName’ directive globally to suppress this message.

This is not an error it is just a warning and you can safely ignore it. It means that ServerName is not set so it will assume machine IP as the same.

Verify Apache Service:

service apache2 status

Verify webpage via EC2 Instance Public IP: Service Port

<instance public IP>:<service port>

Step 6: Customize Webpage//

Before we come to an end of this brisk foundational walk-through let’s tackle a little bit of customization of our Apache2 Ubuntu Webpage. We will be continuing inside our container on VS Code Terminal, as root.

I have provided two options for customization. Please review both options in full before running commands.

If you want to explore editing and further customization I recommend trying Option 2, but if you want to be done, Option 1 is your quickest way out.

Option 1:

Change Directory
Run echo

cd /var/www/html/

echo "Week 16 Docker Project" > index.html

Option 2:

Install Vim on your container

apt-get install vim

Select “y” when prompted
Change Directory
Run ls to view html files

cd /var/www/html/

ls

vim index.html

Hit “I” to insert into the script
Navigate using the arrow keys, tab keys
Update at will.
I made internet header changes, and added a brief description of what we achieved.

You can essentially change how little or how much you would like. Feel free to play around.

Hit “ESC” then :wq to save and exit.

Success!! You can see that I updated the top portion of the webpage

This project brought right back to my first LUIT Project.

Installing an Apache2 Server on Ubuntu 18.04 LTS Server & More

As a Cloud Engineer, I started this program (Level Up In Tech) with little to no background working with Linux, and…

medium.com

Unbelievable growth between now and then! Thank you so much for following along. I wish you the best on your tech journey! I encourage you to keep chasing your Cloud DevOp goals, and challenge yourself every step of the way. Network and trouble shoot with peers will only further your knowledge. See you soon with another project!