20

We try to configure Azure CDN on Microsoft Standard pricing to allow us rewrite Url to route all application routing to ./index.html. How to setup rules engine to rewrite url but left all js file as it is? All examples in google show how to do this on premium pricing but we like to do this on Microsoft Standard it is possible?

spender
  • 117,338
  • 33
  • 229
  • 351
CrazyBaran
  • 572
  • 3
  • 20
  • I took the liberty of changing the tags for this question, as this question is not really angular specific (for instance, it is equally useful to someone deploying a react-router app). As somewhat "difficult to find" configuration for deploying SPA specifically with **Microsoft Standard CDN Rules Engine**, please consider changing the accepted answer to the solution that actually works in this scenario. – spender Oct 16 '20 at 09:10

3 Answers3

34

I finally got a working answer from Microsoft Support on this. They said that the Microsoft CDN Rules Engine does not support URL file extension Not Any and instead I should check for the length of the file extension.

  • Condition: URL file extension
    • Operator = Not greater than
    • Extension = 0
    • Case Transform = No transform
  • Action: URL rewrite
    • Source Pattern = /
    • Destination = /index.html
    • Preserve unmatched path = No

This solution works for me. Make sure to purge your cdn cache before testing.

seabass
  • 1,030
  • 10
  • 22
  • 1
    Worked for me but I had to set the Destination to /index.html – Bryant Feb 04 '20 at 21:25
  • 1
    Any idea on how to implement the same rule but on Verizon Premium? – Victor Reyes Feb 24 '20 at 20:35
  • 1
    @cankemik we used two rewrite rules. First `/50D231B/endpoint-name/(.*sub-path/?)($|\?.*)` and `/50D231B/endpoint-name/(.*path)((?:[^\?]*/)?[^\?/.]+)($|\?.*)` , both rewriting to `/50D231B/endpoint-name/folder-on-storage/sub-path/index.html`. Sadly I can't remember the full explanation of this. – Victor Reyes Jun 30 '20 at 21:28
  • 1
    @VictorReyes so it seems solution is to map right directory with regex using IF Always condition. Thanks for the explanation. – cankemik Jul 01 '20 at 05:24
  • 1
    @cankemik Yes, angular should manage those redirections on the routing, but that doesn't apply for files like css or js, they will need to go straight to the folder on the storage. – Victor Reyes Jul 02 '20 at 13:47
  • What about same rewrite rule for Verizon Premium rules engine? – Jimit.Gandhi Nov 14 '20 at 18:22
  • The problem with the above rule is that if the file does not have an extension this is also redirected to index.html - this can can happen with third party libraries - this rule would need to be extended in these cases – markyph Nov 25 '20 at 10:11
  • I found that you can exclude files in the rules by using If Url Path Not contains (file name to ignore) with the above rule - but found that in many instance purging the cache did not work - and had to recreate the CDN from scratch again and it eventually worked as expected. – markyph Nov 27 '20 at 14:22
5

If none of your page URLs contain a dot, you can set a rule as follows:

  • Condition: 'URL file extension' = Not Any (i.e. there is no extension)
  • Action: 'URL rewrite',
    • source = /
    • destination = index.html
    • Preserve umatched path = No

This will rewrite any URL without a dot in the trailing section to index.html.

limos
  • 1,526
  • 12
  • 13
  • 1
    I was not able to get this to work for me. I still get a 404 for some reason. – G3tinmybelly Dec 05 '19 at 20:03
  • @G3tinmybelly Did you try purge CDN? – CrazyBaran Dec 09 '19 at 09:09
  • 1
    Yeah, but I was still getting the 404 not found. I ended up contacting azure support to lets hope that they can resolve my issue. – G3tinmybelly Dec 11 '19 at 17:44
  • This does not answer the question, because this approach does not appear to work using Microsoft Standard CDN Rules Engine. On the other hand, the well-upvoted answer provides a workaround that works as expected :https://stackoverflow.com/a/59585005/14357 – spender Oct 15 '20 at 09:55
4

I had this challenge when working on setting up a static website on Azure blob storage with Azure Microsoft CDN.

Here's how I got it done.

If you want to achieve this using a Powershell script, then use the below script. The script also contains a rule for setting up Http to Https redirect:

# Define Variables
$RESOURCE_GROUP_NAME = MyResourceGroup
$PROJECT = MyProject
$CDN_PROFILE_NAME = MyCDNProfile

# Create a New Http to Https Redirect Rule
$RULE_CONDITION_1 = New-AzCdnDeliveryRuleCondition -MatchVariable 'RequestScheme' -Operator 'Equal' -MatchValue 'HTTP'
$RULE_ACTION_1 = New-AzCdnDeliveryRuleAction -RedirectType 'Moved' -DestinationProtocol 'Https'
$HTTP_TO_HTTPS_RULE = New-AzCdnDeliveryRule -Name 'HttpToHttpsRedirectRule' -Order 1 -Condition $RULE_CONDITION_1 -Action $RULE_ACTION_1

# Create a New SPA Rewrite Rule
$RULE_CONDITION_2 = New-AzCdnDeliveryRuleCondition -MatchVariable 'UrlFileExtension' -Operator 'LessThan' -MatchValue '1'
$RULE_ACTION_2 = New-AzCdnDeliveryRuleAction -SourcePattern '/' -Destination '/index.html'
$SPA_REWRITE_RULE = New-AzCdnDeliveryRule -Name 'SpaRewriteRule' -Order 2 -Condition $RULE_CONDITION_2 -Action $RULE_ACTION_2

# Set the CDN Delivery Policy with the CDN Delivery Rule(s)
$CDN_DELIVERY_POLICY = New-AzCdnDeliveryPolicy -Description "Https redirect policy" -Rule $HTTP_TO_HTTPS_RULE,$SPA_REWRITE_RULE

# Get CDN Endpoint
$CDN_ENDPOINT = Get-AzCdnEndpoint -ProfileName $CDN_PROFILE_NAME -ResourceGroupName $RESOURCE_GROUP_NAME -EndpointName $PROJECT

# Assign the CDN Delivery Policy to the CDN Endpoint
$CDN_ENDPOINT.DeliveryPolicy = $CDN_DELIVERY_POLICY

# Save CDN Endpoint Changes with Updated Delivery Policy
Set-AzCdnEndpoint -CdnEndpoint $CDN_ENDPOINT

This should output something like this for you:

enter image description here

halfer
  • 19,824
  • 17
  • 99
  • 186
Promise Preston
  • 24,334
  • 12
  • 145
  • 143