Static Website Hosting with Amazon S3 and CloudFront

This project demonstrates how to host a static website using Amazon Simple Storage Service (S3) and deliver the content globally with Amazon CloudFront, a Content Delivery Network (CDN).

Amazon S3 provides secure, scalable, and reliable storage for your website files. CloudFront improves website performance by caching your content in multiple edge locations worldwide, reducing latency for users.

Project Objectives

• Configure static website hosting on Amazon S3
• Configure Amazon CloudFront distributions to work with S3 static websites
• Secure your website by restricting S3 bucket access to CloudFront only

Step 1: Log in to the AWS Management Console

1. Go to AWS Console.
2. Log in using your AWS credentials.

Step 2: Create an Amazon S3 Bucket for Your Static Website

1. In the AWS Console search bar, type S3, and select S3 under Services.
2. Click Create bucket in the top-right corner.
3. Under General configuration, fill in:
   • Bucket name: demo-bucket- + unique number (bucket names must be globally unique)
   • Region: Select your preferred region, e.g., US West (Oregon) us-west-2
4. Enable ACLs (Access Control Lists).
5. Under Block Public Access, uncheck Block all public access.
6. Confirm by checking I acknowledge that the current settings might result in this bucket and the objects within becoming public.
7. Scroll down and click Create bucket.

Enable Static Website Hosting on the Bucket

1. Click your newly created bucket name in the S3 console.
2. Go to the Properties tab.
3. Scroll down to Static website hosting and click Edit.
4. Select Enable.
5. Set:
   • Index document: index.html
   • Error document: error.html
6. Click Save changes.

Step 3: Upload Your Website Files to the S3 Bucket

Set Bucket Policy for Public Read Access

1. In the S3 console, open your bucket and click the Permissions tab.
2. Scroll down to Bucket policy and click Edit.
3. Paste the following policy, replacing YOUR_BUCKET_NAME with your bucket name:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
    }
  ]
}

Upload Website Files

1. Go to the Objects tab in your bucket.
2. Click Upload → Add files.
3. Select all your website files and folders (make sure index.html is at the root level).
4. Click Upload.

Test Website Access

1. Go to the Properties tab.
2. Scroll down to Bucket website endpoint and click the copy icon.
3. Paste the URL in your browser — you should see your website load.

Step 4: Create a CloudFront Distribution for Your Website

Amazon CloudFront speeds up your website by caching content in edge locations worldwide.

Configure CloudFront

1. In AWS Console, search for CloudFront and open it.
2. Click Create Distribution → Get Started under Web.
3. Under Origin domain, enter your S3 static website endpoint URL (from Step 3).
4. Under Origin access control, select Create control setting:
   • Name: demo-s3cf- + unique number
   • Signing behavior: Sign requests
5. Click Create.
6. Leave other settings as default.
7. Under Price Class, select Use only North America and Europe (optional to reduce cost).
8. In Default root object, enter index.html.
9. Click Create distribution.

Update S3 Bucket Policy for CloudFront Access

1. After distribution creation, click Copy policy from the CloudFront distribution page.
2. Return to your S3 bucket’s Permissions tab → Bucket policy → Edit.
3. Replace your current bucket policy with the copied policy to allow access only from CloudFront.
4. Click Save changes.

Block Public Access to the Bucket

1. In your S3 bucket, under Permissions → Block public access, click Edit.
2. Check Block all public access and save.
3. Confirm by typing confirm.

This restricts public access directly to the S3 bucket, forcing users to go through CloudFront.

Step 5: Test Your Website Through CloudFront

1. Go to the CloudFront Distributions list.
2. Wait until the distribution status is Enabled (can take 10-15 minutes).
3. Copy the Distribution Domain Name (e.g., abc123.cloudfront.net).
4. Paste the URL in a browser — your website should load via CloudFront.

Summary

• Created an Amazon S3 bucket configured for static website hosting.
• Uploaded website files and made them publicly accessible.
• Created a CloudFront distribution to cache and deliver website content globally.