Serving Your Static Sites with Azure Blob and CDN

[disqus-migrator[bot]]

Serving Your Static Sites with Azure Blob and CDN

https://blog.lifeishao.com/2017/05/24/serving-your-static-sites-with-azure-blob-and-cdn/

[disqus-migrator[bot]]

Originally posted by Mark Arnold on 2017-11-09 04:48

Interesting... do you have an issue with cache busting? Meaning, after you've updated a static file, and CDN rolls it out, how do you ensure clients pull the new file without manually clicking refresh in the browser? If I could be convinced there is a solution to this problem I would definitely be in favor of this solution for my angular app.

[disqus-migrator[bot]]

Originally posted by Mark Arnold on 2017-11-10 01:51

Thanks Hao. In the case of a SPA, I believe the hashed filename solution will still depend on the client pulling an updated index.html that points to the new file names. I wonder if meta tags in the html can prevent index.html from ever caching...

[disqus-migrator[bot]]

Originally posted on 2017-11-12 19:13

If you are building a SPA, you can implement a cache busting script in your index.html to dynamically inject your and tags. That way you can ensure the client pulls from your cdn at an interval of your choice. (e.g. you can generate a random string everytime, or the current date for once a day, etc)

[disqus-migrator[bot]]

Originally posted by Elvin Dauz on 2017-12-14 00:31

That's when you use Azure CDN purge. It's just a few clicks and you're done. It forces the nodes to retrieve new updated files.

[disqus-migrator[bot]]

Originally posted by Mark Arnold on 2017-12-14 06:43

But does that also force the client browsers to update as well?

[disqus-migrator[bot]]

Originally posted by Elvin Dauz on 2017-12-14 18:48

I know what you mean.

I just tried it and it actually works without pressing CTRL-F5 in the browser. Updated content is served after a few minutes of purging.

Note I'm using Angular 2 and I think what is important is that you build it using --prod because this gives the filenames a new name every time you build. These filenames are referenced from index.html. In Cloudflare, for example, HTML files by default are not cached and I think this is important since whenever the index.html file is accessed it references the new JS and CSS with the new filenames. This is just my theory though. But it works for me.

[disqus-migrator[bot]]

Originally posted by Tomasz Masternak on 2017-12-01 05:57

Hi Hao, great article! I'm trying to tweak the UrlRewrite rules a bit but can't make them work as expected :/.
What I wanted to do is redirect any requests except those starting with scripts/ or images/ to index.html. The rule came up with is source: ^(?!scripts\/|images\/).* and destination: index.html.
The behavior that I'm getting is Blog Storage error page with OutOfRangeInput. Do you have any ideas why this might not work as expected?

[disqus-migrator[bot]]

Originally posted by Tomasz Masternak on 2018-02-10 13:00

I confirm. It looks that default container name in blob storage is not prepended when url rewrite rule is used. In the end I added the container name to the rule and it worked.

[disqus-migrator[bot]]

Originally posted on 2018-02-15 10:18

hm... sorry about that. yea, and that error message is pretty unhelpful.
Maybe another route is to add a new "URL Rewrite" rule where it looks for "scripts", and captures the whole thing, and destination is just "$1". Once that is fulfilled, it won't get to the rest of the rules.

[disqus-migrator[bot]]

Originally posted on 2018-02-15 10:21

Thanks Tomasz! Could you paste an image of your rules for clarity, and I can add the rule to the post to help others with the problem. (and give you credit of course 🙂)

[disqus-migrator[bot]]

Originally posted by Tomasz Masternak on 2018-02-15 13:20

Sure. Here are two rules

The origin-path in in endpoint configuration in Azure portal is left blank and prepended to the Destination value. So the rules are:
1. ($|/$) -> origin-path/index.html
2. (.+$) -> origin-path/$1

Number 1 is to redirect empty resource request to origin-path/index.html. And number 2 is to prepend origin-path to any non-empty resource.

[disqus-migrator[bot]]

Originally posted on 2018-02-16 11:11

awesome! Thanks!

[disqus-migrator[bot]]

Originally posted by Dean Armada on 2018-01-27 01:34

I will have to disagree with using "$" as a source as it has a limitation. It only works as expected when you do not set an origin path but if there is an origin path then the source with a "$" will not trigger. Therefore this "((?:[^\?]*/)?)($|\?.*)" is recommended to use instead

[disqus-migrator[bot]]

Originally posted on 2018-02-15 09:33

Thanks Dean for the clarification!

[disqus-migrator[bot]]

Originally posted by faza on 2018-03-13 23:17

Hoping someone can assist me. I've followed this blog post, but went one step further and activated a custom domain to use with azure cdn and have enabled https. I am noticing that when I go to domain.com, I am correctly re-directed to https://www.mydomain.com which points to index.html in blob storage.

My problem is when I attempt to visit www.mydomain.com (note the www subdomain), I am redirected to https://www.mydomain.com/or.... I am trying to get this to go to https://www.mydomain.com instead.

In addition to the CDN rule highlighted in the blog post, I am using a second CDN rule to force direct http to https. Here is what my other rule looks like:

Can someone please assist?

[disqus-migrator[bot]]

Originally posted by Hans on 2018-03-21 11:11

I am currently looking for a way to handle the url rewritting for an Angular application. The top level domain redirect to .html seems to work perfectly fine but as soon as people add an url path e.g https://myTopLevelDomain.ne... then I receive an http 404 error. Did anyone find out how to solve this problem?

[disqus-migrator[bot]]

Originally posted by Hans on 2018-03-22 10:42

I've also open a topic on stackoverflow to find a solution for my issue. If anyone can spot the mistake - please let me know! I would be very thankful! :-)
https://stackoverflow.com/q...

[disqus-migrator[bot]]

Originally posted on 2018-03-23 22:01

Does Tomasz's solution (a screenshot) lower down on this comments section answer your question?

[disqus-migrator[bot]]

Originally posted by Sven Zoliuss on 2018-03-24 16:01

Hey lifeishao, thanks for your reply but I am pretty sure I've already tried those ones out.
Nevertheless I've added them again just to double check. To be honest, I don't see a reason why those would work ..
At least looking at the regex tester I've set up, some weird end result ends up being used. https://regex101.com/r/KK0j... and https://regex101.com/r/KK0j...

[disqus-migrator[bot]]

Originally posted by Sven Zoliuss on 2018-03-24 17:28

Top level domain nor any other requests loads the index.html file ... I would have been really surprised if that worked ... :o

[disqus-migrator[bot]]

Originally posted on 2018-03-31 11:07

Hey, yea, so the Rules Engine does not send the FQDN part of the URL, for regex evaluation. Only the relative path is send for the regex evaluation. See more on docs here:
https://docs.microsoft.com/...

[disqus-migrator[bot]]

Originally posted by rajitha on 2018-05-01 20:11

Hi ,Currently I am facing an issue in angular routing to achieve the user. I have added above two rules didn't worked for me
This is What I posted in forums If any one of in this group can help me on How to achive routing in angular application.
https://social.msdn.microso...

[disqus-migrator[bot]]

Originally posted by Nidhi Gupta on 2018-10-18 06:21

Very Impressive Azure Tutorial. The content seems to be pretty exhaustive and excellent and will definitely help in learning Azure Tutorial.I'm also a learner taken up Azure Training and I think your content has cleared some concepts of mine. While browsing for Azure Course on YouTube i found this fantastic video on Azure Course. Do check it out if you are interested to know more on Azure Tutorial.:-https://www.youtube.com/wat...