How to deploy the Next.js project with multiple subdomains using PM2 + Nginx + Cloudflare

Work with Next.js: build and publish a website that adopts the concept of multi-tenancy

29 June, 2022

Contributors

Warman Suganda

@warmansuganda

Architecture

The idea is we will create a simple website architecture, that website can accept any subdomains. This architecture will adopt the concept of multi-tenancy.

Multi-tenancy is an architecture in which a single instance of a software application serves multiple customers. Each customer is called a tenant. Tenants may be given the ability to customize some parts of the application, such as the color of the user interface (UI) or business rules, but they cannot customize the application's code.

In this example, I will create an e-commerce platform, each store will have its own store-front and domain address. when the address is opened, the page will display the product list of the stores. as an illustration, see the image below:

User Interface Illustration

The architecture that we will make is more or less like the picture below

Project Architecture

Let's get started...

I'm using the Next.js project that I created in this post: Create Project using Next.js + Typescript + TailwindCSS, so I need to update the code to be able to read the currently active subdomain.

•

Create new file pages/store/[subdomain]/index.tsx

•

Create or update .env.local

•

Create new file pages/_middleware.tsx

Note: Middleware will rewrite the route if any request from the store domain, and then give a response from pages/store/[subdomain]/index.tsx

Manage daemon process with PM2

PM2 is a daemon process manager that will help you manage and keep your application online 24/7.

PM2 enables you to keep applications alive forever, reload them without downtime, and helps you to manage application logging, monitoring, and clustering.

to install PM2, run the command below:

Generate an ecosystem.config.js template with:

Modify the ecosystem file to match your needs. for example, I use this config:

if you use nvm and you want to set a specific nodejs version to run the project, you can add the config below to the ecosystem file

to start the service run the command below

if the process is a success, you can see a list of the instances

List managed applications

Check the logs to make sure your project it's been running well

Configure Nginx as a Reverse Proxy

An Nginx reverse proxy is an intermediary proxy service that takes a client request, passes it on to one or more servers, and subsequently delivers the server’s response back to the client.

to make your Nginx server allow wildcard subdomain and pass your domain to the Next.js project, you can use this config:

Note: after you set the config, don't forget to restart your Nginx service

DNS Management with Cloudflare

Cloudflare is one of the biggest networks operating on the Internet. People use Cloudflare services for the purposes of increasing the security and performance of their websites and services.

to create a new site and change your domain nameservers to Cloudflare you can follow this video

if you have been successful with the video, open the DNS Management menu and then add records like the image below

DNS Management Cloudflare

Note: Star (*) on the type CNAME means you allow any subdomain, so you don't need to add a subdomain manually. in term is also known as wildcard subdomain

If you have done all the configuration, let's open your browser and try to access your domain address.

How to run this project in your local environment?

to manage the domain name system (DNS) in the local environment you can modify the host file

•

Linux & Mac: /etc/hosts

•

Window: c:\Windows\System32\Drivers\etc\hosts

for example, I added three entries to it:

Note:

•

I suggest not using the same domain as the public one, because it will always be redirected to your local environment. for example, I use fleezyform.local for my local environment and fleezyfrom.com for the public.

•

We can't set wildcard subdomain in our hosts, if you need another domain you should add it manually.

Usually, I don't use PM2 during development, you can run the project as usually with:

Note:

•

if you need to check your ecosystem configuration before deploying to the server you can install PM2 in your local environment.

•

follow the guide above to configure Nginx as a Reverse Proxy

Open your browser and try to access your domain address without SSL: http://warman-store.fleezyform.local

Conclusion

If you want to develop a Software are as a Service (SaaS) platform, this is one concept that you can apply. A lot of services have implemented this concept, they give and issue custom domains to their customer on the fly. e.g. Atlassian, GitHub, Slack, and Zoom are some popular services that many of us use every day.

You can improve this concept even better, by adding a load balancer or using serverless architecture.