AWS Cloudfront Features for a CDN

AWS Cloudfront features allow you to add rules or customize user requests, what is delivered to them, rules to put in the request to the origin (AWS S3 bucket) or rules in the response from the origin.

Cloudfront is an excellent solution when it comes to including a CDN on your website. One of the biggest advantages it has is that you manage this CDN yourself according to the needs of your project. For example, in the case of our website we use the EWWW Image Optimizer plugins to convert images to webp format and WP Offload Media to send all images to an S3 bucket. These 2 plugins are an excellent combination for working with AWS. However, they do require you to know a bit about AWS and how some of its services work if you want to work with both plugins in the free tier.

When to use AWS Cloudfront features for a CDN

First of all, when you go to migrate wordpress to aws, or are you creating a new WordPress on AWS, you must change the way you saw wordpress so far if you want to get the best possible advantage of the advantages offered by Cloud services.

In our case, it happened to us that when we installed the WordPress AMP plugin, the webp rewrite rules for js created by EWWW Image Optimizer stopped working. This plugin continued to work perfectly to convert the images. So as it was a priority for our team to work with AMP for WordPress we had two options, 1 to see to what extent we could include an equivalent to the rewrite rules we had in the htaccess (not certain that this would work with AMP but it could be done). try) or leave this matter to the CDN, which is where all the images on our website are served.

We went for the second option for which we added a function in Cloudfront:

function handler(event) { var request = event.request; var uri = request.uri; if(uri.match(/(\.jpg|\.png|\.jpeg)$/g)) { request.uri += '.webp'; } return request; }

We leave it active for all user requests and endpoint (good for this first part). Cloudfront allows you two options to create functions for a distribution (CDN): the first is Cloudfront functions which is the case you are seeing on this website and the other option is Lambda@Edge. Each one has its advantages over the other and in the case of using Cloudfront functions for a CDN I recommend the Cloudfront Functions, are the ones we use since they accept more simultaneous requests than Lambda@Edge. If you are interested in more details, go to this link where AWS compares the types of cloudfront features.

Once everything is set up we continue to develop our site beautifully. It happened to us that when activating the plugin that we use to manage the cache (W3 Total Cache) another problem occurred. Requests to the CDN stopped presenting the Access-Control-Allow-Origin header for .ttf files, which are the Google fonts we use.

How to solve Access to [something on your CDN] form origin [your website] has been blocked by CORS with AWS Cloudfront functions for your CDN

With W3 Total Cache this is quite a common problem and at least we prefer to look for the solution outside of the plugin. We present a fairly simple solution that also makes better use of your cloud resources for WordPress on AWS.

The problem looks like this:

Access to font at 'https://cdn.precisefuture.com/wp-content/uploads/2022/10/BarlowSemiCondensed-Regular.ttf; from origin 'https://precisefuture.com; has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Your CDN and your site will not have exactly the same origin and if your CORS have not been declared it is normal that your CDN cannot give a response. So with a function in Cloudfront it could be solved. The translation of this problem for your function is as follows: When a "request" does not present the "Access-Control-Allow-Origin" header, include the header in the "request" and that's it. Sure, this solution is recommended for non-sensitive files only. So just in case we create the function like this:

function handler(event) {
    var request = event.request;
    var headers  = request.headers;
    
    if(`.ttf` == uri.match(/(\.ttf)$/g)) {
        headers['access-control-allow-origin'] = {value: "*"};
    } 

    return request;
}

Here it is important that you keep in mind that AWS Cloudfront only allows only 1 function for user requests to the same CDN. So since we already had another function in this same place, it stayed like this

function handler(event) {
    
    var request = event.request;
    var uri = request.uri;
    var headers  = request.headers;
    
    if(`.ttf` == uri.match(/(\.ttf)$/g)) {
        headers['access-control-allow-origin'] = {value: "*"};
    } 
    
    if(uri.match(/(\.jpg|\.png|\.jpeg)$/g) != '') {
        request.uri += '.webp';
    } 
    return request;
}