Creating a Static Website using Amazon S3 and CloudFront
At the Core of every business and organization, is their data. When a website is created, it is important to ensure data availability, reliability and security. AWS offers several services to ensure scalability, durability and security and some of them are the Simple Service Storage (S3) and CloudFront for content delivery.
In this article, I will be hosting a static website using Amazon S3 and an important resource called Amazon CloudFront. Yes, before I start deploying the services, let me briefly explain what Amazon S3 and Amazon CloudFront services are, and why I am using these two services to host my website.
Amazon S3 is an object storage service that is designed to provide 99.999999999 percent of data durability. This means whatever you saved in S3 is highly secure. Therefore, you can expect a reliable service delivery when you use S3 to host your website.
CloudFront is a global content delivery network that delivers content to AWS edge locations. The aim of using a CloudFront service is to provide a low latency by caching content at edge locations closer to users.
Now that we have a clearer understanding of Amazon S3 and CloudFront, it is time to deploy our application.
Log in to the AWS Console
Search for S3
Click on create bucket
Put in your unique Bucket name
Uncheck the “Block all public Access” box
You can go with the other default settings based on your needs. Click on Create bucket
You should see that your bucket is created successfully.
Click on the bucket you just created, and use the Upload button to upload your files and folders
Use the “Add files” option to upload only files and use the“Add folder” option to upload only folders.
Scroll down and hit the Upload button
Ensure the uploads are successful. If any file or folder failed to upload, it will be shown in the “failed” area.
Go to the Bucket Properties and enable Static web Hosting. Specify the document that will load when your page is being accessed, which is by default the “index.html” document and you can also specify the Error document, its optional.
Make sure the “Block all public access” is turned off
Still under Permissions , add a bucket policy. You can check AWS documentation for S3 policy examples
Examples of Amazon S3 bucket policies
See examples of typical use cases for Amazon S3 bucket policies.
CLOUDFRONT FOR CONTENT DELIVERY
Search for CloudFront in the AWS console
- Click on Create distribution
Enter the S3 Bucket website endpoint as the origin domain which can be gotten from the bucket permission below
Note: You can verify the website accessibility from a search engine with the “Bucket website endpoint”.
Stick with the default settings and hit the “Create distribution” button
You should have something like this when the creation is successful. Test it with the distribution domain name.
Viola!!! The website is live.
