Deploying NGINX with Vagrant & Making It Publicly Accessible

📌 Introduction

As part of the HNG DevOps Stage 0 challenge, I successfully deployed an NGINX web server on a fresh Ubuntu machine using an Azure Virtual Machine (VM). Unlike my initial Vagrant-based deployment, this approach ensures full-time availability and public accessibility over the internet.

This blog post documents the full process, challenges faced, and how I overcame them.

1️⃣ Setting Up the Environment

🖥️ Prerequisites

Before getting started, ensure you have the following:

✔️ An Azure Account (for deploying the VM)

✔️ SSH Client (for connecting to the VM)

✔️ A basic understanding of NGINX and Ubuntu

2️⃣ Creating the Azure Virtual Machine (VM)

1️⃣ Go to Azure Portal and create a new Ubuntu 20.04 LTS VM.

2️⃣ Choose the right instance type (Standard B1s is a good starting point).

3️⃣ Enable SSH login and allow HTTP (port 80) traffic.

4️⃣ Assign a Public IP Address for remote access.

5️⃣ Deploy the VM and connect via SSH:

ssh <username>@102.37.154.154

3️⃣ Installing and Configuring NGINX

After logging into the Azure VM, I installed NGINX with:

sudo apt update -y
sudo apt install nginx -y
sudo systemctl start nginx
sudo systemctl enable nginx

To confirm NGINX was running, I checked its status:

sudo systemctl status nginx

✔️ Result: "Active (running)" ✅

4️⃣ Creating the Custom Welcome Page

Next, I customized the default NGINX page by modifying /var/www/html/index.html:

echo '<html>
<head>
  <title>Welcome</title>
  <style>
    body { display: flex; justify-content: center; align-items: center; height: 100vh; font-family: Arial, sans-serif; }
    h1 { text-align: center; }
  </style>
</head>
<body>
  <h1>Welcome to DevOps Stage 0 - Rowland Adimoha/Rowjay</h1>
</body>
</html>' | sudo tee /var/www/html/index.html > /dev/null

Then, I restarted NGINX to apply the changes:

sudo systemctl restart nginx

Now, my website was ready to be accessed via the public IP!

5️⃣ Configuring Azure Firewall for Public Access

By default, Azure blocks port 80. To allow external access, I had to update the Network Security Group (NSG):

1️⃣ Go to Azure Portal → Virtual Machine → Networking.

2️⃣ Add an inbound rule:

Source: Any
Source Port Ranges: *
Destination: Any
Service: Custom
Destination Port Ranges: 80
Protocol: TCP
Action: Allow
Priority: 310 3️⃣ Save the rule, and my site became accessible from anywhere on the internet at:

👉 http://102.37.154.154/

6️⃣ Testing the Deployment

🔹 Browser Test: Visiting http://102.37.154.154 displayed:

"Welcome to DevOps Stage 0 - Rowland Adimoha/Rowjay"

🔹 NGINX Header Check:

I confirmed my server was serving requests properly:

curl -I http://102.37.154.154

✔️ The response contained "Server: nginx", confirming that NGINX was active.

🔹 Verifying Uptime:

I ran:

sudo systemctl status nginx

✔️ NGINX was running without errors. ✅

🚀 Challenges Faced & Solutions

❌ Issue 1: Website Not Loading Externally

Problem: After configuring NGINX, I could access the site locally but not from other devices.

Solution: The issue was port 80 being blocked in Azure NSG. After adding an allow rule for port 80, the site became publicly accessible.

❌ Issue 2: NGINX Not Restarting After Reboot

Problem: NGINX didn’t automatically restart after VM reboots.

Solution: I ran:

sudo systemctl enable nginx

✔️ This ensured NGINX starts automatically on boot.

🎯 Lessons Learned & How This Contributes to My DevOps Growth

💡 1. Cloud Infrastructure Management

This task helped me understand Azure VM deployment and network configurations for web applications.

💡 2. Debugging & Troubleshooting Network Issues

I learned how to troubleshoot cloud firewall rules to enable public access.

💡 3. Web Server Automation

I automated NGINX installation and web page deployment using shell scripts.

🔗 References (Cited Properly)

As I continue on this DevOps journey, I look forward to exploring career opportunities in the field. If you're looking for skilled DevOps Engineers, check out: