How To Set Up Nginx Server Map With Ports(Virtual Hosts)

In this article we will learn how we can setup Nginx server on linux and map it with host port for example if you havr react application running on port 3000 and node js server running on port 3001 and there is one more port for API so you want to setup an web application in which these api, frontend and backend will run, to make this work we will provides the ports to nginx server, in simple terms it is the process of configuring NGINX to handle multiple domains and ports efficiently.

Understanding NGINX Virtual Hosts

Virtual Hosts in NGINX allow you to host multiple websites on a single server. Each virtual host can be configured to respond to different domain names and can listen on different ports. This flexibility is crucial for developers and system administrators who need to manage multiple sites or applications.

Key Concepts

• Server Block: A configuration block that defines how NGINX should respond to requests for a specific domain or IP address.
• Listen Directive: Specifies the IP address and port on which the server will accept requests.
• Server Name: Defines which domain names the server block will respond to.

So lets start with an example how we can setup h proper server with the ports, for this you must have below applications.

Prerequisites

Before you begin, ensure that you have:

• A server running a Linux distribution (e.g., Ubuntu).
• NGINX installed on your server.
• Root or sudo access to modify configuration files.

Step 1: Install NGINX

Please check is you have installed nginx in you VPS server or not

use the command “nginx -v” to check if you have installed or not, if not then use below command to install

sudo apt update 
sudo apt install nginx

Step 2 : Map server with ports

NGINX configurations for virtual hosts are typically stored in /etc/nginx/sites-available/. You will create separate configuration files for each domain.

Create a Configuration File: For example, create a file for site1.com. (nginx cd nmp)

sudo nano /etc/nginx/sites-available/example1.com

Add server cofiguration

server {
    listen 80;  # Port for HTTP
    server_name site1.com www.site1.com;

    root /var/www/site1.com/html;  # Document root
    index index.html index.htm;

    location / {
        try_files $uri $uri/ =404;
    }
}

in above code site1.com is domain name with which you want to map to

Now let do it for site two

sudo nano /etc/nginx/sites-available/example2.com

Configurations

server {
    listen 8080;  # Different port for this domain
    server_name site2.com www.site2.com;

    root /var/www/site2.com/html;  # Document root
    index index.html index.htm;

    location / {
        try_files $uri $uri/ =404;
    }
}

Step 3: Enable the Server Blocks

To enable the newly created server blocks, you need to create symbolic links in the sites-enabled directory.

sudo ln -s /etc/nginx/sites-available/site1.com /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/site2.com /etc/nginx/sites-enabled/

Step 4: Test the Configuration

sudo nginx -t

The above commend will tell if every thing is setup properly

Step 5: Restart NGINX

sudo systemctl restart nginx

Now let support if you have different port for you api, frontend and some dashboard and you want to map the with api subdomain and diractory, so beloe is the code to check that

Nginx Proxy Manager

server {
    listen 80;
    server_name site1.com;  # Replace with your domain

    # Redirect all HTTP requests to HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name site1.com;  # Replace with your domain

    ssl_certificate /home/mohit/blacklemon.app/cert/fullchain.pem;
    ssl_certificate_key /home/mohit/blacklemon.app/cert/privatekey.pem;

    # Optional: Improve SSL configuration
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers 'HIGH:!aNULL:!MD5';
    ssl_prefer_server_ciphers on;

    # Serve your Vite app
    location / {
        root /home/mohit/blacklemon.app/dist;  # Ensure this path is correct
        index index.html;  # Ensure index.html is specified
        try_files $uri $uri/ /index.html;  # Fallback to index.html for SPA
    }


}

server {
    listen 80;
    server_name api.site1.com;  # Replace with your subdomain

    # Redirect all HTTP requests to HTTPS (optional)
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name api.site1.com;  # Replace with your subdomain

    ssl_certificate /home/mohit/blacklemon.app/cert/fullchain-api.pem;  # Update with your cert path
    ssl_certificate_key /home/mohit/blacklemon.app/cert/key-api.pem;  # Update with your key path

    # Optional: Improve SSL configuration
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers 'HIGH:!aNULL:!MD5';
    ssl_prefer_server_ciphers on;

    # api.site1.com Dashboard
    location /dashboard/ {
        proxy_pass http://localhost:8501/;  # Proxy to the dashboard
        proxy_http_version 1.1;  # Enable HTTP/1.1
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Upgrade $http_upgrade;  # Enable WebSocket upgrades
        proxy_set_header Connection "upgrade";    # Enable WebSocket connection
    }

    # api.site1.com Backend API
    location / {
        proxy_pass http://localhost:8000/;  # Proxy to the backend API
        proxy_http_version 1.1;  # Enable HTTP/1.1
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Upgrade $http_upgrade;  # Enable WebSocket upgrades
        proxy_set_header Connection "upgrade";    # Enable WebSocket connection
    }

    # Optional: Handle errors
    error_page 404 /404.html;
    error_page 500 502 503 504 /50x.html;

    location = /50x.html {
        root /usr/share/nginx/html;
    }


}

In above code we have site1.com as main domain and app.site1.com is the subdomain now we need to mape this with ports

location /dashboard/ is mapped with port http://localhost:8501/

location / is mapped with port 8000 on wich our api is running

for both above we have mapped with server_name api.site1.com;

So if you enter api.site1.com/ api will run and api.site1.com/dashboard dashboard will run

and on domain site1.com/ it is mapped with root folder where out html frontend code will store

server_name : site1.com;

location is

location / {
root /home/mohit/blacklemon.app/dist; # Ensure this path is correct
index index.html; # Ensure index.html is specified
try_files $uri $uri/ /index.html; # Fallback to index.html for SPA
}

To making it live you have to run them with secure server it should be run on https:// so you must have ssl certificate, and save them on server and mapp them with the help of below code wich is already added into ther server configuration above

  ssl_certificate /home/mohit/blacklemon.app/cert/fullchain-api.pem;  # Update with your cert path
  ssl_certificate_key /home/mohit/blacklemon.app/cert/key-api.pem;  # Update with your key path

now again run the test command to test if everything is properly setup or not.

You can also check the server log with below command

Default Log Locations

By default, NGINX stores its error logs in the following location:

/var/log/nginx/error.log

tail -f /var/log/nginx/error.log