W3 Total Cache: minified CSS and JS files not found in AWS S3-based CDN

My configuration consists of a Wordpress installation with the W3 Total Cache plugin that is set up to cache resources on a CDN (Amazon S3+Cloudfront).

The HTML resources and images are loaded correctly, but the problem is with minified CSS and JS, as they were renamed by the plugin (e.g. style.css renamed to 18704.css).

The problem might be in how I write the URI in the site's HTML code, where the original style.css is referred to, instead of the generated filename:

<link rel='stylesheet' id='wptheme-style-css'  href='https://<distribution_id>.cloudfront.net/wp-content/themes/wptheme/style.css.gzip?ver=1.0.1' type='text/css' media='all' />

Cloudfront configuration:

  • Two origins added example-com.s3.amazonaws.com and example.com

S3 configuration:

  • Bucket policy:

.

{
 "Version": "2012-10-17",
 "Statement": [
    {
        "Sid": "PublicReadGetObject",
        "Effect": "Allow",
        "Principal": "*",
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::bucketname/*"
    }
 ]
}
  • The files stored inside S3 bucket have the correct MIME type, although some may be missing CORS policy:

.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Browser console:

wp-signup.php:1 Uncaught SyntaxError: Unexpected token <
wp-signup.php:1 Uncaught SyntaxError: Unexpected token <
wp-signup.php:1 Uncaught SyntaxError: Unexpected token <
(index):96 Uncaught ReferenceError: jQuery is not defined
    at (index):96
(anonymous) @ (index):96
www.example.com/:199 Uncaught ReferenceError: jQuery is not defined
    at (index):199
(anonymous) @ (index):199
www.example.com/:1353 Uncaught ReferenceError: jQuery is not defined
    at (index):1353
(anonymous) @ (index):1353
wp-signup.php:1 Uncaught SyntaxError: Unexpected token <
wp-signup.php:1 Uncaught SyntaxError: Unexpected token <
wp-signup.php:1 Uncaught SyntaxError: Unexpected token <
wp-signup.php:1 Uncaught SyntaxError: Unexpected token <
wp-signup.php:1 Uncaught SyntaxError: Unexpected token <
wp-signup.php:1 Uncaught SyntaxError: Unexpected token <
wp-signup.php:1 Uncaught SyntaxError: Unexpected token <
wp-signup.php:1 Uncaught SyntaxError: Unexpected token <
wp-signup.php:1 Uncaught SyntaxError: Unexpected token <
wp-signup.php:1 Uncaught SyntaxError: Unexpected token <
wp-signup.php:1 Uncaught SyntaxError: Unexpected token <
wp-signup.php:1 Uncaught SyntaxError: Unexpected token <
wp-signup.php:1 Uncaught SyntaxError: Unexpected token <
twitter-widgets.js.gzip Failed to load resource: the server responded with a status of 403 ()
wp-signup.php:1 Uncaught SyntaxError: Unexpected token <
wp-signup.php:1 Uncaught SyntaxError: Unexpected token <

Chrome's network console:

Network console

The actual minified and compressed CSS and JS files in the S3 bucket:

S3 Bucket