DEV Community

Cover image for How I Configured NGINX on a Fresh Ubuntu Server: My Experience
Fave😌✨
Fave😌✨

Posted on

4 1 2

How I Configured NGINX on a Fresh Ubuntu Server: My Experience

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
Enter fullscreen mode Exit fullscreen mode

🚀 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
Enter fullscreen mode Exit fullscreen mode

Once installed, I checked the status to ensure it was running:

sudo systemctl status nginx
Enter fullscreen mode Exit fullscreen mode

It wasn’t running, so I started and enabled it to run on boot:

sudo systemctl start nginx
sudo systemctl enable nginx
Enter fullscreen mode Exit fullscreen mode

🚀 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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

After saving the file, I needed to restart NGINX for the changes to take effect:

sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

🚀 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
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

After saving the changes, I tested the configuration:

sudo nginx -t
Enter fullscreen mode Exit fullscreen mode

Everything was fine, so I reloaded NGINX:

sudo systemctl reload nginx
Enter fullscreen mode Exit fullscreen mode

🚀 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
Enter fullscreen mode Exit fullscreen mode

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 😌🔥

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (1)

Collapse
 
0xw3ston profile image
Youssef El Idrissi

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:

  • Load Balancing
  • Reverse Proxy
  • Multi-subdomain setup (this one isn't that important unless needed)
  • HTTPS configuration using Certbot
  • Rate Limiting (+ fail2ban)

good luck bud :)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more