In this tutorial, we will walk through the steps to securely host a static website using Amazon S3 for storage and Amazon CloudFront for content delivery. By using CloudFront, we can ensure secure and faster access to our website without making the S3 objects public.
Step 1: Create an S3 Bucket
Log in to the AWS Management Console.
Navigate to the S3 service.
Click the "Create bucket" button.
Provide a unique and meaningful name for your bucket, and leave all other settings as default. Click "Create bucket."
Step 2: Upload Your Files to S3
Select your newly created bucket.
Click the "Upload" button.
Choose the HTML file and any images you want to upload.
Click "Upload" to upload the files.
Step 3: Verify Access Denied
If you try to access the HTML file directly from the S3 object URL, you will receive an access denied error since the objects are not public.
Step 4: Create a CloudFront Distribution
Navigate to the CloudFront service in the AWS Management Console.
Click the "Create Distribution" button.
In "Origin Domain", choose the S3 bucket created in Step 1.
In "Origin Access," select "Origin access control settings", and create a control setting.
In WAF, choose "Do not enable security protections".
In "Default Root Object," enter 'index.html.'
Click "Create Distribution." This process may take some time.
Step 5: Set Up Origin Access Control
While the CloudFront distribution is being created, click on 'Copy Policy".
Go back to your S3 bucket in the AWS Management Console.
Navigate to the "Permissions" tab and click on "Bucket Policy."
Edit the bucket policy and paste the policy that you copied to grant CloudFront access to the S3 objects.
Save the bucket policy.
Step 6: Access Your Website Using CloudFront
Once the CloudFront distribution is created (check the status in the CloudFront console), copy the provided Distribution Domain Name.
Paste the Distribution Domain Name into a browser to access your website securely.
If you reload the page, you will notice faster loading times for images due to CloudFront caching. CloudFront stores images in its edge locations, making subsequent retrievals quicker.
Congratulations! You have successfully set up a secure and efficient static website using Amazon S3 and CloudFront. The use of CloudFront's edge locations enhances the loading speed of your website's images upon reloads.