Unlock the Power of Customizable Subdomains

Before We Begin

Before diving into the process of building a web app that supports multiple subdomains, let’s outline the journey ahead. We’ll cover the technical requirements, terms and definitions, setting up DNS, Nginx, and our web app, and finally, starting our Nginx server.

Technical Requirements

To follow this tutorial, you’ll need:

• A domain name that you own
• A cloud provider (e.g., AWS EC2, Azure, Google Cloud)
• A public IP address for your server
• A DNS provider (e.g., Amazon Route 53, Cloudflare)
• A database (e.g., MongoDB)

Terms and Definitions

To make our journey easier, let’s define some key terms:

• Domain Name System (DNS): A naming system that maps domain names to IP addresses.
• A-records and Wildcard Domains: A-record maps a domain to an IP address, while a wildcard domain responds to requests for undefined subdomains.
• Time to Live (TTL): The time interval that specifies how long a DNS record should be cached.
• TXT Record: A record that maps a domain to a text value, often used to prove domain ownership.

Setting Up Our DNS

First, we’ll point our domain name to our Nameservers. Then, we’ll add an A-record to our domain name, resolving to the IP address of our cloud provider’s deployed instance. We’ll also add a wildcard domain A-record, responding to requests for undefined subdomains.

dig +short example.com @nameserver
dig +short *.example.com @nameserver

Setting Up Nginx

Next, we’ll set up Nginx, a web server that sits on top of the TCP/IP stack. We’ll use Nginx as a reverse proxy to handle multiple Node servers on the same machine for load balancing purposes.

http {
   ...
    upstream node_app {
        server localhost:3000;
    }

    server {
        listen 80;
        server_name example.com *.example.com;

        location / {
            proxy_pass http://node_app;
            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;
        }
    }
}

Installing SSL Certificates

We’ll use Certbot to install SSL certificates for both our domain and wildcard domain. This involves running commands in the terminal and adding TXT records to our DNS zone.

sudo certbot certonly --manual --preferred-challenges dns --email [email protected] --agree-tos --non-interactive --expand --domains -d example.com,*.example.com

Configuring Nginx for SSL Certificates

Once we have our SSL certificates installed, we’ll configure Nginx to use them. We’ll edit the Nginx configuration file, adding lines to specify the SSL certificates and their locations.

server {
   ...
    listen 443 ssl;
    server_name example.com *.example.com;

    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
   ...
}

Setting Up Our Web App

Now it’s time to set up our web app using the MERN stack (Node.js, Express.js, EJS, and MongoDB). We’ll create a simple CRUD application that allows us to create a user and assign them a unique subdomain.

// app.js
const express = require('express');
const app = express();
const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/database', { useNewUrlParser: true, useUnifiedTopology: true });

app.get('/:subdomain', (req, res) => {
    const subdomain = req.params.subdomain;
    // logic to handle subdomain requests
});

app.listen(3000, () => {
    console.log('Server started on port 3000');
});

Starting Our Nginx Server

Finally, we’ll start our Nginx server, and if everything is set up correctly, we should see our web app in action!

sudo service nginx restart

Congratulations! You’ve successfully built a web app that supports multiple customizable subdomains. Pat yourself on the back and get ready to take your web development skills to the next level!