Launch a static website on Amazon S3
1/10 fun hands-on projects to learn AWS
One fine morning, I spotted Drew Firement fun 10 AWS challenges post on Linkedin. As I’m currently preparing for the AWS Solution Architect Professional exam I thought why not 😊.
This is my take on Launching a static website on AWS S3.
Registering Domain
To start first you need to have a registered domain name. To register a domain you can visit AWS Route 53 domain registration page
Once you choose your domain you can add it to the cart and fill in the contact information. Once you place your order successfully you can see your domain under Pending requests.
After a couple of hours, it will be added to the registered domains
I’m using lkravi.me as my domain for this demo.
Creating S3 Bucket
We can create an S3 bucket with the same name as our domain. We can accept default settings for the moment and we can change them appropriately when necessary.
To enable static web hosting on the newly created bucket choose Properties
Edit Static website hosting
Enable static website hosting and select Host a static website on hosting type. Then you can specify the default web page and error page.
Once you save the changes you can see the Bucket website endpoint.
Let’s add our sample website to S3 Bucket. Inside your bucket under Objects select Upload.
Once you upload the content you can try to access the endpoint.
You can see we cannot access it yet and we are getting access denied error.
To allow public read access you need to edit Block public access and add a Bucket policy
Now let’s try to access our web endpoint. http://lkravi.me.s3-website-ap-southeast-2.amazonaws.com/
Update Route 53
In Route 53 Add an alias record to the domain. Open the Route 53 console, Choose Hosted zones then select create a record and choose switch to the wizard.
Once you define A record for S3 website endpoint you should be able to access your website using the domain.
Add CloudFront to Improve the performance
If you need to improve the performance of your S3 Website. you can use CloudFront to make it available from the edge locations. It will make sure every request is served from the nearest edge location instead of serving them all centrally from one location.
Add SSL certificate for the domain
Before we start CloudFront configuration let’s configure SSL certificate for our domain. In AWS Certificate Manager choose Request a certificate
I’m adding all subdomains as well for this cert and choosing DNS validation as a verification method.
You can click Create records in Route 53 and it will add the required verification CNAME record to hosted zone.
After a couple of minutes, you can see the certificate in Issued status.
Create a bucket for CloudFront Logs
If the bucket that store the logs uses the bucket owner enforced settings for S3 Object Ownership to disable ACLs. CloudFront cannot write logs to the bucket. Hence we need to enable ACLs for the bucket we planning to store logs.
Configure CloudFront
Now we can start configuring CloudFront for the S3 Website.
Open Couldfront console, Choose to Create Distribution.
Add the Amazon S3 website endpoint for the Origin domain.
I leave Default cache behavior in its default values. You can change it as per your requirements.
In Distribution settings
- Leave price class in Use All Edge Locations for best performance.
- Set CNAME for your custom domain name.
- For SSL Certificate, You can select the SSL cert you have created previously.
- In Default Root Object, enter the index document name.
- For logging, you can choose the bucket you have created previously.
Now we can update A record in the domain hosted zone from “Alias to S3” to “Alias to CloudFront”
You can check log files in the folder you have created for the logging.
That’s it. Let’s meet again with the Fun Challenge #02