In this project, I created a resume from a sample .HTML and .CSS file, hosted in a S3 bucket with AWS. However, using just an S3 bucket alone will generate an insecure, non-customizable and undesired domain. (e.g http://awsresume.online.s3-website-us-east-1.amazonaws.com/)
We need to implement a secure and compliant domain over the internet that can allow our domain to generate a secure certificate (https). For this, Cloudfront enters the fray. It will generate an https environment allowing our domain to be secure. This will also allow seamless access and connection across multiple edge locations for faster query response. The problem, is that it will still create a fixed domain. (e.g https://d2ygp4l15ss99c.cloudfront.net)
To solve the final piece of the puzzle, we deploy Route53. This application will allow us to communicate our cloudfront distribution with a third party domain or a domain create within Route53 on AWS. With this solution, we will be able to utilize any domain we choose or need. We will also use Amazon Certificate Manager (ACM) to generate a valid HTTPS certificate that can allow the cloudfront distribution route the traffic with the custom domain.
This is a perfect real-world example to host a Resume in a secure, easily manageable static website that can be displayed with a third party custom domain or domain generated by AWS through Route53.
- Amazon Web Services (AWS)
- S3
- Cloudfront
- Route 53
- Amazon Certificate Manager
- Godaddy (for custom domain, route 53 can also accomplish the same goal.)
- HTML
- CSS
- JSON
- Windows 11
- Create a S3 Bucket
When we create a S3 bucket, we want to make sure we allow public access so that the bucket is accessible publicly. However, we need to determine which object or resource is going to be allowed for public access, which is why we implement a S3 Bucket Policy in a json file. (file has been provided at the repository. Make sure the value of “Resource” is renamed to the S3 bucket you are using. It will display above the bucket policy box or by browsing the S3 bucket, as show in this video:
Create.A.S3.Bucket.mp4
- Upload files to S3 Bucket
Upload.Files.to.S3.bucket.mp4
After creation, it will create a S3 webpoint. In this case, it would be http://awsresume.online.s3-website-us-east-1.amazonaws.com/
S3.Website.mp4
- Create a Cloudfront Distribution
Create.a.Cloudfront.Distribution.mp4
After creation, a cloudfrount domain name will be created with an HTTPS resolver. In this case, the address would be https://d2ygp4l15ss99c.cloudfront.net
- Create a hosted zone with Route 53 for a custom domain and create an alias record with Cloudfront
Create.Hosted.Zone.In.Route.53.Along.With.Cloudfront.Alias.Record.mp4
Even after creating the zone and alias record for the custom domain, it will show a 443 request error. We still need to request a certificate for our new domain, as shown below:
- Requesting a Public Certificate with Amazon Certificate Manager in order to resolve a HTTPS request with the custom domain
Requesting.A.Public.Certificate.With.Amazon.Certificate.Manager.In.Order.To.Resolve.A.Https.Request.With.The.Custom.Domain.mp4
After it’s said and done, we can test our custom domain now with no errors. Wooho!
The final result is our custom domain (fully accessible): https://awsresume.online
This projects demostrates a real-world scenario where we can create a website hosted with an S3 bucket utilizing AWS. In this example we also utilized .HTML and .CSS files to load our resume file into the bucket. By utilizing secure dns protocols and traffic through Route 53 and Cloudfront, we made sure that our website is fully compliant and accessible, as well as providing our own custom domain. This project was made with AWS free tier on all tools except for Route 53, where creating hosted zones has a cost as well. You can add a CNAME to a Cloudfront endpoint address using godaddy instead if you wish to cut on costs. Note that CNAMEs are not available at the root (apex) of the domain, so unless godaddy provides a CNAME flattening service (equivalent to Alias) you can only set it on a subdomain. There is also a cost in purchasing a third party domain or inside AWS. With this feature, you can utilize both without issues.
https://github.com/nilsojc/resumefromstaticwebsite
Leave a Reply