DEV Community

Cover image for Setting Up NGINX on Ubuntu Server: My DevOps Stage Zero Task Experience
Lucy Alfred Joshua
Lucy Alfred Joshua

Posted on

Setting Up NGINX on Ubuntu Server: My DevOps Stage Zero Task Experience

Introduction

Deploying a web server is one of the foundational skills for any DevOps engineer. As part of the HNG DevOps Internship (Stage 0), I was tasked with setting up and configuring NGINX on a fresh Ubuntu server. This hands-on project allowed me to explore key aspects of server management, web server configuration, and troubleshooting.


The Task Overview

  1. Install and configure NGINX on a fresh Ubuntu server.
  2. Serve a custom HTML page with the message: “Welcome to DevOps Stage 0 - [Your Name]/[SlackName]”.
  3. Document the process in a blog post, reflecting on challenges, solutions, and personal growth.

My Approach to Completing the Task

Step 1: Setting Up the Ubuntu Server on DigitalOcean
I started by creating a fresh Ubuntu server on DigitalOcean. Here’s how I did it:

1. Sign in to DigitalOcean:

If you don’t have an account, you can create one at DigitalOcean.

2. Create a New Droplet:

  • Go to the Create section and select Droplets.

Create Droplet

  • Choose Ubuntu 20.04 (or any preferred version).
  • Select the smallest plan (it’s sufficient for this task).
  • Add your SSH key for secure access (or use a password). You can generate an ssh key-pair on your local machine wih: ssh-keyen. The directories where your public and private keys are saved will be displayed, cat into your public key and copy.

Generate key-pair

  • Choose a data center region close to your location for faster access.
  • Click Create Droplet.

Droplet

3. Access the Droplet:

Once the droplet was created, I connected to it via SSH on my local machine:

ssh root@your_droplet_ip
Enter fullscreen mode Exit fullscreen mode

ssh on local machine

Step 2: Installing NGINX
Next, I installed NGINX using Ubuntu’s package manager, apt. Here’s how I did it:

1. Update the Server:

Before installing NGINX, I updated the server to ensure all packages were up to date:

sudo apt update && sudo apt upgrade -y
Enter fullscreen mode Exit fullscreen mode

2. Install NGINX:

I installed NGINX with the following command:

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

3. Start and Enable NGINX:

After installation, I started the NGINX service and enabled it to run on boot:

sudo systemctl start nginx
sudo systemctl enable nginx
Enter fullscreen mode Exit fullscreen mode

NGINX status

4. Verify NGINX Installation:

To confirm that NGINX was running, I opened my browser and visited http://<your_droplet_ip>. The default NGINX welcome page appeared, indicating a successful installation.

NGINX page

Step 3: Configuring the Custom HTML Page
The task required serving a custom HTML page as the default page. Here’s how I configured it:

1. Navigate to the Web Directory:

I moved to the default directory for web content:

cd /var/www/html
Enter fullscreen mode Exit fullscreen mode

2.Create the Custom HTML File:
I opened the index.html file with a text editor (I used nano):

sudo nano /var/www/html/index.html
Enter fullscreen mode Exit fullscreen mode

3. Add the Custom Message:

I added the following HTML code to the file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #2C3E50;
            text-align: center;
            padding: 50px;
        }

        h1 {
            color: #4CAF50;
            font-size: 2.5em;
        }

        h3 {
            color: white;
            font-size: 1.5em;
        }

        p {
            color: #333;
            font-size: 1.2em;
        }
    </style>
</head>
<body>
    <h1>Welcome to DevOps Stage 0</h1>
    <p><h3>[Your Name]/[SlackName]</h3></p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

I replaced [Your Name] and [SlackName] with my actual name and Slack username.

4. Save and Exit:

I saved the file and exited the editor (CTRL+X, then Y, then Enter).

5. Restart NGINX:

To apply the changes, I restarted NGINX:

sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

6. Access the Custom Page:

I revisited http://<your_droplet_ip> in my browser, and the custom HTML page was displayed with the correct message.

Custom page


Challenges I Faced

1. Permission Issues
When I first tried to edit the /var/www/html/index.html file, I ran into permission issues. I resolved this by using sudo to gain the necessary privileges: sudo nano /var/www/html/index.html

2. Task Requirements
To meet the task requirements, I added the index.html file located at /var/www/html/index.html.

References

As part of this task, I referenced the following resources to deepen my understanding of DevOps roles:

DevOps Engineers

Cloud Engineers

These links provided insights into the responsibilities, skills, and career paths for DevOps professionals.

Final Thoughts

Completing this task provided a good foundation in web server setup and configuration, key skills for any DevOps engineer. More importantly, it highlighted the power of hands-on experience in learning.

For anyone starting in DevOps, I highly recommend working on similar projects. The process of troubleshooting and fixing issues will help you develop confidence and critical thinking skills.

Top comments (0)