AWS Builder Center

Builder Center

Host Your Static Website Globally with Amazon S3 and CloudFront

Deploying a modern frontend application (built with React, Vue, Next.js, or just plain HTML/CSS) shouldn't require maintaining a complex server. While you can host files directly out of an object storage bucket, exposing a storage bucket directly to the public internet poses security risks and lacks optimization.

Why Use S3 + CloudFront Instead of Just S3?
• Enhanced Security: By keeping your S3 bucket strictly private and using Origin Access Control (OAC), users can only access your files through the secure CloudFront URL.
• Global Speed: CloudFront caches your website at edge locations worldwide, ensuring blazing-fast loading speeds for users regardless of their location.
• Cost Efficiency: S3 storage is incredibly cheap, and CloudFront offers a massive free tier for data transfer, making this setup virtually free for low-to-medium traffic sites.
Step 1: Create a Private Amazon S3 Bucket
First, we need a secure storage space to hold our website's static assets (HTML, CSS, JS, images).
  1. Log into the AWS Management Console and navigate to S3.
  2. Click Create bucket.
  3. Configure the settings:
    • Bucket name: Enter a globally unique name (e.g., my-awesome-portfolio-2026).
    • Object Ownership: Leave as ACLs disabled.
    • Block Public Access settings: Keep the checkbox checked for "Block all public access". We want this bucket to remain completely private.
  4. Click Create bucket.
  5. Click into your new bucket, click Upload, and upload a simple index.html file containing some basic HTML code
    Step 2: Set Up Amazon CloudFront Distribution
    Next, we will set up the Content Delivery Network (CDN) to fetch files safely from our private bucket and serve them to the world.
  6. Navigate to CloudFront in the AWS Console and click Create distribution.
  7. Under Origin:
    • Origin domain: Select the S3 bucket you just created from the dropdown menu.
    • Origin access: Choose Origin access control settings (recommended).
    • Click Create control setting, leave the defaults, and click Create. This allows CloudFront to authenticate with your private S3 bucket.
  8. Under Default cache behavior:
    • Viewer protocol policy: Select Redirect HTTP to HTTPS for modern security.
  9. Under Settings:
    • Default root object: Type index.html.
  10. Scroll to the bottom and click Create distribution.
    Step 3: Update the S3 Bucket Policy
    Once the distribution is created, AWS will display a prominent banner at the top of your screen telling you to update your S3 bucket policy.
  11. Copy the policy provided in the banner (or click Copy policy).
  12. Go back to your S3 Bucket, select the Permissions tab, and scroll down to Bucket policy.
  13. Click Edit, paste the copied JSON block into the editor, and click Save changes.
    This explicit policy grants CloudFront—and only CloudFront—permission to read the files inside your private bucket.
    Step 4: Test Your Live Website
  14. Return to your CloudFront Distribution.
  15. Look for the Distribution domain name (e.g., d123456abcdef.cloudfront.net).
  16. Copy the domain name and paste it into a new browser tab.
    Your Expected Output:
    You should see the contents of your index.html file render instantly over a secure HTTPS connection.
Any opinions in this article are those of the individual author and may not reflect the opinions of AWS.
Enjoyed reading this content? Let the author know!

Your likes, comments, shares, and saves help creators reach more builders.

Loading recommendations

Loading article