Deploying Web App (Static) in NGINX

Last Updated on April 19, 2024 by cscontents

Table of Contents

Introduction

NGINX is one of the most popular and widely used open-source web servers, renowned for its speed and versatility. Not only that NGINX is a high-performance web server that excels at serving static content and handling concurrent connections efficiently. Besides working as a Webserver (HTTP server), NGINX can used as a Reverse Proxy, Load Balancer, in Caching functionalities, etc.

Speaking about the web server functionality of NGINX, it is used to serve static content. NGINX is known for its high performance, low resource usage, and scalability. It can handle static content very efficiently. First things first, we need to have a sample static webpage. With this in hand, it’s time to equip our server with NGINX. NGINX configuration file instructs NGINX where to locate static content files and how to handle incoming requests.

In this article, we will provide a comprehensive guide on serving static content using NGINX, offering a step-by-step approach for a practical and hands-on experience.

We will cover the installation of NGINX and, the configuration of NGINX to host static web pages. By following this tutorial, users will gain a foundational understanding of running or serving static pages using NGINX, a valuable skill for anyone entering the field of web development or server administration.

Prerequisite

Below are the prerequisites which we need to fulfill.

One Linux machine, it can be Ubuntu, centos, or RHEL Operating system. In this article, we will be using an Ubuntu machine.
That Linux machine should have network ports opened. You need to add inbound connectivity over the required port.
One user must be created in that machine that has sudo privileges and that user will be used for configuration purposes.
You must have a good understanding of file/folder structure and configuration files of NGINX.
You need to have a sample web application. In this article, we will be using a simple “Hello World” HTML static page for keeping this guide simple.
One needs to have experience with basic Linux commands to complete this guide.

Sections of this guide

For simplicity, we have divided this guide into 3 sections/parts.

Installing the NGINX web server.
Configuring NGINX for the Sample Web Application /Sample Static Content.
Validate the sample static webpage from the browser.

Section 1: Installing NGINX web server

Follow the steps below to install NGINX on an Ubuntu machine.

Step 1: Update Linux OS Package

Before installing NGINX, it is crucial to update the Linux OS package.

sudo apt update

Step 2: Upgrade the Linux OS Package

Similar to step 1, we need to upgrade the Linux OS package before installing NGINX.

sudo apt upgrade

Step 3: Install NGINX

Execute the below command to install NGINX on your machine.

sudo apt install nginx

Step 4: Start NGINX Service

Once we have installed the NGINX, we will need to start the NGINX service.

sudo service nginx start

Note: To install NGINX on other Linux OS, please follow this article: https://cscontents.com/how-to-install-haproxy/

Section 2: Configuring NGINX for the Sample Web App /Static Webpage

Before we start I will go through a quick overview of the crucial files/folders in NGINX. The below discussion is regarding Ubuntu OS.

After installation of NGINX in Ubuntu machine, if we go to /etc/nginx directory we will see the below files/directories.

root@Server-1:/etc/nginx# tree
.
├── conf.d
├── fastcgi.conf
├── fastcgi_params
├── koi-utf
├── koi-win
├── mime.types
├── modules-available
├── modules-enabled
│ ├── 50-mod-http-image-filter.conf -> /usr/share/nginx/modules-available/mod-http-image-filter.conf
│ ├── 50-mod-http-xslt-filter.conf -> /usr/share/nginx/modules-available/mod-http-xslt-filter.conf
│ ├── 50-mod-mail.conf -> /usr/share/nginx/modules-available/mod-mail.conf
│ └── 50-mod-stream.conf -> /usr/share/nginx/modules-available/mod-stream.conf
├── nginx.conf
├── proxy_params
├── scgi_params
├── sites-available
│ ├── default
├── sites-enabled
│ ├── default -> /etc/nginx/sites-available/default
├── snippets
│ ├── fastcgi-php.conf
│ └── snakeoil.conf
├── uwsgi_params
└── win-utf

In the above files and folder, the below 3 files/directories are very crucial.

nginx.conf file: This is the NGINX main configuration file.
sites-available directory: In this directory, we can put all the sites or static content. We can make the sites/static pages available in this directory and later we can enable/disable them as per our wish.
sites-enabled directory: In this directory, we can create a symlink to the ‘sites-available’ directory for the concerned static webpage.

In this demo project, we have the below nginx.conf file. You can use the below nginx configuration file and customize it as per your requirements.

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
        worker_connections 768;
        # multi_accept on;
}
http {

      ##
      # Basic Settings
      ##
      sendfile on;
      tcp_nopush on;
      tcp_nodelay on;
      keepalive_timeout 65;
      types_hash_max_size 2048;
      # server_tokens off;
      include /etc/nginx/mime.types;
      default_type application/octet-stream;

      ##
      # Logging Settings
      ##
      access_log /var/log/nginx/access.log;
      error_log /var/log/nginx/error.log;

      include /etc/nginx/conf.d/*.conf;
      include /etc/nginx/sites-enabled/*;
}

Follow the steps below to set up/deploy a static HTML page in NGINX.

Step 1: Create a Sample Static HTML Page

Run the below commands to create a sample index.html page. We need to create this page under the /var/www/<html-directory> directory.

Create a directory under /var/www

sudo mkdir /var/www/mywebapp

Now, Create index.html page

sudo vi /var/www/mywebapp/index.html

Enter the below content and save the file. Later we need to use the path of this file in the configuration file.

<h1>Hello World! This is a Sample Static Webpage</h1>

Step 2: Create a Configuration File under /etc/nginx/sites-available

Run the below command to create a configuration file under /etc/nginx/sites-available for a new static web page.

sudo vi /etc/nginx/sites-available/mywebapp

The above command will open up a new file in the editor. Now, enter the below content (customize the configuration as per your requirement).

server {
    listen 81;
    listen [::]:81;
    server_name mywebapp;
    root /var/www/mywebapp;
    index index.html index.htm;
    location / {
    try_files $uri $uri/ =404;
    }
}

In the above configuration file,

We are using port 81 to serve the webpage.
We added the location of the index.html file which is located under the /var/www/mywebapp directory.

Finally, save the above file.

Step 3: Create symlink of the sites created under sites-available to sites-enabled

In the previous step, we have added a sample site (mywebapp) under ‘sites-available‘ directory. In this step we will create a symlink of this site to the ‘sites-enabled‘ directory.

Run the below command to create the symlink.

sudo ln -s /etc/nginx/sites-available/mywebapp /etc/nginx/sites-enabled

Step 4: Verify the Configurations & Reload NGINX

Run the below command to verify if there is any issue with the nginx configuration.

sudo nginx -t

The above command should give output like below.

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

If there is no error, run the below command to reload the NGINX web server.

sudo nginx -s reload

Section 3: Validate the sample static webpage from the browser

In this section, we will validate the sample static webpage by accessing it from a browser.

To do this, access the below URL from a browser.

http://Linux-machine-IP:81

Another way, you can validate the same is by using the curl command. For this, you need to run the below curl command on the same Linux machine.

curl localhost:81

This should give the output as below.

<h1>Hello World! This is a Sample Static Webpage</h1>

Thank you.

If you are interested in learning DevOps, please have a look at the below articles, which will help you greatly.