DEV Community

Ben G
Ben G

Posted on

HNG DevOps Stage 0 - Setting Up Nginx on an Azure Virtual Machine

The HNG internship 2025 just kicked off. As an introductory task, one was supposed to configure an nginx server to serve a custom HTML page on an ubuntu system. This exercise reinforced my knowledge of web server configurations and nginx especially.

Step 0: Setting up a virtual machine.

Azure was my go to platform. you can setup using the web interface on the portal or use the azure cli. for the
For the cli the command to setup the virtual machine:

az vm create --name myVm --resource-group hng --size Standard_D2s_v3 --image Ubuntu24.04 --nsg-rule SSH --admin-username <your_username> --admin-password <your_password>
Enter fullscreen mode Exit fullscreen mode

Don't forget to open port 80:

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

Next set up the ssh keys for your connection:

az vm create \
   --resource-group hng \
   --name myVm \
   --image Ubuntu2204\
   --admin-username <azureuser> \
   --ssh-key-value ~/.ssh/id_rsa.pub
Enter fullscreen mode Exit fullscreen mode

copy the private key to your ssh folder and change the permissions to said file:

chmod 400 <your private key>.pem
Enter fullscreen mode Exit fullscreen mode

SSH into the server. Answer the prompts as needed.

ssh -i ~/.ssh/<your-private-key> <username>@<vm-public-ip>
Enter fullscreen mode Exit fullscreen mode

Step 1: Set up the nginx server

Update your system and install nginx:

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

Check the status and if the install worked correctly:

sudo systemctl status nginx
Enter fullscreen mode Exit fullscreen mode

Step 2: configure the html pages

open the html file with an editor of your choice:

sudo vim /var/www/html/index.html
Enter fullscreen mode Exit fullscreen mode
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello, World!</title>
</head>
<body>
<p>Welcome to DevOps Stage 0 - Benson Gikonyo/Benson G</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step 3:Modify ownership and file permissions:

modify permissions:

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

modify ownership:

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

Finally Restart Nginx:

sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

type your ip in your web browser to see your finished result:

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

Challenges Faced:

File permissions and ownership were a bit of a challenge for me, and it improved my understanding about nginx.

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

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 Engineers
Cloud Engineers
Site Reliability Engineers

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more