DEV Community

Cover image for Setting Up NGINX on Ubuntu: My DevOps Stage 0 Journey
Precious Edmund
Precious Edmund

Posted on

Setting Up NGINX on Ubuntu: My DevOps Stage 0 Journey

Setting Up NGINX on Ubuntu: My DevOps Stage 0 Journey

Introduction

As part of the HNG DevOps Stage 0 task, I was required to install and configure NGINX on a fresh Ubuntu server. The goal was to create a custom webpage accessible via a public IP address, demonstrating my ability to work with basic web server configurations. Here's a detailed walkthrough of my approach, challenges faced, and what I learned during the process.


Step 1: Setting Up the Server

I chose Microsoft Azure Platform to provision a virtual machine with the following specifications:

  • OS: Ubuntu 22.04 LTS
  • CPU/RAM: 1 vCPU, 1GB RAM
  • Public IP Address: Assigned during setup.

To access the server, I used SSH with the following command:

ssh username@<server-ip>
Enter fullscreen mode Exit fullscreen mode

Once connected, I ensured my system was updated using:

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

Step 2: Installing and Configuring NGINX

The first step was to install the NGINX web server:

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

I verified the installation by checking the status:

sudo systemctl status nginx
Enter fullscreen mode Exit fullscreen mode

To ensure my server was accessible, I allowed HTTP traffic through the firewall:

sudo ufw allow 'Nginx HTTP'
sudo ufw enable
Enter fullscreen mode Exit fullscreen mode

Step 3: Creating the Custom HTML Page

The task required me to create a custom webpage with the message:

Welcome to DevOps Stage 0 - [Your Name]/[SlackName]
Enter fullscreen mode Exit fullscreen mode

I navigated to the default NGINX web root directory:

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

Using a text editor, I created and edited the index.html file:

sudo nano index.html
Enter fullscreen mode Exit fullscreen mode

I added the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DevOps Stage 0</title>
</head>
<body>
    <h1>Welcome to DevOps Stage 0 - [Your Name]/[SlackName]</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Finally, I restarted NGINX to apply the changes:

sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

Step 4: Testing the Configuration

To verify the setup, I opened a browser and navigated to:

http://<server-ip>
Enter fullscreen mode Exit fullscreen mode

The custom HTML page loaded successfully, displaying the required message:
"Welcome to DevOps Stage 0 - [Your Name]/[SlackName]".

I also tested accessibility from another machine to ensure it worked publicly.


Challenges Faced and Solutions


Challenge 1: SSH Connection Issues

Initially, my public IP did not load the default NGINX page. After troubleshooting, I realized that Azure blocks inbound HTTP traffic by default. I had to create an Inbound Rule in Azure Network Security Group (NSG) to allow HTTP traffic, which resolved the issue.

Http Inbound

Challenge 2: NGINX Default Page Displaying

After configuration, the default NGINX page still appeared. I realized the issue was with caching and cleared it by refreshing the browser.


Reflections and Learning

This task helped me solidify my understanding of:

  • Installing and configuring web servers like NGINX.
  • Troubleshooting common server and networking issues.
  • Managing basic Linux commands and file configurations.

It also emphasized the importance of documentation and attention to detail, as small misconfigurations could cause issues.


Conclusion

Completing this task was a rewarding experience and a step forward in my DevOps journey. It gave me hands-on exposure to web server setup and provided insights into how web infrastructure is managed.


References

I used the following links to gain additional insights and inspiration:


Screenshot

Image description

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more