Azure CDN Microsoft Standard Rules Engine Rewrite URL for single-page-application

Question

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?

Boulogne

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. – Topmost

Answer 1

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.

Michellmichella

I was not able to get this to work for me. I still get a 404 for some reason. – Dionysian

@Dionysian Did you try purge CDN? – Boulogne

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. – Dionysian

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://mcmap.net/q/597196/-azure-cdn-microsoft-standard-rules-engine-rewrite-url-for-single-page-application – Topmost

Answer 2

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.

Ambala

Worked for me but I had to set the Destination to /index.html – Hogue

Any idea on how to implement the same rule but on Verizon Premium? – Luong

@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. – Luong

@VictorReyes so it seems solution is to map right directory with regex using IF Always condition. Thanks for the explanation. – Tartan

@Tartan 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. – Luong

What about same rewrite rule for Verizon Premium rules engine? – Doura

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 – Carolus

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. – Carolus

Answer 3

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:

Benzvi