Securely Host a Static Website with Amazon S3 and CloudFront

In today's digital landscape, having a fast and secure website is paramount. This tutorial will guide you through the process of securely hosting a static website using Amazon S3 for storage and Amazon CloudFront for content delivery. By leveraging CloudFront, you can ensure secure and accelerated access to your website without making the S3 objects public.

---

Step 1: Create an S3 Bucket

Instructions:

1. Log in to the AWS Management Console.

2. Navigate to the S3 service.

3. Click the "Create bucket" button.

4. Provide a unique and meaningful name for your bucket, and leave all other settings as default.

5. Click "Create bucket."

Explanation:

Creating an S3 bucket is the first step to host your static website files. Ensure the bucket name is unique and identifiable.

---

Step 2: Upload Your Files to S3

Instructions:

1. Select your newly created bucket.

2. Click the "Upload" button.

3. Choose the HTML file and any images you want to upload.

4. Click "Upload" to upload the files.

Explanation:

Upload your website's HTML and image files to the S3 bucket. These files will be stored securely and accessed through CloudFront.

---

Step 3: Verify Access Denied

Instructions:

1. Try to access the HTML file directly from the S3 object URL.

2. You should receive an access denied error since the objects are not public.

Explanation:

This step confirms that the S3 bucket is private, ensuring that your files are not publicly accessible, enhancing security.

---

Step 4: Create a CloudFront Distribution

Instructions:

1. Navigate to the CloudFront service in the AWS Management Console.

2. Click the "Create Distribution" button.

3. In "Origin Domain," choose the S3 bucket created in Step 1.

4. In "Origin Access," select "Origin access control settings," and create a control setting.

5. In WAF, choose "Do not enable security protections."

6. In "Default Root Object," enter index.html.

7. Click "Create Distribution." This process may take some time.

Explanation:

CloudFront serves as a content delivery network (CDN) that distributes your content to various edge locations, improving access speed and security.

---

Step 5: Set Up Origin Access Control

Instructions:

1. While the CloudFront distribution is being created, click on 'Copy Policy'.

2. Go back to your S3 bucket in the AWS Management Console.

3. Navigate to the "Permissions" tab and click on "Bucket Policy."

4. Edit the bucket policy and paste the policy that you copied to grant CloudFront access to the S3 objects.

5. Save the bucket policy.

Explanation:

This step ensures that CloudFront has the necessary permissions to access your S3 bucket securely, without exposing your S3 objects to the public.

---

Step 6: Access Your Website Using CloudFront

Instructions:

1. Once the CloudFront distribution is created (check the status in the CloudFront console), copy the provided Distribution Domain Name.

2. Paste the Distribution Domain Name into a browser to access your website securely.

Explanation:

Access your website through the CloudFront URL. You'll notice faster loading times for images due to CloudFront's edge location caching.

---

Conclusion

Congratulations! You have successfully set up a secure and efficient static website using Amazon S3 and CloudFront. By utilizing CloudFront's edge locations, you enhance the loading speed of your website's images and other content, providing a better user experience. This setup not only ensures security but also leverages AWS's global infrastructure to deliver your content swiftly and reliably.

Happy Learning!

Follow me on LinkedIn.