Configuring NGINX on a Fresh Ubuntu Server: My Experience
Setting up NGINX on a fresh Ubuntu server is a fundamental task for any DevOps engineer. Recently, I had to configure NGINX on a brand-new Ubuntu instance and serve a custom HTML page as the default page. While the process is straightforward, I encountered some challenges and learned a few valuable lessons along the way. In this blog post, I’ll share my experience, step-by-step setup, and troubleshooting tips.
🚀 Setting Up the Environment
To start, I spun up a new Ubuntu server instance on Google Cloud Platform (GCP) Compute Engine. After provisioning the server, I connected to it via Google Cloud SSH:
If you're using any other cloud platform, you can SSH into it using the IP address:
ssh ubuntu@your-server-ip
🚀 Installing NGINX
NGINX is not installed by default on Ubuntu, so the first step I did was to update the package list and install it:
sudo apt update
sudo apt install nginx -y
Once installed, I checked the status to ensure it was running:
sudo systemctl status nginx
It wasn’t running, so I started and enabled it to run on boot:
sudo systemctl start nginx
sudo systemctl enable nginx
🚀 Creating a Custom HTML Page ✨
NGINX serves files from /var/www/html
. So to customize the default page, I created an index.html
file inside this directory:
sudo vim /var/www/html/index.html
NB: We have two major text editors which we use on the terminal; Vim and Nano (I just prefer using Vim).
I added a simple HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome To My HTML Page!</title>
<style></style>
</head>
<body>
<div style="font-size: 8rem;">Welcome To DevOps Stage 0 - Fave💕✨</div>
</body>
</html>
After saving the file, I needed to restart NGINX for the changes to take effect:
sudo systemctl restart nginx
🚀 Configuring NGINX to Serve the Custom Page
In some cases, the default NGINX configuration might not serve the custom HTML page correctly. So I verified that the default server block in /etc/nginx/sites-available/default
was set up properly:
sudo nano /etc/nginx/sites-available/default
I ensured the configuration looked like this in the default file:
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/html;
index index.html;
server_name _;
location / {
try_files $uri $uri/ =404;
}
}
After saving the changes, I tested the configuration:
sudo nginx -t
Everything was fine, so I reloaded NGINX:
sudo systemctl reload nginx
🚀 Testing the Setup
To verify that everything worked correctly, I accessed the server’s public IP address in a web browser:
http://34.59.6.191
I was greeted with my custom HTML page!! 😌💅
🚀 Challenges I Faced
While the process might seem smooth, I encountered some challenges and I had to troubleshoot:
-
NGINX not starting: Running
sudo nginx -t
helped identify if I missed any steps or configurations. - Page not updating: Clearing the browser cache or restarting NGINX usually fixed this.
- Firewall blocking requests: I had to edit the firewall rule on my instance to only serve port 80. Ensuring the firewall allowed HTTP traffic solved the issue.
🚀 References:
🚀 Conclusion
Configuring NGINX on a fresh Ubuntu server to serve a custom HTML page was a great learning experience. While the setup process was mostly smooth, troubleshooting minor issues reinforced my understanding of how NGINX handles requests and configurations. If you're setting up a web server for the first time, following these steps should help you get started quickly.
Thanks 😌🔥
Top comments (1)
This is quite a nice Article, very straightforward as well.
I haven't worked with GCP so far but I did with AWS (EC2), so it should be the same thing really, I had to setup a website using Express and other technologies, Nginx is usually pretty easy to use but I found myself stuck in a Problem that wasted like 4 hours or so to get it fixed, it's
File Permissions
All I did was just git clone my project to the EC2 instance, Nginx's job was 2 things: Forward requests to the API (if the URL was formated in a certain way), or serve static files (like images or Front-end build files etc)
The issue was that Nginx's "worker" did not have access to those static files, so the website did not function at all because a permission issue was occuring everytime it tries to fetch something from that static files folder, the static files were only accessible by "my_username" not by the worker "www-data" (it's on the 1st line in
/etc/nginx/nginx.conf
)I only found out about the problem by doing this command (it inspects the latest lines in the errors log file for Nginx)
tail -f /var/log/nginx/error.log
I had to figure out a way to allow access by anyone on those static files, otherwise it would have never been fixed, it was quite annoying but yeah be aware of this specific issue if you ever encounter it.
Stories aside I think that you should look up:
good luck bud :)