Using Amazon Cloudfront CDN with Custom Fields

Overview

Before beginning this article, please read the article about using the Amazon S3 integration in Custom Fields. It provides the beginning steps to utilizing your S3 bucket in Custom Fields. This article will explain how to set up a new CDN and use it in Custom Fields. 

Getting Started

If you already have a CDN setup and pointing towards your Amazon S3 bucket, you can skip to the step. Read on to find out how to set up a CDN for your S3 bucket and configure it for use with Custom Fields. 

Login to Amazon Web Services and enter your Management Console (My Account > AWS Management Console). 

AWS_Management_Console.png

From this page, you can see all of your AWS services you have previously used. Click into the search form and type CloudFront and select it when it appears.

From here you will see either previous Distributions you may have created. Click on the Blue Create Distribution Button at the top left. When you begin the wizard, select Get Started under the Web section.

Select_Web.png

Now you will be prompted with Origin Settings and everything that comes with it. If you click in the form to type the Origin Domain Name, your bucket should show up as an available option. Click on it and it will automatically fill in the information.

Scroll down until you reach the option called Query String Forwarding and Caching. Drop it down and select Forward all, cache based on whitelist. This will create a form called Query String Whitelist. Type 'c' in this box. Now go to the bottom and click Create Distribution.

one_punch.png

When you arrive back at the Distributions menu, you may see that the state of the CDN is Enabled, but the status is In Progress, this is because it takes about 20 minutes for a new CDN to Deploy.

deploy.png

While waiting for this, we need to head back to our S3 bucket and change the Bucket Policy and the CORS configuration to make sure that it will work in Custom Fields.

In your Amazon S3 Bucket make sure the user you set up with Custom Fields has proper writing permissions, then head to the Bucket Policy Tab. Here copy the Bucket Policy here:

Just replace YOUR-ARN-HERE with the ARN displayed.

ARN.png

Now, switch tabs to the CORS configuration tab. Paste this code here, no changes needed 

Once your CDN is successfully deployed, go to the general tab and you will see the Domain Name section. If you didn't fill this out, CloudFront will automatically generate one for you. Copy this and head over to Custom Fields.

yoururlhere.png

Using the CDN in Custom Fields

In Custom Fields, hover over settings on the menu bar, and click on Amazon S3 Settings.

2019-03-19_1626.png

Once there, click on the checkbox labeled Use CDN Domain. This will expand the CDN settings. Select whichever protocol your CDN uses (http:// or https://) and paste your CDN URL in the form labeled CDN domain. Click Save Settings and your settings will be saved. 

2019-03-19_1631.png

thats_it.png

If you followed all the steps correctly, you should now see the green text above the forms below that confirm that your settings were saved successfully.