I deploy a single-page application website by pushing assets to AWS S3 and serving the files through CloudFront. As per this answer, it isn't possible for me to serve files directly from S3 using SSL under my own domain, so I don't have a choice about using CloudFront if I want to serve files in this way.
When I redeploy, I generate a new timestamped, root HTML file (which itself links to the updated JS and CSS bundles), push it to S3 along with everything else, and then make that new file the new Default Root Object for the CloudFront distribution via the AWS. This prevents CloudFront from caching everything and hiding the updates.
The problem is that, occasionally, CloudFront takes a long time to update the root object. As I write this, I'm tabbing over hitting refresh every 60 seconds waiting for an important change to hit production. CloudFront shows the correct (newest) root object via the web console but it also shows "Status: In Progress."
At times, this delay is barely noticeable, and other times it's quite long. Today it is approaching an hour delay.
How can I avoid this? I'm open to both changes to this deployment method using S3 and CloudFront OR switching to an alternative platform that is known to handle this use case better.
This is how I solved it.
Enable caching values to 0 seconds in cloud front.
I have also noticed browser caches document served.
I had to add http headers to S3 bucket to serve every object not to cache,
Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0
Documentation on Object Expiration:
http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Expiration.html
If you set your cache to a long time and like to remove the cache from CloudFront, you can do the invalidation on the root object.
Hope it helps.
Related
I am using Amazon ec2 server, 53 DNS, and my website is hosted at namecheap (with ssl).
I figured that since Vue build files are usually big and they take much time to download, it'd be better if I could serve them using a CDN server.
However, these are not static files, in the sense that every time that I change my Vue source code and build and upload to my server, the files' content change and so do their names.
So is there an option for a CDN that searches for files and then serves them if they are found?
I've read everywhere S3 being mentioned along with CloudFront, but it seems that it only supports specific files upload, and uploading my Vue build files everytime I change my code is inconvenient.
Configure TTL as 0 in CloudFront for this image. You have option to configure a different TTL for different paths in origin.
CloudFront will not cache the files if the content is changed with a TTL of 0. For all incoming requests, CloudFront will check with origin if there is a change in the file contents and will automaoically refresh it's cache if the original content changes.
This should be an ideal TTL value for dynamically generated contents. If you think that the file would change infrequently, you can perhaps configure the TTL to a bit higher value.
Our website hosted on CloudFront has not been updated for almost 24 hours now.
The CloudFront invalidation updated a few of the files. I can see on S3 all of the files have been updated. Performing a GET on these files I can see the timestamps are all correct except for one of the files (a javascript minified file called app.min.js) which still has an old timestamp on it. However, looking at S3, the app.min.js file has the correct updated timestamp. Forcing a no cache on the file, the app.min.js still reflects the old file.
Does anyone have any suggestions on what could be happening here?
Your files are still being cached somewhere. If it's not cached in CloudFront, it may be cached in your browser or somewhere else between CloudFront and you.
Invalidating the CloudFront distribution does not invalidate the cache in your browser. So make sure you're using a fresh browser to test this. Better yet, use curl.
Invalidate CloudFront again
Restart your browser
Use a different browser
Use a different computer
Use curl to avoid local caches
Do anything to eliminate the possibility of hitting a cached version.
Also:
Adding "no cache" to a file on S3 won't have any effect on the cached version in CloudFront. You'll need to invalidate the cache again to force CloudFront to get the new version.
The default TTL for CloudFront is 24 hours. So once it hits 24 hours, it should re-get the file from the origin. You can look at the headers to see how long it will be before the TTL runs out.
I have a domain (albunack.net) configured to use Cloudfront (via A record), its almost working.
Any request I make such as:
http://albunack.net/style/albunack.css
http://albunack.net/artist/ae65c507-d9a0-4d42-9a6c-2b1f82158b9f
all work fine, and I can see that Cloudfront is seeing them
but simply entering the domain
http://albunack.net
is taking me to
http://aws.amazon.com/ !
I cannot understand why, especially since it was all working great but I had to disable delete the Cloudfront instance (because there was to much data that needed invalidating) and create a new Cloudfront distribtion (which I thought I had done identically)
Update
http://albunack.net should take you to http://albunack.net/index.jsp. If you bypass Cloudfront and go directly to the EB server it does do that. Reviewing my CloudFront distrubution I had not set a default root object but setting it to index.jsp and redeploying didnt work, nor did setting it to /index.jsp so Im out of ideas.
I am having two issues with using AWS S3 and AWS Cloud front services to deploy a static site. The first problem occurring is that I'm not seeing the changes I make to my index.html page when I look up http://.point.plumbing . However if I go to my bucket and access the Object: index.html and click on the link you will see the desired changes in effect https://s3-us-west-2.amazonaws.com/point.plumbing/index.html
The second issue that I am having is that I seem to be getting this error Failed to load resource: the server responded with a status of 403 (Forbidden) http://www.point.plumbing/fontkit/avenir_55_oblique-webfont.woff2the error is telling me that the server cant load some of my fonts I want on http://.point.plumbing
On the services page if you click on the icons you will see that I am not getting the font avenirmedium, sans-serif to load.
I've spent quite a bit of time trouble shooting these issues and the closest I have come to a solution is with this link. http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/ReplacingObjectsSameName.html
Is the reason why I'm getting errors and not seeing the desired changes arrive on http://.point.plumbing is because my objects cache is not refreshed for 24 hours?
Any help would be greatly appreciated.
First of all, I noticed you said your endpoint is https://s3-us-west-2.amazonaws.com/point.plumbing. Check the console, your web endpoint is actually point.plumbing.s3-website-us-west-2.amazonaws.com (I assume point.plumbing is something with a valid top level domain).
If I'm understanding correctly, you said you aren't seeing changes to the HTML when you view it via CloudFront. This is because CloudFront caches your files - by default for 24 hours. In order to see updates, you need to specify a shorter TTL via HTTP headers in the Object Metadata or issue an API command to Invalidate the objects. This takes 10 to 15 minutes to propagate and will start costing you money after the first 1000 objects per month.
About the fonts, I'm not sure but sounds like maybe a permissions issue. Make sure the object has permissions for public-read or set public get-object permissions on the bucket.
I want to use Cloudfront to serve images and CSS from my static website. I have read countless articles showing how to set it up with Amazon S3 but I would like to just host the files on my host and use cloud front to speed up delivery of said files, I'm just unsure on how to go about it.
So far I have created a distribution on CloudFront with my Origin Domain and CName and deployed it.
Origin Domain: example.me CName media.example.me
I added the CNAME for my domain:
media.mydomain.com with destination xxxxxx.cloudfront.net
Now this is where I'm stuck? Do I need to update the links in my HTML to that cname so if the stylesheet was http://example.me/stylesheets/screen.css do I change that to http://media.example.me/stylesheets/screen.css
and images within the stylesheet that were ../images/image1.jpg to http://media.example.me/images/image1.jpg?
Just finding it a little confusing how to link everything it's the first time I have really dabbled in using a CDN.
Thanks
Yes, you will have to update the paths in your HTML to point to CDN. Typically if you have a deployment/build process this link changing can be done at that time (so that development time can use the local files).
Another important thing to also handle here is the versioning the CSS/JS etc. You might make frequent changes to your CSS/JS. When you make any change typically CDNs take 24 hrs to reflect. (Another option is invalidating files on CDN, this is but charged explicitly and is discouraged). The suggested method is to generate a path like "media.example.me/XYZ/stylesheets/screen.css", and change this XYZ to a different number for each deployment (time stamp /epoch will do). This way with each deployment, you need to invalidate only the HTML and other files are any way a new path and will load fresh. This technique is generally called finger-printing the URLs.
Yes, you would update the references to your CSS files to load via the CDN domain. If image paths within CSS do not include a domain, they will also automatically load via cloudfront.