Even AWS S3 or Vercel already provides a domain for us, there are some cases that we needs to configurate our domain for the website.
 
Today, we will go through how to configurate DNS for AWS S3 Bucket. In case you still not know how to host a SPA on S3, check this post. Like that post, we will use AWS feature - Route 53 (R53) - to configurate the DNS.
 

In the tutorial Hosting SPA on AWS S3 post, there is a note that we should name the bucket by the domain that we want to configurate for S3 Bucket. Remember to do that.

 

 

Configurate Route 53

 
Why Route 53? We are using S3 to host our SPA, why would we need to pay for two service providers while one can serve those two features for us, right? We usually use one provider for our infrastructures unless there is a good reason to use two providers. But this scenario is really rare, we do not discuss here.
 
First of all, you need a domain in R53 by Registered domains and then have a Hosted zones in it. In this article, let name it as tachyon.cyou.
 

The domain in this article is renamed due to policy, but the steps are correct.

 

Next, click Create record to create A (address) record to point our domain to S3 domain. Choose Simple routing to create a record for domain.
 

Click Define simple record and create an A record test.tachyon.cyou that is an Alias to S3 website endpoint.
 

 

Choose your S3 Bucket region and click on the search box, it will auto show the domain of S3 Bucket for you. Remember to name the bucket as domain name like this post mentions, or else you will not see the domain like the picture above.

 
Click Define simple record and then Create records to create A record for S3 Bucket.
 

Great! Our website is now accessed by the domain test.tachyon.cyou.
 

Alright, instead of accessing using the S3 Bucket endpoint, now we can use our brand endpoint to access the website.
 
But, what if we want multiple domains point to one S3 Bucket? First, alias of S3 Bucket is specified by the domain that is set to its name. Second, we cannot set alias to the domain that is become an alias for S3 Bucket.
 
In a multi-tenancy, we will serve one application to multiple tenants (customers) and may need to provide one or more subdomains per tenant. For SPA, the easiest way is clone the S3 Bucket and name it with different domain and create A record to point it like above.
 
If we do it, why would we be here, right?
 

 

Multiple domains with CloudFront

 
Before configurating CloudFront, we need SSL for our domain. Accessing to Certificate Manager to request an certificate.
 

Next step, we will use wildcard to make a request.
 


We need to wait until the status is changed to Issued.
 

We need to support test.tachyon.cyou, a.tachyon.cyou, ... So we need to change the name of S3 Bucket to tachyon.cyou.

 
When the status changed to Issued, accessing to CloudFront to create a Distribution.
 

When choosing our bucket, AWS will suggest us to use its website endpoint instead, click on that and then click Create distribution
 


Wait until the distribution completed (Last modified has a specific datetime).
 
After that, access to the distribution and click Edit in tab General to add Alternate domain names. We will use wildcard for the CNAME input and choose SSL certificate that we already done at first step.
 

Now, our distribution looks like this
 

Back to R53, edit the existing test.tachyon.cyou record to Alias to CloudFront distribution.
 

Done. Great job! Now we can access to the S3 Bucket with multiple subdomains of tachyon.cyou.
 


 

Wrap up

 
In this article, we learn how to configurate custom domain to S3 Bucket and use CloudFront to configure multiple domains for one Bucket.
 
Multiple domains is not used for multi-tenancy scenario only, you can also use it if you want to support one content per domain. Based on the domain, we can choose a content or style to show for our customers.