How to accessible multiple services via different domain or subdomain in DO droplet by Nginx

First, ensure that Nginx is installed on droplet. If it’s not installed, then install it using:

sudo apt update
sudo apt install nginx

Before configuring Nginx, the firewall needs to be adjusted to allow access to the service. Nginx registers itself as a service with ufw upon installation, making it straightforward to allow Nginx access.

You can show ufw app list by typing:

sudo ufw app list

Then enable Nginx by typing:

sudo ufw allow 'Nginx Full'

Now, you can verify the change by typing:

sudo ufw status

To avoid a possible hash bucket memory problem that can arise from adding additional server names, it is necessary to adjust a single value in the /etc/nginx/nginx.conf file. Open the file using:

sudo nano /etc/nginx/nginx.conf

And, find the server_names_hash_bucket_size directive and remove the # symbol to uncomment the line.

Here you will need to SSL/TLS Certificate also, so you need for that Let’s Encrypt using:

sudo apt update
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d example.com -d www.example.com

To automatically renew SSL/TLS certificates obtained with Let’s Encrypt using Certbot, you can set up a cron job.

sudo crontab -e

Then add this line at the bottom: 0 0,12 * * * certbot renew --quiet

Now, you need to create an Nginx configuration file for each service after successful all steps. Each configuration file will handle requests for a specific domain or subdomain and proxy them to the appropriate Docker container.

Assuming you have a Next.js project running on port 3000, and you want to serve it on example.com, then you can create a configuration file like -

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

And add below blocks on this file :

server {
  listen 80;
  listen [::]:80;
  server_name example.com www.example.com;

  return 301 https://$host$request_uri;
}

server {
  listen 443 ssl;
  listen [::]:443 ssl;
  server_name example.com www.example.com;

  ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
  ssl_protocols TLSv1.2 TLSv1.3;
  ssl_ciphers 'TLS_AES_128_GCM_SHA256:TLS_AES_256_GCM_SHA384:TLS_CHACHA20_POLY1305_SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-CCM:ECDHE-RSA-AES256-CCM:ECDHE-RSA-AES128-SHA256:ECDHE-RSA-AES256-SHA384';
  ssl_prefer_server_ciphers on;

  location / {
    proxy_pass http://localhost:3000;
    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 X-Forwarded-Host $host;
  }
}

If you have multiple service, you can create additional configuration files, for example:
/etc/nginx/sites-available/service1.example.com
/etc/nginx/sites-available/service2.example.com

Each file will have a similar structure, just make sure to replace the server_name and proxy_pass with appropriate values.

Also must be linked your configuration files with /etc/nginx/sites-enabled/ to enable them:

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/service1.example.com /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/service2.example.com /etc/nginx/sites-enabled/

Note: Always test your Nginx configuration before restarting:

sudo nginx -t

If the test is successful, restart Nginx to apply the changes:

sudo systemctl restart nginx