DEV Community

Cover image for Setting Up NGINX on Ubuntu
Ebenezer Emelogu
Ebenezer Emelogu

Posted on

Setting Up NGINX on Ubuntu

Introduction

What is NGINX?

NGINX (pronounced "Engine-X") is a powerful tool that helps websites run fast and handle many visitors simultaneously. It works like a smart traffic manager, ensuring web pages load quickly and smoothly.

Originally built as a web server, NGINX is now used for many things, like speeding up websites, balancing traffic, and acting as a security guard for online services. That’s why it’s trusted by some of the biggest websites in the world.

In this blog, we’ll explore what makes NGINX so useful in a simple way and also share my experience setting up and configuring NGINX on a fresh Ubuntu server.

I used Visual Studio Code for everything, including the Remote SSH feature, to connect to the Linux machine to simplify things. You can use any SSH client you choose, as it does not matter.


Setting up NGINX on a Linux Server

Server Setup

I started by provisioning a fresh Ubuntu server on Azure. Using SSH, I connected to the server and prepared it for NGINX installation. You can use any cloud provider for this or a local Linux machine if needed. Create a Linux VM on Azure.

Image description

This is my Linux machine on the VS Code terminal.


NGINX Installation

First, we need to make sure to update our packages, as this is a fresh Linux server, and we are using the Ubuntu distribution.

# Update your system
sudo apt update
Enter fullscreen mode Exit fullscreen mode

After updating packages, we need to install NGINX using the following commands:

# Install NGINX using CLI, press Y to allow it to install
sudo apt install nginx
Enter fullscreen mode Exit fullscreen mode

Image description


Verify Installation of NGINX

To verify the installation, check the NGINX version:

# Check NGINX version
nginx -v
# If output is -> nginx version: nginx/1.xx.x (ubuntu)
# You have successfully installed it.
Enter fullscreen mode Exit fullscreen mode

Image description

To see the status of NGINX:

sudo systemctl status nginx
Enter fullscreen mode Exit fullscreen mode

Image description

As we can see, NGINX is up and running.


Custom HTML Page

To test our NGINX installation, I opened the default HTML file in the /var/www/html/ directory and replaced it with the text below. You can do this with any text editor of your choice, such as Nano or Vim.

<!DOCTYPE html>
<html>
<head>
    <title>DevOps Stage 0</title>
</head>
<body>
    <table width="100%" height="100%" style="text-align: center; border-spacing: 0;">
        <tr>
            <td>
                <h1>Welcome to DevOps Stage 0 - Ebenezer Emelogu/Eben</h1>
            </td>
        </tr>
    </table>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

First, change the file ownership on the index.nginx-debian.html file, as by default, the current user will not be able to make write changes to this file.

You can give read and write permission to the current user by using this command:

sudo chown 700 /var/www/html/index.nginx-debian.html
Enter fullscreen mode Exit fullscreen mode

If you just want to make this a one-time change, you can use sudo instead:

sudo vi /var/www/html/index.nginx-debian.html
Enter fullscreen mode Exit fullscreen mode

Proceed to edit it using a text editor. I am using the Vim text editor in this scenario:

vi /var/www/html/index.nginx-debian.html
Enter fullscreen mode Exit fullscreen mode

Paste in the HTML text above and save.

Image description


Testing

We will use the public IP of the VM to test the web page and see if NGINX serves our HTML page on the browser.

Image description

We get the error that the page is not reachable. This is a network issue, as the port needs to be opened from the network security group on Azure and also set up the UFW on the Ubuntu machine.


Firewall Configuration

Checking the UFW status on Ubuntu:

sudo ufw status
Enter fullscreen mode Exit fullscreen mode

Image description

This shows that the firewall is inactive.

We will enable it and then set it up for port 22 and port 80:

sudo ufw allow 22/tcp && sudo ufw allow 80/tcp
Enter fullscreen mode Exit fullscreen mode

Image description

Enable UFW for network connections:

sudo ufw enable
Enter fullscreen mode Exit fullscreen mode

Image description

Checking the status again:

sudo ufw status
Enter fullscreen mode Exit fullscreen mode

Image description

We now have ports 80 and 22 opened for connections, and thus NGINX should be able to serve our HTML page now.


Final Test

Our webpage is now served.

Image description


Challenges Faced

  • Firewall Configuration: Initially, the NGINX page didn’t load because the firewall blocked HTTP traffic. I resolved this by allowing traffic on port 80 using ufw.
  • File Permissions: I encountered permission issues while editing the HTML file. Using sudo resolved this problem.

Learning and Growth

This task helped me:

  • Gain hands-on experience with NGINX and Ubuntu.
  • Understand basic web server configuration.
  • Develop problem-solving skills by troubleshooting firewall and permission issues.

This experience aligns with my goal of becoming a DevOps Engineer, as it introduced me to foundational tools and practices in the field.


References


🚀

Top comments (0)