Serve your files using the CloudFront CDN

Introduction:

In this guide, we’ll set up an Amazon S3 bucket with CloudFront to deliver a publicly accessible demo image gallery. Using CloudFront, AWS’s content delivery network (CDN), helps reduce latency and enhances load times by distributing content from edge locations worldwide. These steps will help you securely host and serve content with S3 and CloudFront.

Steps:

• Login to AWS
  Access your AWS Management Console to work with S3 and CloudFront services.
• Creating an Amazon S3 Bucket
  Create a unique S3 bucket to store your demo gallery files.
• Creating a CloudFront Distribution
  Set up a CloudFront distribution to serve content from your S3 bucket, applying settings for performance and security.
• Uploading a Demo Image Gallery to the S3 Bucket
  Upload the “gallery” folder or demo images to the S3 bucket.
• Making the Amazon S3 Objects Publicly Accessible
  Adjust S3 bucket permissions to make objects publicly accessible, allowing CloudFront to access the content.
• Testing the CloudFront Distribution
  Access the CloudFront URL to confirm that the demo gallery is served correctly.
• Disabling a CloudFront Distribution
  When finished, disable the distribution to prevent additional charges.
• Deleting a CloudFront Distribution
  Delete the distribution after disabling it to fully remove it from your account.
• Destroying an S3 Bucket
  Empty the bucket of all objects, then delete it to free up resources and prevent unnecessary storage costs.

1. After signing into AWS, we create an S3 bucket with a unique name, set ACL Enabled, and keep the other options as default.

2. We’ve now created an empty bucket. Next, to deploy the CloudFront service, navigate to the CloudFront section.

3. Then, click on Create CloudFront distribution, and select the S3 bucket we created. Under Origin, in the Origin access section, select Origin access control settings and click Create control setting. Under Create control setting, enter the following values:

• Name: Enter a name, starting with your choice (you can use the same name as the S3 bucket; I’ll keep it the same).
• Signing behavior: Ensure Sign requests is selected. Origin access control secures S3 origins by allowing access only to designated distributions, following AWS best practices for using IAM service principals to authenticate with S3 origins.

Under Web Application Firewall, select Do not enable security protections.

Scroll down to Settings, and in the Price class selection, choose Use only North America and Europe:

Amazon CloudFront minimizes end-user latency by delivering content from its global network of edge locations. Price Classes help reduce delivery costs by excluding more expensive edge locations. In such cases, CloudFront delivers content from the selected locations within the price class, charging based on the actual delivery location.

The time required to deploy a new CloudFront distribution depends on the number of selected edge locations. Selecting all edge locations may increase deployment time.

In the Default root object field, enter /gallery/index.html.

CloudFront will serve the default root object when the base distribution URL is requested.

To finish configuring your distribution, scroll to the bottom of the page and click Create distribution.

4. Ensure you apply these settings; you can leave all other options at their default values

5. You will be brought to the distribution details page.

CloudFront automatically assigns an ID (top of the page) and a Distribution domain name to the distribution and starts updating the edge locations to serve your content:

6. Return to the Distributions table by clicking the breadcrumb link at the top of the page. Within the table, observe the Status field of your distribution. It will read Enabled while the Last modified field will display Deploying.

You do not need to wait for the distribution to finish deploying completely, and you may proceed to the next lab step now.

7. Now, download this folder from the link below: https://drive.google.com/drive/folders/1Sxsk77HcP-_wGVxWsNSglqAskkJGHrIp?usp=sharing

8. Then, upload the gallery folder to our S3 bucket that we created

9. Then, go to the Permissions tab of that bucket. Click on Edit for Block public access (bucket settings), uncheck Block all public access, and save your changes. Scroll to the bottom and click Save changes.

10. Scroll down to the Bucket policy section and click Edit. In the Policy editor, replace the existing contents with the following bucket policy:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": "BUCKET_ARN/*",
      "Principal": "*"
    }
  ]
}

11. After saving changes, the modifications mean that all files in your bucket are now publicly available.

12. To see the contents of the gallery folder, click the Objects tab, and in the table, click gallery/:

13. Click the index.html object:

You will see an overview of this object.

14. Under Object URL, click the link:

15. You will see the Demo Gallery webpage load:

16. Now, we can see that our object is publicly accessible, but currently, we are exposing the S3 URL directly. Our goal is to implement CloudFront as well to handle content delivery

17. Navigate back to the Amazon CloudFront Distributions, opens in a new tab page in the AWS Console and click on the previously created distribution.

Observe that your CloudFront distribution is now deployed. The Status of your distribution should still display Enabled along with the recent date and timestamp under Last modified. Recall that this field previously read Deploying while your distribution was spinning up.

Now that the previously created distribution is ready, you can browse the demo gallery boosted by CloudFront Edge locations.

18. Copy the value in the Distribution domain name column

19. Open a new browser tab and paste the following in the address bar, replacing <YOUR DISTRIBUTION DOMAIN NAME> with the domain name from the previous instruction:

• <YOUR DISTRIBUTION DOMAIN NAME>/gallery/index.html

You should experience a dramatic increase in the loading speed during image loading.

20. Then, in the CloudFront settings, add the default root path as /gallery/index.html

21. Here, you can see our CloudFront domain followed by the URL. This is how we can use CloudFront to access our content

22. From the Amazon CloudFront Distributions, opens in a new tab page, select your CloudFront distribution. In the row of buttons above the distribution table, click Disable

Observe the Status field:

Note: It will take a least two or three minutes to disable the distribution. For distributions to all edge locations, it can take up tofifteen minutes.

23. Then, you can delete your CloudFront distribution, followed by the S3 bucket. First, empty the bucket, and then delete it.

Conclusion:

By following these steps, you’ve created a publicly accessible image gallery using Amazon S3 and CloudFront, demonstrating how CloudFront can improve access speed and manage content across regions. Deleting the distribution and bucket when done ensures efficient resource management.