Menu
This is an odd issue, but I assume I've done something boneheaded somewhere along the line to end up with this current situation.
When trying to serve static files (images, css & js) from CloudFront, they don't seem to be rendering properly. For example, one of my stylesheets is available here: http://d21uvxjmc903qz.cloudfront.net/stylesheets/hf.4fabc9c719f8.css, but it doesn't seem to be "applied" to the DOM as I would expect. (For example, looking in developer tools in Chrome or Firefox in Firebug the relevant styles aren't applied to the <header> element.
Looking at the response headers, it looks like the Content-Type is set properly, so I'm pretty much out of ideas.
Any suggestions on where to look next?
893
Does Amazon CloudFront work with non-AWS origin servers? Yes. Amazon CloudFront works with any origin server that holds the original, definitive versions of your content, both static and dynamic. There is no additional charge to use a custom origin.
Fortunately, Amazon CloudFront can serve both types of content, to reduce latency, protect your architecture, and optimize costs. In this post, we demonstrate how to use CloudFront to deliver both static and dynamic content using a single distribution, for dynamic and static websites and web applications.
Short description. By default, CloudFront caches a response from Amazon S3 for 24 hours (Default TTL of 86,400 seconds). If your request lands at an edge location that served the Amazon S3 response within 24 hours, then CloudFront uses the cached response. This happens even if you updated the content in Amazon S3.
Amazon CloudFront allows you to to remove one or multiple files from all edge locations prior to the expiration date set on those files.
The problem is likely the wrong content-type in the S3 bucket. I had the same trouble, and changing the content-type fixed the issue. I changed the below from text/plain to text/css and then the styles rendered correctly.
178
For me the link couldn't be http but had to be https://.. It worked for me when i modified this
<link rel="stylesheet" href="w3.css">
in the html file to this:
<link rel="stylesheet" href="https://s3.amazonaws.com/yourFolder/w3.css">
hope that helps.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
