S3 Static web hosting using SSL Certificate from ACM with cloudfront
Now that our s3 static website is up and running, let’s try to enable https for our custom subdomain/domain.
We will do this using CloudFront + ACM (Amazon Certificate Manager).
Why do you need cloudfront to do this? That is a good question. Usually you would’ve installed let’s encrypt or similar type of ssl certificate in your vps to make your website https compatible. But since we are not using any server (we are serverless, remember :) ), we will have to use different solution for that.
So, here is how it is going to work:
At first we will have to request a certificate from ACM for our domain or subdomain.
That is easy to do.
Change your region to US East (N. Virginia), as you will see later for cloudfront to work with ACM US East region is important.
Type ACM from Services and select “Certificate Manager”.
If you have not requested any certificate before press ‘Get Started’ from ‘Provision certificates’.
After selecting ‘Request a public certificate’ press ‘Request a certificate’.
Give you domain or subdomain name.
Next, it will ask you to verify that it is your domain or subdomain. You can do it in two ways. In DNS validation method aws will give you a CNAME record and you will have to add that CNAME record to your domain/subdomain or if you are using Route53 like me you can just press “Create record in Route 53”.
In Email validation aws will send an email associated with this domain name. You can verify it is your domain, from that email.
In either case aws need to verify it is your domain. Sometimes it takes 1–10 minutes to verify the domain. Don’t be alarmed if you do not see ‘Validation status’ ‘Success’ right away. If all goes well you should success under validation status. Congrats! you are now ready to use this certificate.
Now it is time to use this ssl certificate.
For that, let’s head over to cloudfront.
‘Create Distribution’:
Click on ‘Get Started’ of ‘Web’ distribution:
Below steps are the most important part of the configuration. You do it right, you are all set.
Under ‘Origin Domain Name’ put your statically hosted webiste S3 url.
Once you select Origin Domain Name it will auto fill-up ‘Origin ID’. You don’t have to do anything in here.
Next up, tell this distribution it should ‘Redirect HTTP to HTTPS’.
Now head over to “Distribution Settings”:
Give ‘Alternate Domain Names’, CNAMEs. You can put multiple domain/subdomain name by new line if you have requested ssl for multiple domain/subdomains.
Select ‘Custom SSL Certificate (example.com)’ and select your stored certificate from US East (N. Virginia) Region.
As you can see “You can use a certificate stored in AWS Certificate Manager (ACM) in the US East (N. Virginia) Region”. Aws does not allow us to select different certificate stored in other regions.
Now the last part is to tell the distribution is your ‘Default Root Object’. In my case it was index.html as you can see from my previous post.
Once done click on ‘Create Distribution’ and wait.
Have a coffee. And wait…
Usually it takes sometime for this distribution to be distributed across all over the world. So, it will take sometime.
Once you see the status ‘Deployed’, we are done with the distribution. Copy the ‘Domain Name’ of your distribution, it will be something like this ‘d3e3clb12812c1.cloudfront.net’ .
Now we need to tell our domain/subdomain to hit this ‘d3e3clb12812c1.cloudfront.net’ url instead of hitting s3 url that we have previously selected for our ‘A Record’ ‘Alias’.
Just head over to domain registrar in my case Route53. Change the alias from s3 url to cloudfront distribution url.
Save the record. Wait for sometime and Voila! You should be able to see your static web site hosted in s3 distributed using cloudfront over acm ssl certificate.
Don’t forget to share the knowledge. Happy Learning.
Next up:
How can you take input from your serverless website to dynamodb using lambda, while making a simple contact us form.
