AWS: Allocate sub-domain to users on the fly just like medium(for members)💪💪💪 (No code needed)
This tutorial will use s3 bucket, route53 and cloud-front. Trust me its really really simple.
Use case
One of the use case that I came through is, I am building a platform where I have to assign a unique sub-domain to each end user, just like medium assigns you a unique sub-domain, like mine is https://muhammadusmanalibaloch.medium.com/
So, I will jot down the easy to follow step, first we will start with the creation of s3 bucket.
Assumptions
I am assuming that we are using https://example.com as our core domain and rest of the sub-domains will be created with *.example.com, where * could be anything. i.e abc.example.com
Step 1: Create S3 bucket with Domain name
1.1 click on create bucket
1.2 Name the bucket with domain and select appropriate region.
1.3 Uncheck Block all public access
Then create the bucket by clicking on create bucket at the bottom
1.4 Go to s3 bucket listing and select the newly created bucket, you will see the following screen, click on properties.
1.5 scroll to the bottom and click on edit of static website hosting section
1.6 Do the following configuration
index.html refers to main file that would be rendered when accessed by domain name, it can be your react/angular production build code or static html file.
error.html refers to file that will be rendered in case of error
click on save changes button at bottom.
Upload a simple index.html file to s3 bucket, so that we can access it through url now.
Bravo, Your s3 bucket is setup, now let’s create cloud front web distribution to map to s3.
step 2: Create cloud front, go to cloud front in aws console.
click on get started if you don’t have any already created cloudfront distribution, then click on create distribution
Follow these steps
- create distribution and click on get started, you would see this screen(below)
2. Pick s3 bucket that you created above
3. Leave the rest as it is till caching, you have pick following for the caching
Managed-CachingDisabled
4. finally click on create distribution at the bottom.
Bravo you are 80% there, now final step is to point domain to cloud distribution which is few clicks away
go to Route53 and the follow the steps given below
- click on hosted zones
2. pick domain from the list
3. click on create record.
4. copy the domain name from distribution
5. so here is thing, you need to click the link under id of distribution and check whether ipv6 is enabled or not in case of yes you would add two alist from route53, one for ipv4 and one for ipv6.
6. Record name as * and enable alias(toggle) and choose record type A-Route Traffic to an IPv4 and some Aws resource
7. pick Alias to cloudfront distribution and click on create record
8. Repeat the same process for ipv6
Bravo, congrats you are done, now you can access the sub-domains like abc.example.com(whatever is your domain)
What’s next, you can code the frontend app to add restrictions, let’s say you want to provision the app, keep it as record in db and if some sub-domain is not in database simply route user to an error page that the sub-domain is not provisioned to any user. Like I did
Please give it a round of applause if you get the benefit from my article and let me know in case of issue, leave the comment, will follow along. Best 😀😀😀
