Skip to content
This repository has been archived by the owner on Oct 30, 2019. It is now read-only.

Serve static files from Azure CDN #112

Closed
DamianEdwards opened this issue Jan 26, 2017 · 1 comment
Closed

Serve static files from Azure CDN #112

DamianEdwards opened this issue Jan 26, 2017 · 1 comment

Comments

@DamianEdwards
Copy link
Member

DamianEdwards commented Jan 26, 2017

I have a CDN endpoint set up at https://liveaspnetcdn.azureedge.net. Need to update the app to actually use it.

Having the CDN URL flow into the app would be nice to do centrally via some Tag Helpers perhaps.

Will need to set cache headers on static files including max-age to ensure the CDN caches them. See https://docs.microsoft.com/en-us/azure/app-service-web/cdn-websites-with-cdn?toc=%2fazure%2fcdn%2ftoc.json#configure-caching-options-for-static-files-in-your-azure-web-app

Also need to implement cache-busting for all static files. Already doing the CSS file itself via built-in Tag Helper, and JS is inlined, so that just leaves the MS logo file (SVG or PNG via <image> tag, might need a new Tag Helper) and the background images referenced by the CSS file. That will likely require adding some CSS processing to my gulp setup to generate cache-busting strings in the minified CSS file. These npm modules look like a good start: https://www.npmjs.com/package/postcss & https://www.npmjs.com/package/postcss-cachebuster

@ganniaiuei
Copy link

Hi @DamianEdwards,
I've worked on a solution for this issue.
Since I'm new to this project, I would like to share all changes to understand it they fits or not, before a PR:

  • Cache-busting strategy chosen: the same implemented in Microsoft.AspNetCore.Mvc.TagHelpers.LinkTagHelper when asp-append-version is selected https://github.com/aspnet/Mvc/blob/dev/src/Microsoft.AspNetCore.Mvc.TagHelpers/LinkTagHelper.cs#L264
  • Added new property to AppSettings "CDNUrl" to store Azure CDN endpoint
  • Added new tag-helper: CDNSourcingTagHelper. This helper will be attached to image and lik[rel=stylesheet] changing elements source to CDN
  • Added new tag-helper: CacheBustingTagHelper. This helper will be attached to image tags adding cache-busting version
  • Added new gulp-dependencies (using postcss)
  • Changed mix:ccs gulp task to to manage images referenced to css
  • Changes Startup.cs to set cache headers for static files (not sure if its works for CDNs)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants