How to Deploy a Static Website on AWS S3 and CloudFront

Deploying a static website on AWS S3 (Simple Storage Service) and using CloudFront as a CDN (Content Delivery Network) is a popular and cost-effective solution for hosting static websites globally. In this tutorial, I’ll walk you through the process step-by-step.

Prerequisites:

An active AWS account
AWS CLI configured on your machine (optional for automation)
Basic knowledge of S3 and CloudFront

Step 1: Create an S3 Bucket for Static Website Hosting

1.1 Log in to the AWS Management Console

Go to the AWS Management Console.
Enter your credentials and log in.

1.2 Create an S3 Bucket

In the search bar, type “S3” and select the service.
Click on “Create bucket.”
Enter a globally unique bucket name (e.g., my-static-website).
Choose the region closest to your audience for better performance.
Click “Create bucket” to complete the process.

1.3 Configure the Bucket for Static Website Hosting

Navigate to your new bucket and click on it.
Go to the Properties tab.
Scroll to Static website hosting, click Edit, and select “Enable.”
Set your index document (e.g., index.html).
Optionally, specify an error document (e.g., error.html) for error handling.
Save your changes.

1.4 Upload Your Website Files

Go to the Objects tab within the bucket.
Click on “Upload,” add your website files (HTML, CSS, JavaScript, images), and confirm the upload.

Step 2: Set Bucket Permissions for Public Access

2.1 Make the Bucket Public

In your S3 bucket, navigate to the Permissions tab.
Scroll to Bucket Policy and click Edit.
Add the following policy to make the bucket publicly accessible:

Copy Code

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

Make sure to replace my-static-website with your actual bucket name.

Click Save changes.

2.2 Enable Cross-Origin Resource Sharing (CORS)

If your website makes requests to other domains (e.g., APIs), you need to enable CORS.
In the Permissions tab, scroll down to CORS configuration and click Edit.
Add the following rules:

Copy Code

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
  </CORSRule>
</CORSConfiguration>

Save your changes.

Step 3: Set Up CloudFront as a CDN

3.1 Create a CloudFront Distribution

Go to the CloudFront service in the AWS console.
Click on “Create Distribution.”
Select Web and click Get Started.

3.2 Configure CloudFront Distribution

Origin Domain Name: Select your S3 bucket from the list.
Origin Path: Leave this blank unless you want to point CloudFront to a subdirectory.
Viewer Protocol Policy: Choose “Redirect HTTP to HTTPS” for secure connections.
Allowed HTTP Methods: For a static website, “GET, HEAD” is sufficient.
Default Cache Behavior: Customize caching rules according to your website needs.
Configure additional settings, such as error pages and logging, if required.

3.3 Create Distribution

Click Create Distribution and wait for CloudFront to deploy.
After a few minutes, you’ll get a CloudFront Domain Name (e.g., d123456abcdef8.cloudfront.net).

Step 4: Update DNS Settings for Custom Domain

4.1 Configure Your Domain’s DNS

If you’re using a custom domain, go to your domain registrar (e.g., Route 53, GoDaddy) and create a CNAME record.
Point this CNAME to your CloudFront Domain Name (d123456abcdef8.cloudfront.net).

4.2 Test Your Setup

Open your website using either the CloudFront domain name or your custom domain.
Verify that the website loads properly and that all resources (images, stylesheets, scripts) are accessible.

Conclusion

With AWS S3 and CloudFront, we have successfully deployed a static website that can handle global traffic with low latency and high reliability. Using CloudFront as a CDN helps in delivering content faster to your users, while S3 ensures secure, scalable storage for your files. If you need to update your site, simply replace the files in your S3 bucket and CloudFront will automatically propagate the changes.