Day 10: Deploying a Static Website on AWS S3 with CloudFront

Overview:
Amazon S3 (Simple Storage Service) is a reliable, scalable, and inexpensive way to host static websites. With CloudFront, AWS’s global content delivery network (CDN), you can improve the performance and security of your website by delivering content from edge locations closer to your users. In this tutorial, we will walk through deploying a static website on AWS S3 and using CloudFront to distribute it globally.

By the end of this guide, you’ll have a static website hosted on S3, accessible via a custom domain with a CloudFront distribution.

Table of Contents

Prerequisites:

AWS Account.
Domain name (optional, but recommended for CloudFront setup).
Basic understanding of HTML/CSS for static websites.
Installed AWS CLI (instructions here).

Step 1: Prepare Your Static Website

Let’s start by preparing a simple static website. This can be a collection of HTML, CSS, and JavaScript files.

Create a directory for your website:

mkdir static-website
cd static-website

Create an index.html file:

touch index.html

Add some simple HTML content to index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Static Website</title>
</head>
<body>
    <h1>Hello, world!</h1>
    <p>Welcome to my static website hosted on S3 and distributed via CloudFront.</p>
</body>
</html>

Feel free to add any additional HTML, CSS, or JavaScript files as needed for your static site.

Step 2: Create an S3 Bucket for Website Hosting

Go to the S3 Console:
Open the Amazon S3 Console.
Create a New Bucket:

Click Create bucket.
Enter a unique Bucket name (e.g., my-static-website-bucket).
Choose the appropriate Region.
Uncheck “Block all public access” to allow public access to the website.
Click Create bucket.

Enable Static Website Hosting:

Go to your bucket and click the Properties tab.
Scroll down to Static website hosting and click Edit.
Choose Enable.
Set Index document to index.html (or the main entry file of your site).
Save the changes.

Step 3: Upload Your Website to S3

Go to the Objects tab in your S3 bucket.
Click Upload.
Upload your index.html (and any other assets like CSS/JS files).
Ensure the files are publicly accessible by selecting the uploaded files, clicking Actions, and choosing Make public.

Now, your static website should be accessible via the S3 website endpoint. You can find the URL by navigating to the Properties tab and scrolling to Static website hosting.

Example:
http://my-static-website-bucket.s3-website-us-east-1.amazonaws.com

Step 4: Set Up a CloudFront Distribution

To improve performance and security, we’ll use CloudFront to distribute the content globally.

Go to the CloudFront Console:
Open the CloudFront Console.
Create a CloudFront Distribution:

Click Create distribution.
Choose Web.
For Origin Domain, select your S3 bucket from the dropdown.
Set the Viewer Protocol Policy to Redirect HTTP to HTTPS (for secure access).
Set Default Root Object to index.html.
Leave other settings as default (you can tweak them for caching or SSL later).
Click Create Distribution.

Once the distribution is created, it may take a few minutes to propagate. You’ll be provided with a CloudFront domain name that you can use to access your website.

Example:
https://d1a2bc3de4f.cloudfront.net

Step 5: Configure a Custom Domain (Optional)

If you have a custom domain, you can configure CloudFront to serve your website using it.

5.1 Configure Route 53 (Optional)

If your domain is managed by AWS Route 53, you can easily create an alias record for your CloudFront distribution.

Go to Route 53 Console.
Click Hosted Zones.
Click on your domain and choose Create Record.
Choose A – IPv4 address and set it to Alias to CloudFront distribution.
Select your CloudFront distribution and click Create.

5.2 Use a Custom Domain with SSL

To enable SSL for your custom domain, follow these steps:

Go to the CloudFront Console.
Select your distribution and click Edit.
Scroll down to the Alternate Domain Names (CNAMEs) section.
Add your custom domain (e.g., www.example.com).
In the SSL Certificate section, request an AWS Certificate Manager (ACM) certificate for your domain.
Once the certificate is validated, apply it to your CloudFront distribution.

Step 6: Enabling Caching and Compression

CloudFront automatically caches your content at edge locations, reducing load times for users around the world. You can configure caching and compression settings to further optimize performance.

6.1 Configure Cache Behavior

Go to the CloudFront Console and select your distribution.
Under the Behaviors tab, click Edit on the default behavior.
Set the Caching behavior to optimize for static content by enabling Object Caching.
Optionally, configure the cache duration (e.g., 24 hours).

6.2 Enable Gzip Compression

Go to the CloudFront Console.
Select your distribution and click Edit.
Scroll down to Compress Objects Automatically and enable compression.
Save the settings.

This will reduce the size of assets like HTML, CSS, and JavaScript files, making your site load faster for users.

Step 7: Testing and Monitoring

Now that your static website is deployed, you can test it using the CloudFront domain (or your custom domain). Make sure everything works as expected, including secure HTTPS access.

7.1 Check Global Availability

Use tools like Global Ping or Uptrends to verify that your website is accessible worldwide.

7.2 Monitor Traffic with CloudFront Logs

CloudFront provides detailed logs for tracking user traffic, performance, and potential issues.

Go to the CloudFront Console.
Select your distribution and click Edit.
Enable Logging and choose an S3 bucket to store the logs.

You can later analyze these logs using AWS Athena or other log analysis tools.

Step 8: Invalidating Cached Content (Optional)

Whenever you update your website, you may want to invalidate cached versions of your files on CloudFront to ensure users see the latest content.

Go to the CloudFront Console.
Select your distribution and click Create Invalidation.
Enter the path(s) you want to invalidate (e.g., /index.html).
Click Create Invalidation.

CloudFront will remove the old version from the cache and replace it with the updated one.

Conclusion

In this tutorial, you learned how to deploy a static website on AWS S3 and use CloudFront to distribute it globally. We covered setting up a custom domain, enabling HTTPS, configuring caching, and monitoring traffic. This combination of S3 and CloudFront provides a cost-effective, scalable, and performant solution for hosting static websites.

With AWS handling the infrastructure, you can focus on delivering great content, knowing that your site is available, secure, and fast for users worldwide.

Feel free to copy and paste the code and configurations to get your own static website up and running on AWS!

Post Views: 172