Hosting a Static Website with S3 and CloudFront

Lesson Objectives

By the end of this lesson, you will:

1. Understand the architecture for hosting a static website using Amazon S3 and CloudFront.
2. Learn to configure an S3 bucket for static website hosting.
3. Set up CloudFront to deliver content with high performance and low latency.
4. Test and validate the hosted website.

Introduction: Scalable and Fast Website Hosting

Static websites (HTML, CSS, JavaScript) are simple to host, and AWS provides an efficient and scalable solution for doing so using Amazon S3. To further optimize delivery, you can integrate CloudFront, AWS’s content delivery network (CDN), ensuring fast, global access to your website.

In this chapter, we’ll deploy a static website with S3 and CloudFront and configure security and caching for optimal performance.

Architecture Overview

1. Amazon S3:
   • Stores static files like HTML, CSS, and JavaScript.
2. Amazon CloudFront:
   • Distributes content globally with edge caching for faster delivery.
3. Custom Domain (Optional):
   • Use Route 53 to configure a custom domain name.

Step-by-Step Deployment

Part 1: Set Up an S3 Bucket for Static Website Hosting

1. Log in to AWS:
   • Open the AWS Management Console and search for S3.
2. Create an S3 Bucket:
   • Click Create Bucket.
   • Bucket Name: Enter a globally unique name (e.g., my-static-website-bucket).
   • Region: Choose the region closest to your target audience.
   • Bucket Settings: Uncheck Block All Public Access (you’ll enable public access for website hosting).
3. Upload Website Files:
   • Open the bucket and click Upload.
   • Add your static website files (e.g., index.html, style.css).
4. Enable Static Website Hosting:
   • Go to the Properties tab of your bucket.
   • Under Static Website Hosting, click Edit and enable it.
   • Specify the Index Document (e.g., index.html).
   • Save changes.
5. Make Files Public:
   • Go to the Permissions tab.
   • Edit the Bucket Policy to allow public read access:
     

     
     {
         “Version”: “2012-10-17”,
         “Statement”: [
             {
                 “Sid”: “PublicReadGetObject”,
                 “Effect”: “Allow”,
                 “Principal”: “*”,
                 “Action”: “s3:GetObject”,
                 “Resource”: “arn:aws:s3:::my-static-website-bucket/*”
             }
         ]
     }
     

6. Test the Website:
   • Copy the Bucket Website Endpoint (found in the Static Website Hosting settings) and open it in a browser.
   • You should see your website.

Part 2: Set Up CloudFront for Content Delivery

1. Navigate to CloudFront:
   • In the AWS Management Console, search for CloudFront.
2. Create a CloudFront Distribution:
   • Click Create Distribution.
   • Origin:
     • Specify the S3 bucket URL as the origin.
   • Default Cache Behavior:
     • Cache HTTP methods: GET, HEAD.
   • Viewer Protocol Policy:
     • Redirect HTTP to HTTPS for secure access.
   • Click Create Distribution.
3. Wait for Deployment:
   • It may take a few minutes for CloudFront to deploy the distribution.
4. Test the CloudFront URL:
   • Once deployed, copy the CloudFront Distribution Domain Name and open it in a browser.
   • Your static website should load.

Part 3: (Optional) Use a Custom Domain

1. Register a Domain:
   • Use Route 53 or a third-party registrar to purchase a domain name.
2. Create a Hosted Zone:
   • In Route 53, create a hosted zone for your domain.
3. Add DNS Records:
   • Add an A Record (Alias) pointing your domain to the CloudFront distribution.
4. Enable SSL:
   • Use AWS Certificate Manager (ACM) to request an SSL/TLS certificate for your domain.
   • Attach the certificate to your CloudFront distribution.

Part 4: Optimize CloudFront

1. Enable Caching:
   • Configure cache settings to optimize performance:
     • Set a longer TTL for static assets like images and CSS files.
   • Adjust settings under Behaviors in the CloudFront console.
2. Set Up Logging:
   • Enable access logs for your CloudFront distribution to monitor traffic patterns.

Reflection: Why Use S3 and CloudFront for Hosting?

1. Scalability: S3 and CloudFront handle traffic spikes without additional configuration.
2. Performance: CloudFront caches content at edge locations for faster delivery worldwide.
3. Cost-Effectiveness: Pay only for what you use, with no upfront costs.
4. Security: HTTPS ensures secure content delivery.

In this lesson, you deployed a static website with S3 and CloudFront, explored caching and security, and tested your setup. This architecture is ideal for hosting simple websites, portfolios, or documentation.

What’s Next?

In the next chapter, we’ll configure Route 53 for Domain Name Management, integrating your custom domain with the static website.

Your journey into website hosting continues—let’s build more!