Cloudfront CDN with Custom CDN Domain in Wordpress

How to use AWS Cloudfront CDN with Custom Domain Name in Wordpress

If you have a website or web application, CDN is critical to managing website performance and speed. A CDN or Content Delivery Network is a group of interlinked and geographically distributed servers that speed up your website by bringing content closer to the users. Using a CDN will reduce bandwidth consumption and improve loading speed which will lower your bounce rate and has important SEO advantages.

While there are several CDN services available in the market, the AWS Cloudfront CDn with more than 600 points of presence (PoPs) globally, is among the most used and popular ones. Several websites use it for delivering the full website, while some mainly use it for delivering static content like images and stylesheets. Even video streaming services like Netflix and Hulu use CDN to serve video content worldwide to users.

You can speed up your wordpress website using the Cloudfront CDN. However, Cloudfront differs a lot from the other CDNs which allow you to create pull zones. Apart from delivering static content, the AWS Cloudfront CDN can also be used to accelerate dynamic content. Gaming brands also use Cloudfront to scale automatically. Using Cloudfront CDN, you can reach viewers across the globe in milliseconds because of its built-in data compression, edge compute capabilities, and field-level encryption. Cloudfront also provides excellent security features to secure your data.

In this tutorial, we will discuss how to create a Cloudfront distribution and use a custom domain name like cdn.example.com for delivering content.

Create an AWS Cloudfront Distribution

Login to your Amazon AWS account and search for Cloudfront. In the cloudfront distributions page, click on the ‘create distribution’ button on the top right. We are going to create a distribution for delivering static content mainly (wp-content and wp-includes folders).

In the origin section at the top, fill your domain name inside the origin domain box without the http or https.

• For protocol select HTTPs only which is the default selection.
• HTTPS Port: 443
• Minimum Origin SSL protocol: TLSv1.2
• Origin Path: Leave Blank
• Origin Name: Domain name (filled automatically)
• Enable Origin Shield: No

Default Cache Behavior:

• Compress Objects Automatically: Yes

Viewer:

• Viewer Protocol Policy: HTTPS Only
• Allowed HTTP Methods: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
• Restrict Viewer Access: NO

Cache key and origin requests

• Cache policy and origin request policy (recommended)
• Cache Policy: caching optimized
• Origin Request policy: Create a origin request policy with Headers: None, Cookies: ALL and Query Strings All

Web Application Firewall

• Enable Security Protections

Included security protections:

• Protect against the most common vulnerabilities found in web applications.
• Protect against malicious actors discovering application vulnerabilities.
• Block IP addresses from potential threats based on Amazon internal threat intelligence
• Under additional protections, select both the options including SQL Protections and rate limiting.

Settings

• Price Class: Use all edge locations (best performance)

• Alternate domain name: cdn.example.com

Suggested Reading

• Use Cloudflare CDN with Wordpress: How to Setup

• Why use a cdn on your website

Request Custom SSL Certificate for Alternate Domain Name

Since we are going to add alternate domain names, we will need a custom ssl certificate. You can add more custom domain names if you need. Right below the alternate domain settings, you will find the settings for custom ssl. If you have already created a custom ssl for your domain and alternate domain, you can select that from the dropdown menu. Otherwise, you can request a new ssl certificate by clicking on ‘request certificate’.

When you click on request certificate, you will be redirected to the AWS Certificate Manager where you can request a public certificate. Click on next and on the Request Public Certificate Page enter the qualified domain name and then the alternate domain name that you want included in the SSL certificate. Let the default selections remain for the remaining sections. Use the DNS validation method for validating your domain and click on ‘Request’.

You will receive a successfully requested certificate message. Click on view certificate. You will see that the certificate is initially in a pending validation state. You will need to carry out DNS validation to receive the certificate. If you are using Route 53 for DNS management, you can easily add the new DNS records. Clicking on ‘Create Records in Route 53’ will automatically make the entries in Route 53 DNS. Otherwise, if you are using a different DNS management service, you can manually enter the two CNAME record provided by AWS Certificate Manager into your DNS records. Just created two CNAMe records. Copy and enter the CNAMEs and CNAME values into your DNS and done.

Suppose, you are using Cloudflare to manage DNS, login to cloudflare and select the concerned website. Click on DNS and then add a new record. Enter the CNAME name in the name box and CNAME value provided by AWS in the target box. Do the same for entering both records and instead of applying DNS proxy (orange cloud), use DNS only.

Wait a little for AWS to validate the domain. It does not take more than a few minutes to get the custom ssl certificate issued once you have created the CNAME records required for validation.

Once the certificate has been issued, it will show in the list of your certificates inside AWS certificate manager. You can come back to AWS Certificate manager and click on list certificates in the left sidebar.

Once your certificate has been issued, come back to the Cloudfront distribution and refresh the list of custom ssl certificates. Select the certificate AWS has just issued.

Select both HTTP/2 and HTTP/3 for HTTP versions. AWS Cloudfront now also supports HTTP/3. Since August 2022, AWS Cloudfront supports HTTP/3 over QUIC for end user connections which provides superior speed and security compared to previous HTTP versions. HTTP/3 is available on all Cloudfront edge locations.

• Standard Logging: Off
• IPV6: On

Finally, click on create distribution. Deployment takes some time. Once the deployment is complete, we can move on to the next step.

Create DNS Entry for Alternate Domain Name

You will need to create a DNS entry for the alternate domain name before you can use it on your website.

Once the deployment is complete, the cloudfront distribution you just created will show as enabled.

Assuming you are using Route 53 for DNS management, you will need to create a new record that is an alias to cloudfront distribution.

Enter cdn in ‘record name’ and select ‘Alias’. Select ‘Alias to cloudfront distribution’ for destination and then from the next dropdown list, select the newly created cdn distribution. Click on create records and done. It will take some time for the DNS changes to spread. Wait a little and then add the cdn url to your wordpress website using a plugin like cdn enabler. Check if the front end is loading fine. If you see anything broken, revert the changes and wait for the DNS changes to spread. Try applying the cdn url again after some time and it will work.