My HNG journey. Stage Zero: How to Deploy a Static Webpage Using Nginx

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 🚀