This content originally appeared on DEV Community and was authored by Manda Putra
Today I'll tell how do I make wildcard subdomains and how do I handle the data between multiple user account. I thought it was hard, but turns out it is not (or maybe it is easy because I doing it wrong? I don't know).
Every time I search about how to make a multi tenant website, there are 0 articles on how to build them. I always wonder how do they do their architecture etc.
The key to this type of website architecture are just wildcard subdomain and reading the host on your code. As simple as that.
The website requirement are :
- It's blog platform
- Every user will have their own subdomain (zeke.bloggy.net, eren.bloggy.net, etc)
- Every subdomain had their own data
So there are some steps.
Buy a Domain and VPS
First you must own a domain name and VPS (Virtual Private Server). I do think that this could be done in with serverless too, I just didn't tried that.
Point your domain to the VPS
On your domain registrar DNS Management There are 4 record that you should add. You also need your VPS IP address to point to.
| domain | record type | value | host | ttl |
|------------|-------------|------------------------------------|------------------------------------|-------|
| bloggy.com | A Record | 192.0.0.1 | bloggy.com | 14400 |
| bloggy.com | CNAME | bloggy.com | www | 14400 |
| bloggy.com | A Record | 192.0.0.1 | * | 14400 |
| bloggy.com | TXT Record | radom-value-provided-by-lestecrypt | radom-value-provided-by-lestecrypt | 14400 |
The IP address there are your VPS IP address the domain are your domain (till the end of this article we'll use bloggy.com)
The TXT Record will be given by LetsEncrypt when we need https, I'll on the next step.
Setup nginx to point to your domain
Install Nginx.
Apache, Nginx, or other web server thingy have their own syntax of configuration I used Nginx here. Use your own preferences
The configuration I use for bloggy.com are the same as article here try to follow that article guide (I want to keep this posts as short as possible)
The difference is when I want to register the wildcard subdomain. The certbot command I used are different.
It is not :
sudo certbot --nginx -d bloggy.com -d www.bloggy.com
but this :
sudo certbot --server https://acme-v02.api.letsencrypt.org/directory -d *.example.com --manual --preferred-challenges dns-01 certonly
I don't know why the -d *.example.com won't work, seems like it is a domain registrar problem. I obtain this trick from this article
For now, you will have a working wildcard subdomain and domain. Whether you visit bloggy.com, zeke.bloggy.com, eren.bloggy.com you will see Nginx welcome page (If you use nginx)
Handle the subdomain on your code
I use node.js (Express.js) for this, different app may have different syntax. But the rule are simple, read the hostname to get the account name and fetch the data;
The app had 2 routes home and blog Here the simplest code possible
const express = require('express')
const app = express()
const port = 3000
const dataBlog = [
{ account: 'zeke', blog: ['so zeke thing'] },
{ account: 'eren', blog: ['so eren thing 2'] }
]
// Home route list all blog and account
app.get('/', (req, res) => {
res.send(dataBlog)
})
// Blog route only list the blog based on host account name
// You will see that we dont use params here, we use hostname
app.get('/blog', (req, res) => {
const host = req.headers.host // or 'x-forwarded-host'
const accountName = host.toString().split('.')[0] // get the account name on domain.
if (accountName) {
const accountData = dataBlog.filter(acc => acc.account === accountName)
res.send(accountData)
} else {
res.code(404).send('Not Found')
}
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
Proxy your web app with nginx
Node.js aren't like PHP it has its own web servers, but to contact with real world it needs proxy. So we just proxy it to our nginx.
On bloggy.com nginx configuration
# so the home route will be on bloggy.com
proxy_pass http://localhost:3000;
On the wildcard *.bloggy.com nginx configuration
# so the blog route will point to *.bloggy.com
proxy_pass http://localhost:3000/blog;
That's it! Every time you visit bloggy.com/blog it will respond 'not found' but if you visit zeke.bloggy.com it will fetch the data for 'zeke'.
Closing
I hope this will help you to make your multi tenant website. Have a great day. I welcome every feedback you had! :D
This content originally appeared on DEV Community and was authored by Manda Putra
Manda Putra | Sciencx (2021-04-07T14:54:27+00:00) How to make a multi tenant website. Retrieved from https://www.scien.cx/2021/04/07/how-to-make-a-multi-tenant-website/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.