Overview
Hello everyone, in this article, I will be going over how to host a static website on Amazon S3 using CloudFront. This will be the first of many projects I will document here on Medium. Let’s get to it!
Some benefits of hosting a website on S3 include:
- Cost Savings: S3 is more cost-effective compared to EC2 instances or on-premises servers
- Improved Scalability: S3 provides automatic scalability
- High Availability: S3 is highly available and durable provided website access to users at all times
- Reduced Management Overhead: S3 reduces the need to manage the website
Prerequisites
- An Amazon Web Services (AWS) Account
- An IAM user with administrative privileges (optional)
Steps
For this first part, I will be creating an S3 bucket which will have some code in a file called “index.html” to provide the landing page of a fictitious bank’s website.
- Login to your AWS account and navigate to the S3 console. You can use the search box at the top of the page to search for “S3” or see if S3 is in your Recently Visited section.
2. Once in the S3 console, click on “Create bucket”.
3. Create a bucket. Note that the bucket has to be a globally unique name. i.e. no one else in the world using S3 can have the same bucket name as yours. Don’t worry, it’s easier than you think to create one. I usually just add some numbers to mine to make it unique.
4. Uncheck “Block all public access” as we need to be able to publicly access the content of the bucket using the internet.
5. Edit the bucket policy to allow for public access. The code is seen below. Make sure to replace “YOUR-BUCKET-ARN” with the Amazon Resource Name (ARN) of your bucket. Once you’ve made these changes, click on Save.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AllowPublicAccesstoObjects",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "YOUR-BUCKET-ARN/*"
}
]
}
6. Go into the bucket you created and upload the “index.html” file with the home page website code.
7. Enable Static website hosting for the bucket. This can be done under the Properties section of your bucket.
Change the static website hosting to “Enable” and type in the name of the default page of the website (i.e. the “index.html” that was uploaded”)
8. A bucket website endpoint will be created. Copy that and paste it in your browser and the home page of the website will be seen.
Now, you want to be able to have users access this website using CloudFront.
CloudFront is a content delivery network (CDN) service by AWS that delivers fast and secure websites. It will help improve the performance of the website using Edge caching.
9. Go to the CloudFront console in AWS and click on “Create a CloudFront distribution”
10. Fill in the following:
- Origin Name: This will be the bucket website endpoint we copied earlier. Remove the “ http:// ”
- Under default cache behavior, change Viewer to “Redirect HTTP to HTTPS”. This is being done to ensure the CloudFront URL can only be accessed using HTTPS
- Leave all other default settings and click on “Create distribution”
11. The distribution will be created but will take a few minutes to deploy. Once it does, click on the distribution, copy the distribution domain name, paste it into a browser and the website home page will show up.
Change the URL from https to http and you will see it automatically redirects to https.
If you’re up to it, you can add another layer of complexity to make sure the content of the S3 bucket cannot be accessed directly using the object URL or the bucket website endpoint.
To do this, public access to the bucket will need to be blocked and CloudFront Origin Access Control will be utilized.
12. Go to the Permissions section of your S3 bucket and edit to Block Public Access. Type in “confirm” when prompted and click “Save changes”
13. Go to the CloudFront distribution created and Click Edit.
- Change the origin name to your Bucket. It will be listed
- Change origin access to “Origin access control settings”
- Click on Create control setting. Give it a name, and change the Origin type to S3. This will create a policy that we will copy to our S3 bucket policy
- Copy the policy, go to your bucket and replace the existing policy with the copied one and save the changes
14. Now, when the bucket website endpoint or object URL is used, access is denied but when the CloudFront distribution URL is used, the homepage of the website is seen
And that’s it. Thank you for reading if you made it this far. Please let me know if you have any questions or if you noticed anything I could have done differently.
Give yourself a high-five if you completed this!
