Question

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

Was it helpful?

Solution

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.

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top