Introduction
Over the past few years, HNG internships have always been talked about with a certain level of fear and respect. "A grueling and unforgiving experience", some would say.
This year, I have decided to give the DevOps track a try. 10 stages of tasks to be covered and I intend to document my entire journey.
Requirements
The requirements are straightforward;
The webpage must be hosted on a cloud-based virtual machine
The webpage must be publicly accessible
The webpage must utilize a web server like Nginx or Apache
The webpage must include The intern's name, Slack username and email address
The webpage must include a button that links back to the official HNG website
Prerequisites
Skills/Knowledge: Basic understanding of Docker, Nginx, and Linux CLI.
Tools/Software: Docker, Nginx, AWS.
Let's get started
Set Up Virtual Machine
I am going to be using AWS EC2 for this step but feel free to use any cloud platform of your choice.
I'm opting for this EC2 specification because it's a simple static web server:
- Instance Name:
My Web Server - AMI:
Amazon Linux 2023 (Free Tier) - Instance Type:
t2 micro - Storage:
Default 8GB gp3 - Networking:
Default VPC and subnet - Security Groups:
Allow HTTP, HTTPS access from anywhere, and SSH access from my IP
Make sure to create a new key-pair and save it securely in case you want to SSH into the instance.
Expand the Advanced Details panel, Scroll to the bottom to find User Data and the paste in this script.
#!/bin/bash
# Update software
yum update -y
# Install Docker
yum install docker -y
service docker start
usermod -aG docker ec2-user
# Install Git
yum install git -y
# Clone the repository
git clone https://github.com/Ravencodess/static-webpage-stage-0.git
cd static-webpage-stage-0
# Build the Docker image
docker build -t my-web-app .
# Run the container and map port 80 on the server to port 80 inside the container
docker run -d -p 80:80 my-web-app
This script pulls the application code from my public Github repo and launches the application on an Nginx-based docker container and maps the port 80 on the server to port 80 inside the container. This allows us to access the static webpage on our browser by simply accessing the public IP address of our server.
Let's take a closer look at the contents of the repository.
The HTML, CSS, and JS folders contain the necessary files, stylesheets and script needed to create a functional webpage and can be edited and configured anyhow you see fit.
I want to pay more detail to the contents of the Dockerfile and nginx.conf file
Dockerfile
The Dockerfile performs the following steps
It uses the latest nginx image from Docker Hub as the base image for the application.
It removes the default nginx.conf configuration file and replaces it with our modified conf file.
It then copies the html,css and javascript files into the /usr/share/nginx folder which Nginx would use to serve the web page.
Finally it documents that port 80 is exposed and starts the container.
nginx.conf
This file sets up Nginx to listen on localhost port 80 and sets up redirection for all static assets the webpage would need.
Your instance should have launched successfully and passed status check by now, locate the public IP address or DNS, and paste it in a new browser tab.
Your webpage should be live.
Happy Launching 🚀
Top comments (3)
Good article. One thing I would recommend is syntax highlighting and making your pictures code blocks. This generally helps other developers use this easier.
dev.to/hoverbaum/how-to-add-code-h...
Thank you Julian, This would come in very helpful with my next articles.
Impressive. Keep it up mate