AWS S3 + CloudFront + Route53 Complete Production Environment Deployment Guide

📅 2026-01-31

✅Part One: Prerequisites Preparation

Preparation Checklist

  • AWS Account (with payment method activated)
  • Your own domain name (e.g.: example.com)
  • Website files ready (HTML/CSS/JS)
  • Browser open to AWS Console (console.aws.amazon.com)

Key Concepts Understanding

  • S3 Bucket: Container for storing website files
  • CloudFront: Global CDN, accelerates content distribution
  • Route53: DNS resolution service, associates domains
  • ACM: Free SSL/TLS certificate service
  • OAC: Origin Access Control, ensures only CloudFront can access S3

💾Part Two: S3 Bucket Creation and Configuration

1Create an S3 Bucket

Path: AWS Console Home → S3 → Buckets → Create Bucket

Detailed Steps

  1. Sign in to AWS Console
  2. In the top search box, type S3 → Click to enter S3 service
  3. In the left sidebar, click "Buckets"
  4. Click the "Create bucket" button (blue)

Fill Out the Form

┌─ Bucket name │ Enter: example-com-website │ ✓ Globally unique │ ✓ Lowercase letters, numbers, hyphens only │ ✓ Cannot start with "xn--" │ ├─ Region │ Select: us-east-1 (or the region closest to you) │ 💡 Recommended to use us-east-1 to reduce CloudFront costs │ ├─ Object Ownership │ Select: ACL disabled │ ├─ Block Public Access settings │ ✓ Keep all checked (will control access via CloudFront later) │ ├─ Versioning │ ○ Disabled (optional, recommended to disable to reduce costs) │ ├─ Server-side encryption │ ○ Use Amazon S3 managed key (SSE-S3) │ └─ Create button Click "Create bucket"
✅ Success Indicator: New bucket appears in bucket list with status ✓

2Enable Static Website Hosting

Path: S3 Bucket → Properties → Edit Static Website Hosting

Detailed Steps

  1. Click on the bucket name you just created (example-com-website)
  2. Click the "Properties" tab (fifth from the right)
  3. Scroll down to find the "Static Website Hosting" section
  4. Click the "Edit" button

Configuration Items

┌─ Static Website Hosting │ ○ Enable ← You must select this option │ ├─ Hosting type │ ○ Host a website ← Select this option (do not select redirect requests) │ ├─ Index document │ Enter: index.html │ Description: File returned when user accesses / │ ├─ Error document │ Enter: error.html │ Description: File returned when 404/403 errors occur │ └─ Save changes → Click "Save" button
✅ Verify Success:
  • Page displays "✓ Update Completed"
  • Under "Static Website Hosting" displays "Enabled"
  • You will see a website endpoint URL

3Upload Website Files

Path: S3 Bucket → Objects → Upload

File Structure Example

my-website/ ├── index.html ← Required ├── error.html ← Required ├── css/ │ └── style.css ├── js/ │ └── app.js ├── images/ │ └── logo.png └── about.html

Upload Methods

Method A: Drag and Drop
Drag the website folder into the upload area, supports recursive uploading of subfolders

Method B: Click to Select
Click "Add file" or "Add folder" and select files one by one
✅ Verify Upload:
  • See upload progress reach 100%
  • After returning to bucket, see list of all files

🔐Part Three: Create Origin Access Control (OAC)

4Create OAC

Path: CloudFront → Security → Origin Access

Detailed Steps

  1. In the top search box, type CloudFront → Enter CloudFront service
  2. In the left sidebar, expand the "Security" menu
  3. Click "Origin Access"
  4. Click the "Create Origin Access Control" button

Fill Out the Form

┌─ Origin Access Control Name │ Enter: s3-website-oac │ Description: For easy identification, customizable │ ├─ Origin Type │ ✓ S3 ← You must select S3 │ ├─ Description (optional) │ Enter: For example.com static website │ └─ Create button Click "Create"
✅ Success Indicator:
  • Newly created OAC appears on page
  • Copy the OAC ID shown (e.g.: E127EXAMPLE51Z)
⚠️ Important Note: Remember the OAC ID, you will need it for subsequent configuration

⚡Part Four: Create CloudFront Distribution

5Create CloudFront Distribution

Path: CloudFront → Distributions → Create Distribution

Origin Configuration - Origin Section

┌─ Origin Domain │ Click input box → Select S3 bucket from dropdown │ Should display: example-com-website.s3.us-east-1.amazonaws.com │ ⚠️ Do not select s3-website endpoint, select standard S3 URL │ ├─ Origin Access │ ○ Origin Access Control Setting ← Select this option │ ├─ Origin Access Control │ Click dropdown → Select "s3-website-oac" created earlier │ └─ Protocol when S3 is the Origin ○ HTTPS Only ← Recommended to select (more secure)

Default Cache Behavior Configuration

┌─ Viewer Protocol Policy │ ○ Redirect HTTP to HTTPS ← Select this option │ Description: Automatically redirects HTTP to HTTPS │ ├─ Allowed HTTP Methods │ ✓ GET, HEAD (keep default) │ ├─ Cache Policy and Origin Request Policy │ Cache Policy: Click dropdown → Select "CachingOptimized" │ Origin Request Policy: Click dropdown → Select "S3Origin" │ └─ Compress Objects ✓ Enable ← Can reduce data costs

Distribution Configuration

┌─ Enable This Distribution │ ✓ Must be checked │ ├─ Alternate Domain Names (CNAME) │ ⚠️ Do not fill in for now, configure later │ ├─ Default Root Object │ Enter: index.html │ Description: File returned when / is accessed │ ├─ IPv6 │ ✓ Enable (already default) │ └─ Create Distribution Click "Create Distribution" button
⏳ Wait: Distribution deployment takes 5-10 minutes, status changes from "In Progress" to "Deployed"

6Copy CloudFront Domain Name

Path: CloudFront → Distributions → Distribution Details

  1. After distribution is created, click on the Distribution ID
  2. In the "Distribution Details" tab view the following information
  3. Copy the distribution domain name (d111111abcd.cloudfront.net)
Distribution Domain Name: d111111abcd.cloudfront.net ↑ Copy this item (for use later) Distribution ID: E1234ABCD

7Apply S3 Bucket Policy

Path: S3 → Bucket → Permissions → Bucket Policy

Operation Steps

  1. Return to S3 service
  2. Select your website bucket (example-com-website)
  3. Click the "Permissions" tab
  4. Scroll down to find "Bucket Policy" and click "Edit"
  5. Paste the following JSON into the edit box

Bucket Policy JSON (requires modification)

{ "Version": "2012-10-17", "Statement": [ { "Sid": "AllowCloudFrontOAC", "Effect": "Allow", "Principal": { "Service": "cloudfront.amazonaws.com" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::example-com-website/*", "Condition": { "StringEquals": { "AWS:SourceArn": "arn:aws:cloudfront::123456789012:distribution/E1234ABCD" } } } ] }
⚠️ Three Items You Must Modify:
  • example-com-website → Replace with your bucket name
  • 123456789012 → Replace with your AWS Account ID
  • E1234ABCD → Replace with your CloudFront Distribution ID
✅ Complete: Click "Save Changes"

🔒Part Five: ACM Certificate Request

8Request SSL/TLS Certificate

Path: ACM (AWS Certificate Manager) → Certificates → Request Certificate

Important Note

⚠️ Region is Very Important: Make sure the region is US East (N. Virginia), CloudFront only supports certificates from this region

Detailed Steps

  1. In the top search box, type Certificate Manager → Enter ACM service
  2. Make sure the region is US East (N. Virginia)
  3. Click the "Request Certificate" button

Fill Out the Form

┌─ Certificate Type │ ○ Public Certificate ← You must select this option │ ├─ Add Domain Names │ Click "Add Domain Name" → Enter: example.com │ Click again → Enter: *.example.com │ │ Final Display: │ ✓ example.com │ ✓ *.example.com │ ├─ Validation Method │ ○ DNS Validation ← Select this option (faster than Email) │ ├─ Key Algorithm │ ○ RSA 2048 (keep default) │ ├─ Tags (optional) │ Enter: website-cert │ └─ Request button Click "Request"

Subsequent DNS Validation

After requesting, the page will prompt you to validate the domain:

Steps:
  1. In the "Domain Validation" section you will see validation records
  2. Click the "Create Route53 Record" button
  3. AWS will automatically add a CNAME record in Route53
  4. Wait 5-30 minutes, status will change to "Issued"
✅ Complete: Certificate status will change to "Issued"

🌐Part Six: Route53 DNS Configuration

9Create Route53 Hosted Zone

Path: Route53 → Hosted Zones → Create Hosted Zone

Detailed Steps

  1. In the top search box, type Route53 → Enter Route53 service
  2. In the left sidebar, click "Hosted Zones"
  3. Click the "Create Hosted Zone" button

Fill Out the Form

┌─ Domain Name │ Enter: example.com │ ⚠️ Do not include www or http:// │ ├─ Description (optional) │ Enter: Website hosting │ ├─ Type │ ○ Public Hosted Zone ← Select this option │ └─ Create Hosted Zone Click "Create Hosted Zone" button

Record Important Information

Hosted Zone ID: Z1234567890ABC ↑ Copy and note this item Name Servers (NS Records): ns-1111.awsdns-22.com ns-2222.awsdns-33.co.uk ns-3333.awsdns-44.org ns-4444.awsdns-55.net ↑ Copy these 4 NS records

10Update Domain Registrar DNS Settings

Operate at Domain Registrar (such as GoDaddy, Namecheap, Aliyun, etc.)

Steps

  1. Log in to your domain registrar account
  2. Find "DNS Management" or "Domain Management"
  3. Modify Name Servers (NS Records) to the 4 you copied above
  4. Save changes
⏳ DNS Propagation: May take 1-48 hours, you can check with the following command:
nslookup example.com # You should see AWS NS records

11Create Alias Records in Route53

Path: Route53 → Hosted Zones → Create Record

Create First Record (Root Domain)

┌─ Record Name │ Leave blank (represents example.com root domain) │ ├─ Record Type │ Click dropdown → Select "A" │ ├─ Alias │ ✓ Enable Alias ← You must check this │ ├─ Select Traffic Policy │ ○ Simple Routing ← Keep default │ ├─ Route Traffic To │ Click dropdown → Select "CloudFront Distribution" │ ├─ Select Distribution │ Click dropdown → Select your distribution (d111111abcd.cloudfront.net) │ ├─ Evaluate Target Health │ ○ No (keep default) │ └─ Create Record Click "Create Record"

Create Second Record (www Subdomain)

Repeat the steps above, but change "Record Name" to www, rest of configuration is the same.

✅ Complete: Both records should point to the same CloudFront distribution

12Configure CloudFront CNAME and Certificate

Path: CloudFront → Distributions → Edit

Steps

  1. Return to CloudFront service
  2. Select your distribution (click on Distribution ID)
  3. Click the "Edit" button
  4. Find the "Alternate Domain Names (CNAME)" field
  5. Click the input box and add two domain names
Add in the Alternate Domain Names input box: example.com www.example.com

Select SSL Certificate

Scroll down to find "Custom SSL Certificate" or "SSL Certificate" ┌─ SSL Certificate │ ✓ Custom SSL Certificate │ ├─ Select Certificate │ Click dropdown → Select the certificate you requested earlier │ Should display: example.com (and *.example.com) │ └─ Save Click "Save Changes"
⏳ Wait for Deployment: Distribution status changes from "In Progress" to "Deployed" (usually 5-10 minutes)

⚙️Part Seven: Configure Caching Policy

13Set Cache for Different File Types

Path: CloudFront → Distributions → Behaviors → Edit

This step is used to optimize costs and performance. Set different cache times for different file types.

Default Behavior Configuration

1. Return to CloudFront distribution edit page 2. Click the "Behaviors" tab 3. Select Default Behavior → Click "Edit" ┌─ Cache Key and Origin Request │ Cache Policy: CachingOptimized (already configured) │ ├─ Viewer Cache Control Request Headers │ ✓ Use Original Cache-Control Headers │ └─ Save Click "Save"

Optional: Create Separate Behavior for HTML

For finer control, you can create different behavior rules for different file types:

HTML File Behavior:
Path Pattern: *.html Cache Policy: Cache Disabled (do not cache, get latest each time) Origin Request Policy: S3Origin
JavaScript File Behavior:
Path Pattern: *.js Cache Policy: CachingOptimized Compress: Enable

✔️Part Eight: Testing and Verification

14Test Website Access

Test URLs

Access in browser: https://example.com https://www.example.com https://d111111abcd.cloudfront.net (CloudFront direct URL)

Success Indicators

  • ✅ Page loads normally
  • ✅ HTTPS is valid (address bar shows lock icon)
  • ✅ Certificate information is correct (click lock icon to view)

Troubleshooting Table

Problem Cause Solution
Shows AWS S3 error page S3 bucket policy not configured correctly Check distribution ID in bucket policy
Shows "Access Denied" OAC not applied correctly Confirm OAC exists in S3 bucket policy
Custom domain name not working Route53 DNS not in effect Wait for DNS propagation (maximum 48 hours)
Invalid SSL certificate ACM certificate not deployed to CloudFront Select correct certificate in CloudFront
Access is slow Cache not working Check Cache-Control header configuration

🚀Part Nine: Performance Optimization

15Configure Cache Header Optimization

Setting appropriate Cache-Control headers for files in S3 can significantly reduce costs and improve performance.

Method A: Through AWS Console

  1. S3 → Bucket → Objects
  2. Select file → "Object Actions" → "Edit Metadata"
  3. Add custom metadata (Key: Cache-Control)

Cache Time Recommendations

File Type Cache-Control Value Description
HTML File public, max-age=300, must-revalidate 5 minutes, must revalidate
CSS/JS/Image public, max-age=31536000, immutable 1 year, requires versioned filenames
API Response public, max-age=0 No cache, get latest each time

Method B: Through AWS CLI

# Upload and configure HTML cache aws s3 cp index.html s3://example-com-website/index.html \ --metadata "Cache-Control=public, max-age=300" # Upload and configure long-term cache for JS/CSS aws s3 cp app.a1b2c3d4.js s3://example-com-website/ \ --metadata "Cache-Control=public, max-age=31536000, immutable"

16Enable Gzip Compression

Enabling automatic compression in CloudFront can reduce traffic by 60-70%.

Steps

  1. CloudFront → Distributions → Edit
  2. Find "Default Cache Behavior"
  3. Check "Enable Compression" ✓
💰 Cost Savings: After enabling compression, text files (HTML, CSS, JS) can reduce transfer volume by 60-70%

📊Part Ten: Monitoring and Cost Control

17Set Up Monitoring Alerts

Monitor CloudFront Costs

  1. Enter CloudWatch or Cost Management
  2. Set up budget alerts
Budget Name: Website Monthly Cost Budget Amount: $10 (example) Alert Threshold: Notify when reaching 80%

Monitor Key Performance Indicators

View the following metrics in CloudFront distribution:

  • Number of Requests: Total requests per day
  • Data Transfer Volume: Size of outbound traffic
  • Cache Hit Rate: Should be > 90%
  • Error Rate: Should be close to 0%

Cost Estimation Table (Monthly)

Service Cost Description
S3 Storage $0.23 10GB × $0.023
S3 GET Requests $0.04 1M ÷ 1000 × $0.0004
CloudFront Outbound Free 1TB free tier (100GB used)
CloudFront Requests Free 10M free tier (1M used)
Route53 $0.50 Hosted zone monthly fee
ACM Certificate Free Free for AWS internal use
Total $0.77/month

Frequently Asked Questions

Q1: How do I update website files?

# Method 1: Use AWS CLI aws s3 cp ./new-file.html s3://example-com-website/ aws s3 sync ./website-files/ s3://example-com-website/ --delete # Method 2: Use AWS Console # S3 → Bucket → Upload → Select file → Upload

Q2: How do I clear CloudFront cache?

  1. CloudFront → Distributions → Invalidations
  2. Create Invalidation → Enter path /* → Create
💡 Tip: This will clear all cached files (usually takes effect in 5 minutes)

Q3: What is the data transfer flow of S3 + CloudFront?

User → CloudFront Edge Node → S3 Bucket ↓ Return Cached Content (fast)

Q4: How do I implement HTTPS redirect?

Already configured in CloudFront:

  • Viewer Protocol Policy: Redirect HTTP to HTTPS

All HTTP requests will be automatically redirected to HTTPS.

✅Summary Checklist

After Deployment, Verify the Following Items

  • S3 bucket created and files uploaded
  • Static website hosting enabled (index.html, error.html)
  • OAC created
  • CloudFront distribution created and deployed
  • ACM certificate requested and verified
  • Route53 hosted zone created
  • Domain registrar DNS updated to Route53 NS
  • Alias records (A records) created
  • CloudFront CNAME configured
  • CloudFront ACM certificate applied
  • https://example.com accessible normally
  • Cache policy optimized
  • Compression enabled
  • Cost monitoring set up

Subsequent Maintenance

Daily Operations

  • Regularly check CloudFront cache hit rate (should be > 90%)
  • Monitor monthly costs
  • Use aws s3 sync command when updating website content

Regular Maintenance

  • Check ACM certificate expiration date (auto-renewal)
  • Verify Route53 DNS configuration is correct
  • Clean up old S3 object versions (if versioning is enabled)

Performance Optimization

  • Use CloudFront real-time logs to analyze cache hit rate
  • Regularly adjust Cache-Control header configuration
  • Consider using Lambda@Edge for edge computing

🎉 Deployment Complete

You now have a production-grade, low-cost static website hosting solution

📊 Cost: $0.50 - $5 average per month
⚡ Performance: Global < 500ms load time
🔒 Security: HTTPS + DDoS protection
📈 Scalability: Automatically handles traffic growth