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
andexample.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:
The actual minified and compressed CSS and JS files in the S3 bucket: