Documentation

CloudFront Setup for Media Offloaded to Amazon S3

This doc aims to help you start delivering your WordPress Media Library items via Amazon CloudFront as quickly as possible.

It is assumed that you’ve already set up an Amazon S3 bucket and followed the steps within our Amazon S3 Quick Start Guide.

This article covers the following steps:

  1. Create a free HTTPS Certificate
  2. Create an Amazon CloudFront Origin Access Identity
  3. Create an Amazon CloudFront distribution
  4. Add a Custom Domain (CNAME) to the distribution
  5. Configure WP Offload Media to use Amazon CloudFront
  6. Block All Public Access to Bucket
  7. Next Steps: Deliver private media via Amazon CloudFront

For improved SEO and more professional private media URLs when using Amazon CloudFront, we recommend following the entire doc and using a subdomain of your site’s domain for the distribution.

However, if for some reason you do not wish to use a custom subdomain for your distribution and would instead like to just use the default random domain generated by Amazon CloudFront, feel free to skip the Create a free HTTPS Certificate and Add a Custom Domain (CNAME) to the distribution sections. Other sections will mention any changes to their instructions should you not be wanting a custom subdomain.

Create a Free HTTPS Certificate

Log into the AWS Console and visit the Certificate Manager page.

Because your new certificate is to be used with the “global” Amazon CloudFront service, you must create the certificate in the default us-east-1 (N. Virginia) region. To ensure you are working in the default us-east-1 (N. Virginia) region, pick it from the top-right menu.

OME CloudFront Setup - Certificate Manager page showing region select menu and Request a certificate button.

If you have never provisioned a certificate on your Amazon AWS account, you’ll be presented with this landing page. Click Request a certificate.

Get started provisioning certificates.

If you already have provisioned certificates, click the Request button at the top of the list of certificates.

Request a new certificate.

You’ll be given the choice of creating a public or private certificate, choose Request a public certificate and then click Next.

OME CloudFront Setup - Certificate Manager page giving choice of public or private certificate.

It’s now time to configure the domain name for the certificate, validation method, and any tags.

We strongly recommend using a wildcard certificate that is able to protect multiple subdomains of your site’s primary (often called Apex) domain. For this example the site is hosted at “www.hellfish.media”. In that case you should enter the domain “*.hellfish.media” so that the certificate can automatically protect the domain “cdn.hellfish.media”, but also “assets.hellfish.media” or any other subdomain of “hellfish.media” that you might want to later use with an Amazon AWS service.

If you do not wish to have the flexibility of being able to use any subdomain with other Amazon CloudFront distributions or AWS services, then you can enter the full subdomain you wish to use for the distribution, e.g. “cdn.hellfish.media”.

You can also have a certificate cover more than one domain by clicking the Add another name to this certificate button.

You’re given the choice of using either DNS Validation or Email Validation. Pick DNS validation.

You’re also given the opportunity to add tags. Adding tags is purely optional, if you’re a heavy user of AWS you may have a reason to add tags here to help with management tasks, but otherwise they can be left out.

Once you’ve made your choices, click the Request button to request the certificate.

Request Public Certificate page with settings

AWS will create the certificate request, and you will need to validate the domain to complete the request. Click on the View Certificate button in the notification message at the top of the screen to view the status of the certificate request.

Successfully requested certificate message with View Certificate button

On the “Certificate Status” page you should see that the status for your chosen domain is “Pending validation” as you have not created the relevant DNS record.

If you didn’t take our recommendation to use DNS validation and instead picked the Email validation method, please go check your email and click a link in one of the emails you just got from Amazon AWS (you may get duplicate emails to various domain admin addresses, just use one of them).

In our example you picked DNS validation, so you need copy the “CNAME name” and “CNAME value” fields, to create the CNAME entry with your DNS provider. You can click on the copy icon just above each value to copy them to your clipboard.

Certifiate status showing pending validation

Open a new browser tab and log into the control panel of the DNS provider for your site’s domain. Every DNS provider has different setups, but you should be able to create a new CNAME record for your domain and enter the “Name” specified by Amazon along with the “Value” as the alias or target.

For most DNS providers you only need to enter the first part of the name specified by Amazon as the provider already knows the rest of the name. You usually need to enter the full “Value”, but often the full stop (period) at the end isn’t required.

OME CloudFront Setup - Entering the CNAME details for DNS validation of a certificate

Once you’ve added the CNAME record to your DNS or clicked the link in the validation email, switch back to the AWS Console and refresh the “Certificate Status” page. With luck, your certificate will already be validated and shows a validation status of “Success”, but it can take a few minutes for DNS changes to propagate and for AWS to see them.

Create an Amazon CloudFront Origin Access Identity

For added security and cost savings, once you have created an Amazon CloudFront distribution to deliver the media offloaded to your bucket, it’s good practice to Block All Public Access to the bucket. This ensures your media can only be accessed via your Amazon CloudFront distribution. But we must also give our Amazon CloudFront distribution access to the bucket by creating an Origin Access Identity.

You can create an Origin Access Identity later and then edit the Amazon CloudFront distribution to make it use it, but it’s much easier to create it up front so you can use it when creating a new Amazon CloudFront distribution.

Log into the AWS console and visit the Origin access identity under the “Security” sub-section of the CloudFront page.

If you’ve never created an Origin Access Identity, you’ll be presented with a message that you don’t have any. Click Create origin access identity to create a new Origin Access Identity.

Create origin access identity button

If you have already created Origin Access Identities elsewhere, Click the Create Origin Access Identity button at the top of the list.

Alternative Create origin access identity button

Enter a clear and concise comment for your new identity that reflects which site or bucket you intend to use it with. Click the Create button to save your new Origin Access Identity.

Create Origin Access Identity modal

Create an Amazon CloudFront distribution

Ensure you’re in the “Distributions” section of the AWS Console’s CloudFront page.

If you have never created a distribution on your Amazon AWS account, you may be presented with this landing page. Click Create Distribution.

ew Account Distribution Landing page

If you already have distributions, click Create Distribution at the top of the Distributions list.

Create Distrubtion button

In the “Origin” section of the “Create Distribution” page, populate “Origin domain” by selecting the Amazon S3 bucket you’ve already set up WP Offload Media to offload to. When you click into that “Origin domain” field you should get a list of all your buckets, typing the first few characters of the bucket’s name will help you find it if you have a few.

Leave “Origin Path” blank.

Select Yes use OAI and then select your Origin Access Identity created earlier from the list of OAIs. Then select Yes, update the bucket policy to allow read access to the OAI.

Finally, you can select No for “Enable Origin Shield”.

Distribution Origin Settings

The “Default Cache Behavior” section can be left alone, its default values are fine in most cases.

Default cache behavior settings

Finally, scroll down to the “Settings” section, click the Add item button under “Alternate Domain name” and enter the custom subdomain you’d like to use for delivering the offloaded media. If you’re not using a custom domain, leave this blank. In the example below we’re using “cdn.hellfish.media” as the domain we’d like to serve offloaded media from. If you have configured the free SSL Certificate created earlier, you can select that from the list under “Custom SSL certificate”.

Feel free to customize the remaining options if required, but the defaults are fine in most cases. Then click Create Distribution.

Distribution Settings

Amazon CloudFront will begin deploying the new distribution configuration to its edge servers. This can take a while.

Once the Distribution is created, take a note of the default “cloudfront.net” domain name assigned to the distribution, you’ll need that when adding the CNAME record to your DNS for your custom domain.

Distribution created

Add a Custom Domain (CNAME) to the distribution

While the new Amazon CloudFront distribution is deploying, you can go ahead and add the CNAME record to your DNS to point your custom domain at your distribution.

Log back into your DNS provider’s control panel and create a new CNAME entry for the chosen subdomain.

In the example below we’ve entered “cdn” as the subdomain which means the full domain will be “cdn.hellfish.media”, and then for the target we’ve entered the default “cloudfront.net” domain that was assigned to our new Amazon CloudFront distribution.

OME CloudFront Setup - Entering the CNAME DNS entry for custom domain

If you’re also using Cloudflare, make sure to turn off the proxy cache by clicking the orange cloud image and change the “Proxy status” from “Proxied” to “DNS only”.

Configure WP Offload Media to use Amazon CloudFront

Once the new Amazon CloudFront distribution’s Status has changed from In Progress to Deployed, you can configure WP Offload Media to start using the custom or default domain associated with it.

Head over to your WordPress site. Visit the WP Offload Media settings page and click the Change link next to the Delivery Provider, which should currently say “Amazon S3”.

OME CloudFront Setup - WP Offload Media settings page with change delivery provider link highlighted

Pick Amazon CloudFront as the new Delivery Provider, then click the Save Delivery Provider button to save your changes.

OME CloudFront Setup - WP Offload Media picking Amazon CloudFront as delivery provider

In the Delivery section of WP Offload Media’s settings page you should now see “Amazon CloudFront” as the Provider, and a new Custom Domain (CNAME) option, which is turned off by default. Toggle that switch on.

OME CloudFront Setup - WP Offload Media settings page showing Amazon CloudFront as delivery provider

You now have a text box where you should enter the custom domain you chose for the Amazon CloudFront distribution, in our example we’ve entered “cdn.hellfish.media”. If you chose not to use a custom domain for your Amazon CloudFront distribution, enter your distribution’s cloudfront.net domain.

You’ll also see a new Private Media option. Leave that turned off for the moment. Later you can use our Private Media doc to configure signed CloudFront URLs for any private media or downloads you wish to serve to customers.

Click the Save Changes button to start serving your offloaded Media Library items via Amazon CloudFront while using your custom domain.

OME CloudFront Setup - Media Library item grid mode overlay showing image served from CloudFront

It’s a good idea to quickly check that all is in order, and an offloaded Media Library item is being served by Amazon CloudFront. Hop on over to the site’s Media Library and find an offloaded image, click on it to view its details.

If you used grid mode for viewing the Media Library, then you should see something like below, with the image displayed, and “File URL” near the bottom of the right-hand sidebar showing the expected custom domain.

OME CloudFront Setup - Media Library item grid mode overlay showing image served from CloudFront

If you used list mode for viewing the Media Library, then you should see something like below, with the image displayed, and “File URL” near the top of the right-hand sidebar showing the expected custom domain.

OME CloudFront Setup - Media Library item list mode edit media showing image served from CloudFront

Block All Public Access to Bucket

Now that your Media Library is being served via Amazon CloudFront, you can now lock down the bucket so that no one can access its files directly. Blocking all public access to the bucket improves security, but also ensures no one accidentally uses the slower direct S3 URLs that also incur charges per request.

This of course means that if you are aware of any external links to your offloaded media that use the default raw S3 URL format (e.g. https://hellfish-media.s3.us-east-1.amazonaws.com/…), you should not enable Block All Public Access. If there are raw S3 links on other sites other than the site that offloaded the media, but you do not care about breaking those links or explicitly want to break those links because their unauthorized use is costing you money, then by all means carry on and enable Block All Public Access to the bucket.

Before we turn on Block All Public Access for the bucket, let’s double-check that when we set up the Amazon CloudFront distribution and told it to update the Origin bucket’s policy to specifically grant the distribution’s Origin Access Identity permission, that it actually did so.

Visit the AWS Console’s S3 page and click on the name of the bucket your site is offloading to. You should see something like below.

OME CloudFront Setup - Overview of S3 bucket in AWS Console

Click on the Permissions tab, and then scroll down to the “Bucket Policy” section.

You should see something similar to below, but most importantly, it should include a “Principal” element that includes a reference to a CloudFront Origin Access Identity.

OME CloudFront Setup - Viewing Bucket Policy for S3 bucket in AWS Console

If you do not see something similar in the bucket’s policy, please return to the CloudFront section of the AWS Console, edit the CloudFront distribution’s Origin, and re-select Yes, Update Bucket Policy again before saving it. There’s further details in our Block All Public Access to Bucket doc.

To turn on Block All Public Access to Bucket and ensure WP Offload Media knows about it, switch back to WP Offload Media’s settings page and click the “Change” link next to the bucket name in the Storage section.

OME CloudFront Setup - WP Offload Media settings page with Change bucket link highlighted

On the “What bucket would you like to use?” prompt, just click the Save Bucket Setting button as there are no changes needed here.

OME CloudFront Setup - Enable Block All Public Access prompt with confirmation checkbox

You’re now given the opportunity to change the bucket’s Block All Public Access setting. Check the box to confirm that you’ve set up the Origin Access Identity and have a correct bucket policy, then click the Enable “Block All Public Access” button.

OME CloudFront Setup - Enable Block All Public Access enabled in WP Offload Media settings page

WP Offload Media will now update the bucket’s Block All Public Access setting to fully enable it. You should be returned to WP Offload Media’s settings page and be able to see that the bucket is now reporting that Block All Public Access is enabled (this info is retrieved by WP Offload Media via the S3 API).

OME CloudFront Setup - Block All Public Access enabled in WP Offload Media

At this point it’s probably a good idea to visit your Media Library and add a new image to confirm that it is correctly offloaded to the Amazon S3 bucket and delivered via Amazon CloudFront. If there are any errors please review the instructions above and check that the bucket and distribution are set up correctly.

Next Steps: Deliver private media via Amazon CloudFront

Now that your WordPress site is offloading its Media Library items to a protected Amazon S3 bucket, and delivering that media via an Amazon CloudFront distribution, you may also want to serve private files via signed CloudFront URLs that expire after a few seconds. Offering WooCommerce or Easy Digital Downloads product files is a good example of this.

By default WP Offload Media creates signed expiring URLs that use the raw S3 URL format (e.g. https://hellfish-media.s3.use-east-1.amazonaws.com/…), this will continue to work even if Block All Public Access has been enabled. However, wouldn’t it be nice to serve those product downloads via Amazon CloudFront for improved speed, reduced costs, and better branded URLs?

Hop on over to our How to Serve Private Media via Signed Amazon CloudFront URLs doc to configure WP Offload Media’s “Private Media” setting.