Nginx Configuration: Host an application on multiple domains.

Introduction

Have you ever wondered how companies can serve the same applications on different domains? Either for branding initiatives or SEO strategies? Hosting an application on multiple domains using the same codebase could be the means to unlocking new possibilities. Let’s dive in deep and see how NGINX makes this remarkably effective.

For demonstration, we will use a minimal configuration.

Pre-requisites.

• Basic understanding of nginx.

• Server (We will use an Ubuntu 22 server and sudo privileges)

• 2 domain names.

SSL certificates for the domains created.

Practical Application.

1. Installing Nginx.

   Nginx is a powerful web server that also acts as a load balancer and HTTP cache tool. This article illustrates how nginx is used as a reverse proxy.

    sudo apt update 
    sudo apt upgrade 
    sudo apt install nginx
    sudo systemctl enable nginx
    sudo systemctl status nginx
   

   If the installation of Nginx is done correctly, the status of Nginx should be active (running).

2. Configuring URL redirections.

   Assuming that you have the two domains and their respective certificates, the nginx configuration file could look as follows:

    server {
        #api block
        root /home/ubuntu/sample-api;
        index index.html index.htm;
   
        server_name test.sampleapi.com;
   
        location / {
   
            proxy_pass http://localhost:5400;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
   
        listen 443 ssl; 
        ssl_certificate /path/to/your/certificate.crt; 
        ssl_certificate_key /path/to/your/private.key; 
   
    }
   
    server {
        root /home/ubuntu/sample-admin;
   
        server_name test.sample2.com;
   
        location / {
            proxy_pass http://localhost:4500;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
        listen 443 ssl; 
        ssl_certificate /path/to/your/certificate.crt; 
        ssl_certificate_key /path/to/your/private.key; 
   
    }
   
    server {
        root /home/ubuntu/sample-admin;
   
        server_name test.sample3.com;
   
        location / {
   
            proxy_pass http://localhost:4800;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
   
        listen 443 ssl; 
        ssl_certificate /path/to/your/certificate.crt; 
        ssl_certificate_key /path/to/your/private.key; 
        include /etc/ssl/certs/ssl-params.conf; 
    }
   

   For test purposes, a sample front-end app is deployed and started in the pathworking directory, /home/ubuntu/sample/ and /home/ubuntu/sample-api/ for our backend. The front end will be redirected to two different URLs (test.sample3.com and test.sample2.com), both sharing the same backend (test.sampleapi.com) and the same codebase.

3. Restart nginx

   To confirm whether the Nginx files have any syntax errors or misconfigurations and restart Nginx:

   
    sudo nginx -t
    sudo systemctl restart nginx
   

The article illustrates and guides how Nginx serves as a perfect reverse proxy, redirecting to two different front-end URLs and sharing the same codebase and backend for the application.

I hope you enjoyed this article on utilising nginx as a reverse proxy! See you next time