As part of my journey into web development and DevOps practices, I recently undertook the task of installing and configuring the NGINX web server on an Ubuntu 24.04 server to host a simple HTML file. This experience not only enhanced my technical skills but also deepened my understanding of web server management. In this blog post, I will detail my approach, the challenges I faced, and how this task contributes to my professional goals.
Introduction
Nginx is an open-source web server application that enables the delivery of static and dynamic web applications or services on your server. Nginx works as a web server, load balancer, reverse proxy or HTTP cache to integrate with existing applications to form a stack or deliver web applications using your server IP address or domain.
This article explains how to install the Nginx web server on Ubuntu 24.04 and set up sample web applications to run on your server.
Install Nginx
The latest Nginx package is available in the default APT repositories on Ubuntu 24.04. Follow the steps below to update the server packages and install the Nginx web server application.
sudo apt update
sudo apt install nginx
- View the installed Nginx version on your server.
sudo nginx -version
Your output should be similar to the one below:
Manage the Nginx System Service
Nginx uses the nginx systemd service profile to control the web server run time, and processes on your server. Follow the steps below to enable the Nginx system service and manage the web server processes on your server.
- Enable the Nginx web server to start automatically at boot time.
sudo systemctl enable nginx
Output: Synchronizing state of nginx.service with SysV service script with /usr/lib/systemd/systemd-sysv-install.
Executing: /usr/lib/systemd/systemd-sysv-install enable nginx
- Start the Nginx service.
sudo systemctl start nginx
- View the Nginx service status and verify that it's running.
sudo systemctl stop nginx
Based on the above output value Active: active (running), Nginx is active and running on your server. If the service activity status includes Active: active (failed), stop any processes running on the HTTP port 80 and restart the nginx service.
- Verify Nginx Installation on Ubuntu 24.04 LTS
To Verify Nginx was installed correctly, open a web browser and type in the address bar
http://server_ip_address
Server block in Nginx
In Apache Web Server we have virtual hosts concept where we can define details of multiple web sites, similarly in Nginx we have Server blocks means block for each web site, let’s look into the default server block (/etc/nginx/sites-available/default) and then we will create our own site’s server block.
First, let's create simple index.html file under web server document root.
<!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>
<style>
body {
background-color: black;
color: green;
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
</style>
</head>
<body>
<h1>Welcome to DevOps Stage 0 - OGDMERLIN/OGDMERLIN</h1>
</body>
</html>
nginx uses
/var/www/html/yoursitefoldernamehereto serve your web content.
- Access our Nginx sites available default file and make changes to the file , so it can reference our html file.
sudo vi /etc/nginx/sites-available/default
save the file and exit.
- Test Configuration: Run the following command to check for syntax errors in your configuration:
sudo nginx -t
you should see an OK and successful message.
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
- Reload NGINX After making any changes, reload NGINX to apply them
sudo systemctl restart nginx
- Now access your website
Open your web browser and enter your server’s IP addrress. You should see your custom test page, indicating that your server block is live and functioning correctly.
Challenges Faced
I encountered a "404 Not Found" error when trying to access my hosted HTML file. This was a significant challenge as it halted my progress. After troubleshooting, I discovered that:
The HTML file was not located in the expected directory.
Permissions for the directory were not set correctly.
To overcome these challenges, I:
Verified the existence of my index.html file in the correct directory using ls /var/www/html/mywebsite/.
Adjusted file permissions with sudo chown -R www-data:www-data /var/www/html/mywebsite and sudo chmod -R 755 /var/www/html/mywebsite.
These steps resolved the issue, allowing me to successfully access my webpage.
Contribution to Learning and Professional Goals
This task has significantly contributed to my learning in several ways:
Understanding Web Servers: Gaining hands-on experience with NGINX has deepened my understanding of how web servers operate and their role in serving web applications.
Troubleshooting Skills: Encountering and resolving issues improved my troubleshooting skills—a critical aspect of any IT role.
Foundation for Future Projects: This experience laid a solid foundation for future projects involving web hosting, cloud services, and DevOps practices.
As I engage with this HNG learning experience, I am focused on reinforcing my existing knowledge and skills. This task aligns perfectly with my professional goals, particularly as I look to enhance my capabilities in roles such as DevOps Engineers, Cloud Engineers, Site Reliability Engineers, Platform Engineers, Infrastructure Engineers, Kubernetes Specialists, AWS Solutions Architects, Azure DevOps Engineers, Google Cloud Engineers, CI/CD Pipeline Engineers, Monitoring/Observability Engineers, Automation Engineers, Docker Specialists, Linux Developers, and PostgreSQL Developers.
Conclusion
In conclusion, hosting a basic HTML file on NGINX has been an enriching experience that enhanced both my technical skills and problem-solving abilities. As I continue on this path, I look forward to exploring more advanced topics such as containerization with Docker Specialists and orchestration with Kubernetes Specialists. Each step brings me closer to achieving my career aspirations in the ever-evolving field of technology.
For anyone looking to enhance their skills in web development or server management, I highly recommend diving into hands-on projects like this one! Feel free to adjust any part of this content further or let me know if you need additional changes!
Top comments (0)