How to Deploy a Web App Using NGINX: Step-by-Step Beginner Guide

Deploying a web application means making your website or app available on the internet so that anyone can access it using a browser. One of the most popular and powerful tools for deploying web applications is NGINX.

NGINX is fast, secure, and easy to use. Many large companies use it to host their websites and applications.

In this guide, you will learn how to deploy a web app using NGINX step by step. This tutorial is perfect for beginners and students who want to understand real-world web deployment.

What is NGINX?

NGINX (pronounced engine-x) is a web server that handles requests from users’ browsers and sends back web pages or data.

NGINX can also work as:

1. A reverse proxy
2. A load balancer
3. A caching server

In simple words, NGINX sits between users and your application and makes sure everything runs smoothly and quickly.

Why Use NGINX to Deploy a Web App?

Here are the main benefits of using NGINX:

• Free and open source
• Very fast and lightweight
• Easy to configure
• Supports HTTPS (SSL certificates)
• Can host multiple websites on one server
• Improves security using reverse proxy
• Widely used in production environments

Because of these features, NGINX is one of the best choices for deploying web applications.

Prerequisites

Before starting, make sure you have:

• A Linux server (Ubuntu recommended)
• SSH access to your server
• A web application (HTML, React, Node.js, etc.)
• Basic Linux command knowledge
• Internet connection

Optional but helpful:

• A domain name (example: myapp.com)

Step 1: Connect to Your Server

Connect to your server using SSH:

ssh username@server_ip

Update your system packages:

sudo apt update && sudo apt upgrade -y

Step 2: Install NGINX

Install NGINX with this command:

sudo apt install nginx -y

Check if NGINX is running:

sudo systemctl status nginx

Open your browser and visit your server IP address.

If you see the NGINX Welcome Page, your installation is successful.

Step 3: Prepare Your Web Application

Now prepare your web app files for deployment.

For Static Websites (HTML, CSS, JS)

Create a folder for your app:

sudo mkdir /var/www/myapp

Copy your website files:

sudo cp -r * /var/www/myapp

Set correct permissions:

sudo chown -R www-data:www-data /var/www/myapp

For React or Frontend Apps

Build your project:

npm run build

Copy the build folder:

sudo cp -r build /var/www/myapp

Step 4: Configure NGINX Server Block

NGINX uses configuration files called server blocks to manage websites.

Create a new configuration file:

sudo nano /etc/nginx/sites-available/myapp

Add this configuration:

server {
  listen 80;
  server_name yourdomain.com;

  root /var/www/myapp;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

Explanation:

• listen 80 → HTTP port
• server_name → domain or IP
• root → website location
• index → main file
• try_files → for React and SPA apps

Save and exit.

Step 5: Enable and Reload NGINX

Enable your site:

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

Test configuration:

sudo nginx -t

Reload NGINX:

sudo systemctl reload nginx

Now your website should be live.

Step 6: Deploy Backend App with NGINX Reverse Proxy (Optional)

If your backend runs on port 3000, use NGINX as a reverse proxy.

Add this inside your server block:

location /api {
  proxy_pass http://localhost:3000;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
}

Benefits of Reverse Proxy:

• Hides backend port
• Improves security
• Handles traffic efficiently
• Works with Node.js, Python, Java apps

Step 7: Connect a Domain Name

Buy a domain from any provider and point it to your server IP using DNS A Record.

Example:

myapp.com → 123.45.67.89

Update NGINX config:

server_name myapp.com www.myapp.com;

Reload NGINX.

Step 8: Enable HTTPS with SSL Certificate

HTTPS is important for security and SEO ranking.

Install Certbot:

sudo apt install certbot python3-certbot-nginx -y

Generate SSL:

sudo certbot --nginx

Certbot will:

• Install SSL certificate
• Update NGINX config
• Enable HTTPS automatically

Your site will now use:

https://myapp.com

Step 9: Firewall and Security Setup

Allow NGINX through firewall:

sudo ufw allow 'Nginx Full'

Disable default site:

sudo rm /etc/nginx/sites-enabled/default

Hide NGINX version for security:

Edit:

sudo nano /etc/nginx/nginx.conf

Add:

server_tokens off;

Step 10: Logs and Monitoring

NGINX log files help you debug problems:

• Access log: /var/log/nginx/access.log
• Error log: /var/log/nginx/error.log

Restart NGINX:

sudo systemctl restart nginx

Reload NGINX:

sudo systemctl reload nginx

Common Errors and Solutions

1. 403 Forbidden Error

• Wrong file permissions
• Folder not accessible

2. 404 Not Found

• Incorrect root path
• Missing index.html

3. NGINX Not Starting

• Run sudo nginx -t
• Check error logs

4. SSL Not Working

• DNS not set correctly
• Run Certbot again

Best Practices for NGINX Deployment

• Use PM2 or systemd for backend apps
• Keep frontend and backend separate
• Always use HTTPS
• Backup NGINX configuration files
• Keep your server updated
• Do not run apps as root user
• Use environment variables
• 
  

Conclusion

Deploying a web app using NGINX is an essential skill for every web developer. NGINX helps you host your website, manage traffic, improve security, and enable HTTPS easily.

In this guide, you learned:

• What NGINX is
• How to install NGINX
• How to configure server blocks
• How to deploy a web app
• How to use reverse proxy
• How to enable SSL
• How to fix common problems

With these steps, you can deploy almost any web application using NGINX confidently.