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

#nginx #html #devops #ubuntu

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)

Read next

krishna7852 profile image

Nginx vs Traefik: Which Reverse Proxy is Right for You?

Krishna Bhamare -

maheshprajapati profile image

Understand SessionStorage and LocalStorage for Controlling Popups

Mahesh Prajapati -

burdettelamar profile image

Nokogiri Cookbook?

Burdette Lamar -

juniourrau profile image

🛥️ Docker Architecture: The Engine Behind Containerized Applications

Ravin Rau -