How to Configure WordPress CloudFront CDN in Front of the S3 bucket.

|

In this tutorial, we’re going to configure WordPress CloudFront CDN in Front of the S3 bucket.

Before we begin this, we assume that you already configure the S3 bucket for your images.

if you haven’t set up the S3 bucket then, you need to have your images offloaded to S3, we have a tutorial that explains How to Offload WordPress Assets with AWS S3 Bucket.

This Tutorial has 3 Steps.

  1. Create CloudFront distribution
  2. Add the CloudFront Distribution URL to WordPress
  3. Change the CloudFront URL points to your domain

1. Create CloudFront distribution

After you set up an S3 bucket from this tutorial, you will get the benefit of WordPress images is stored in the S3 bucket and loaded from the S3 bucket. This is a big step towards scalable WordPress.

But, an S3 bucket is located in a specific geographic location, which means if your users come from another geographic location it will take longer to load images on your site.

To improve the speed you need to have CDN in front of the S3 bucket so your WordPress images will be loaded from CDN. In this tutorial, we’re using AWS CloudFront CDN. However, you can set up any CDN in front of the S3 bucket.

To set up a CloudFront distribution login into your AWS console and go to CloudFront (https://console.aws.amazon.com/cloudfront) and click on the Create Distribution button.

Create WordPress CloudFront Distribution

In the next screen, you need to click on Get Started CloudFront Web Distribution.

WordPress CloudFront distribution Web

Next, there are multiple settings, Select Origin Domain name as your S3 bucket from the list. and select Redirect HTTP to HTTPS as Viewer protocol policy. then click on Create distribution.

WordPress CloudFront Distribution Setting

Now, creating distribution will take 10 to 15 minute, But, in meantime you can copy CloudFront Distribution URL.we need to add this URL in the WordPress.

CloudFront Distribution URL

2. Add the CloudFront Distribution URL to WordPress

Now, We have a CloudFront distribution URL. We need to add this URL into our WordPress. As part of S3 Configuration, we installed the WP Offload Media Lite plugin. go the plugin setting and add the CloudFront URL in the Custom Domain (CNAME) as shown in the below screen and click on Save Changes.

WP Offload Media Lite plugin cloudFront URL

now As you can see your uploaded image will be loaded in from CloudFront URL over CDN.

WordPress image from CloudFront URL

But, this URL looks ugly and this is not your domain it’s bad practice for SEO. Once you change your CDN provider you need to change the URL again in all posts. so it’s better to use your subdomain URL for uploads. In my case, I’m using cdn.wpmentor.com to point all WordPress uploads.

To change the uploads URL follow the next step,

3. Change the CloudFront URL points to your domain

To point your subdomain (cdn.wpmentor.com or images.wpmentor.com) to your CloudFront URL, you need to add a DNS CNAME record in your domain registrar.

In my case it’s Cloudflare, I added the CNAME record cdn.wpmenror.com points to CloudFront URL.

DNS Record for CloudFront

Now you need to add that subdomain (cdn.wpmentor.com) to your AWS CloudFront distribution. To add that CNAME record in CloudFront Distribution go to your CloudFront distribution and click on Edit.

Edit CloudFront Distribution

Add your subdomain into Alternate Domain Names (CNAMEs) and select Custom SSL Certificate and click on Request or import certificate with ACM, a new tab will open for AWS Certificate Manager. ( If you already have a certificate you can select it from the list).

CloudFront Distribution AWS Certificate Manager

Now in the new Tab of AWS certificate manager add the wildcard domain to generate certificate and Click Next. ( you can create your subdomain certificate. But, you can use WildCard certificate for your all subdomain.)

AWS WildCard certificate

To verify the certificate you have two options you can select any option for me I have selected email validation, click on Review button after selecting your choice.

AWS Certificate Manager Email Validation

Next Step Is to confirm and Review all the inputs. Click on Confirm and request after you have verified all the details.

AWS Certificate Manager Review Request

Now, this screen will show you how your domain is going to verify If you have selected Email validation then you will receive an email. ( make sure you have an email address with addresses on the screen).

In my case, I already had an email with adm[email protected] If you don’t have an email address listed here, then you have to create a new one. Otherwise, you can choose to verify by DNS validation.

AWS Certificate Manager verify Email

now, check your email, in my case, it will be [email protected] you will receive a link to approve the request click on the link.

AWS Certificate Manager verification Email

The link will open in the browser and click on I approve to approve the certificate request.

AWS Certificate Manager Approve Certificate

Once you approve the certificate request in a few minutes you will see your certificate status is Issued

AWS Certificate Manager Issued Certificate

Now You have a certificate. Go to the first tab and select the certificate that you have created. and Click on Yes, Edit.

AWS Certificate Manager Select Certificate

That’s all the settings you needed on the CloudFront side. now you need to add your subdomain ( cdn.wpmentor.com) to your WordPress offload media plugin.

Go to the WP Offload Media Lite plugin setting and change your Custom Domain (CNAME) points to your subdomain ( cdn.wpmenor.com) and click on Save Changes.

WP Offload Media Lite plugin add Sub-Domain

Now, If you upload a new image it will be loaded from CDN url cdn.myexampleblog.com

WordPress CloudFront Images loaded from sub-domain

Now, if you check your existing post URL is changed to CDN URL.

WordPress CloudFront Image Reference from sub-domain

That’s it!

your CloudFront distribution is created and your subdomain is pointing to your CloudFront distribution. This way it will be easy to move out to another CDN provider.

If you have any questions about this tutorial or general questions about WordPress on AWS or AWS CloudFront. please post them as comments below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.