DEV Community

Kelechi Ogbonnaya
Kelechi Ogbonnaya

Posted on • Edited on

HNG DevOps Stage 0 - Setting Up Nginx

Introduction

And the HNG 12 Internship is a go! As the first task for the HNG 12 DevOps track(Stage 0), we were told to configure nginx to serve a custome html page. Though it seemed fairly easy at first but through this task I was able to reinforce my understanding of web server configurations and nginx in particular.

How I completed the task:

1. Setting Up a Cloud Server

I needed the site to be publicly accessible so i configured a cloud based Ubuntu server using Azure. I used azure because that is what I am mainly familiar with. I made use of the azure cli, how to install the cli locally - azure cli.
To create the virtual machine:

az vm create --name hng-static-site --resource-group hng --size Standard_B1ls --image Ubuntu2204 --nsg-rule SSH --admin-username <your_username> --admin-password <your_password>
Enter fullscreen mode Exit fullscreen mode

To Open Port 80:

az network nsg rule create --resource-group hng --nsg-name hng-static-siteNSG --name Allow-HTTP --protocol tcp --priority 1001 --destination-port-ranges 80 --access Allow --direction Inbound
Enter fullscreen mode Exit fullscreen mode

Then SSH into the Server:
ssh <username>@<public_ip>

2. Installing Nginx

I then Updated packages and installed nginx:

sudo apt update && sudo apt install -y nginx
Enter fullscreen mode Exit fullscreen mode

To check if nginx started correctly:

sudo systemctl status nginx
Enter fullscreen mode Exit fullscreen mode

It was already running, but if it wasn't I would have used the following command to start it:

sudo systemctl start nginx
Enter fullscreen mode Exit fullscreen mode

3. Configuring the Custom HTML Page

I navigated to the default web directory and created an index.html and styles.css(Just for a bit of style) files:

sudo nano /var/www/html/index.html
sudo nano /var/www/html/styles.css

The Code for the index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>HNG Static Site</title>
</head>
<body>
    <div class="container">
        <h1>Welcome to DevOps Stage 0 - Ogbonnaya Kelechi/Chancellor007</h1>
    </div>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

The Code for the styles.css:

html, body{
    height: 100%;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    background-color: #f4f4f4;
}


.container{
    width: 100%;
    text-align: center;
    height: 100px;
}
Enter fullscreen mode Exit fullscreen mode

4. Modified Permissions and Ownership of web file directories

To enable nginx have access to the web server files I changed the permissions of the directory:

sudo chmod -R 755 /var/www/html
Enter fullscreen mode Exit fullscreen mode

And then changed the Ownership of the files:

sudo chown -R www-data:www-data /var/www/html
Enter fullscreen mode Exit fullscreen mode

5. Restart Nginx and test configuration

After saving everything, I restarted nginx:

sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

And then tested it by opening my browser and navigating to:

http://<ip_address>
Enter fullscreen mode Exit fullscreen mode

It worked.

Challenges and How I Overcame Them

1. Permission issues while editing Html

I got permission errors while i was editing the index.html file. I had to use "sudo" with the command in other to edit the file in a file editor. This really stressed the importance of privilege management.

2. Blocked ports

I initially forgot to configure the network security group to open port 80 so i wasn't able to access my site. I fixed this by configuring the nsg to open port 80 in other to allow http requests.

Reflections on the task

Completing this task helped me understand and reinforce my knowledge of:

  • Setting up and configuring web servers

  • Troubleshooting common issues in server configurations

  • Embracing a Problem solving Mindset
    This experience aligns with my personal goal of becoming a DevOps Engineer by strengthening my foundational knowledge in server administration and automation. It was a truly rewarding experience and I look forward to tackling more tasks in this internship.

For companies looking to hire the best DevOps professionals, Look no further
HNG alumni have the ability to thrive in high-pressure situations, deliver high-quality products and have a wide-array of practical skills.

Explore elite HNG talents available for hire:
DevOps Engineer
Cloud Engineers
Site Reliability Engineers
Platform Engineers
Infrastructure Engineers
Kubernetes Specialists
AWS Solutions Architects
Azure DevOps Engineers
Google Cloud Engineers
CI/CD Pipeline Engineers
Monitoring/Observability Engineers
Automation Engineers
Docker Specialists
Linux Developers
PostgreSQL Developers

Top comments (0)