Amazon S3 To Host Static Website
Increasing Reliability and Availability with CloudFront
Before we start creating this project, let's discuss what Amazon S3 and CloudFront are. S3 (Simple Storage Service) is an object storage service for storing data in buckets. S3 is a global service that gives us 99.999999999% durability, also known as the 11 9’s; however, the buckets are region-specific. CloudFront is a content delivery network (CDN) that allows us to cache data in edge locations. This provides better latency and faster access speed for accessing the content, which is optimal for delivering fast secure websites.
S3 Static Website
Step1) Create a bucket:
- Go to the Amazon S3 console and select Create bucket. (Remember the bucket name must be unique and not contain spaces or uppercase letters)
- Enter Bucket name and choose the AWS Region
- Leave everything else set to default settings and click
Step 2) Enable static website hosting:
- Within the newly created bucket, select the Properties tab. Then under Static website hosting, choose
- Choose Enable Static website hosting
- For Index document, enter index.html
- Now select
Step 3) Upload custom index.html and an image to the bucket
- Select the Objects tab and click
- From here, I uploaded the index.html file that I customized and my personalized LinkedIn banner; however, you could simply upload an image of your choice.
Uploadonce again, we can now see both objects successfully uploaded to the bucket.
- Moving over to CloudFront, click on
Create a CloudFront distribution
- For the Origin domain, choose the newly created S3 bucket created
- Under S3 bucket access, choose ⦿Yes use OAI (bucket can restrict access to only CloudFront)
- Now under Origin access identity, select
Create new OAI. It will automatically bring up a screen with the new OAI, and all you have to do is click
- For Bucket policy, select ⦿Yes, update the bucket policy. This will create and attach a policy to our S3 bucket and allow us to access our objects through CloudFront.
- Scrolling down to Default root object, add in index.html
- Leave everything else set to default settings and select
- The CloudFront distribution is now deploying. You will have to wait a couple of minutes for it to finish. Once deployed, you can copy the Distribution domain name and paste it into a new tab. Then hit enter.