Deploy multiple sites on one server with Nginx and HTTPS

If you need to deploy Multiple sites with Nginx and HTTPS on same server, this post explains how to do it. Many small scale saas web app will have one landing page (business site – www.example.com) and then one subdomain site where actual business logic of the SAAS app is running (e.g. app.example.com or console.example.com or dashboard.example.com).

Our recommended books for REACT

Build Web Apps with React & Firebase
Learn React from the ground up to make dynamic websites (includes Context, Hooks, Reducers, Routing, Auth, Databases)
Created by The Net Ninja (Shaun Pelling)

Deploy VM with Nginx and Debian 10/11

In your cloud setup, search for “Nginx” in the marketplace and find the image with Debian 10 or 11. In Google cloud, google’s “Click to deploy” or “Bitnami” images are available. You can select any other linux OS as well, only few steps will be different. In this post, we will follow Nginx with Debian. Also, make sure Port 80 and 443 are allowed for this server in firewall rules settings in your cloud console.

Install Certbot for Nginx

Let’s Encrypt provides free SSL Certificate. We will use that for our setup. We need to install Let’s Encrypt client Certbot.

# Run following on your server
sudo apt update

sudo apt install python3-acme python3-certbot python3-mock python3-openssl python3-pkg-resources python3-pyparsing python3-zope.interface

sudo apt install python3-certbot-nginx

Configure Nginx

For each domain/subdomain you want to configure, repeat following steps.

# for example.com domain
sudo mkdir -p /var/www/example.com/html
sudo chown -R $USER:$USER /var/www/example.com/html
sudo chmod -R 755 /var/www

# for app.example.com subdomain 
sudo mkdir -p /var/www/app.example.com/html
sudo chown -R $USER:$USER /var/www/app.example.com/html

sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/example.com
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/example.com


sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/app.example.com
sudo ln -s /etc/nginx/sites-available/app.example.com /etc/nginx/sites-enabled/app.example.com

$USER is the user who will need access to upload final React build or website files.

Update Nginx config files

# sudo vi /etc/nginx/sites-available/example.com and update as below.
server {
        listen 80 default_server;
        listen [::]:80 default_server;
        root /var/www/example.com/html;
        index index.html;
        server_name example.com;
        add_header Cache-Control "max-age=0, no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
}


sudo vi /etc/nginx/sites-available/app.example.com and update as below.

server {
        listen 80;
        listen [::]:80;
        root /var/www/app.example.com/html;
        index index.html;
        server_name app.example.com;
        add_header Cache-Control "max-age=0, no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
}

Don’t forget to checkout all our recommendations for best Python and React books and courses here. Also, our review of Python course on educative.io is available here.

Update DNS Settings

Now you need to update DNS A Records in your dns settings where you have purchased the domain (e.g. godaddy or namecheap or domains.google.com). Map A record for domain (example.com) and subdomain (app.example.com) to the public IP address of the above server where Nginx is running.

Run Certbot to get certificate

Run following command to get Let’s encrypt certificates for each of your domain and subdomains which you have configured above.

sudo certbot --nginx -d example.com -d app.example.com

Follow the questions asked and after successful verification with DNS settings, it will install required SSL certificates and update Nginx configuration. Example changed configuration for subdomain is shown below.

# cat /etc/nginx/sites-available/app.example.com 
server {
        root /var/www/app.example.com/html;
        index index.html;
        server_name app.example.com;
        add_header Cache-Control "max-age=0, no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
        location / {
                try_files $uri /index.html;
        }

    listen [::]:443 ssl http2; # managed by Certbot
    listen 443 ssl http2; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/example.com-0001/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/example.com-0001/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}
server {
    if ($host = app.example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80;
        listen [::]:80;
        server_name app.example.com;
    return 404; # managed by Certbot


}

Upload React Build files

Now our server is ready with multiple HTTPS certificate each for domain and subdomain and we can now upload final website files.

Build your react files and upload final output to each respective folders. For example,
for example.com website, upload to /var/www/example.com/html
for app.example.com website, upload to /var/www/app.example.com/html

You can use scp from local machine to above folders directly on server.

Hope these steps are helpful in deploying multiple React Sites on same server with Nginx and free HTTPS certificates.