Azure Front Door
An Azure service that provides a cloud content delivery network with threat protection.
682 questions
Unable to setup path based routing in Frontdoor
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(310.4, 47%, 40%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EM%3C/text%3E%3C/svg%3E)
Mahesh
20
Reputation points
Im trying to setup an two different Angular application(hosted in Azure Container apps) to get externally access via a single Front door.
/angular-fe--> is an application to be accessed via https://frontdoor.net/angular-fe
And my second application
/angular-api --> is an application to be accessed via https://frontdoor.net/angular-api
I tried multiple methods to get this work but unsuccessful.
I believe im mission some paths and routes in application not at the Front door, because im able to achieve this path based routing with simple nignx hello world app at /nginx and httpd application at /httpd paths.
When i try to add Angular based binaries im not able to access the application via paths.
Please help how this path based routing can be addressed in the angular application code.
{count} votes
-
KapilAnanth-MSFT 46,016 Reputation points Microsoft Employee2024-08-09T12:36:26.6766667+00:00 @Mahesh ,
Welcome to the Microsoft Q&A Platform. Thank you for reaching out & I hope you are doing well.
I am not sure of your current configuration. For troubleshooting, let's say
- EndPoint name : endpoint.azureafd.net
- Two Routes :
- Route1 with "Patterns to match" only containing "/fe"
- Route2 with "Patterns to match" only containing "/api"
- Two OriginGroups,
- ContainerFe configured on Route1 : containerfe.azurecontainerapps.io
- ContainerApi configured on Route2 : containerapi.azurecontainerapps.io
Is my understanding correct?
From the above setup,
- Please note this is how traffic will be forwarded to the two OriginGroups when they arrive at the EndPoint
- endpoint.azureafd.net**/fe** -------> containerfe.azurecontainerapps.io**/fe**
- endpoint.azureafd.net**/api** -------> containerapi.azurecontainerapps.io**/api**
- i.e., the path is carried to the Origin
-
As next steps,
- Can you confirm if this is your setup? (configuration wise)
- Or are you using Rules Engine?
- And also, please use the Access log to verify whether the above behavior is happening or not
Cheers,
Kapil
-
Mahesh 20 Reputation points
2024-08-09T13:40:04.3966667+00:00 Thanks for pitching in.
That's exactly correct.
I have developed a simple Angular app and pushed the container to ACA and i can able to get the app accessed via Azure container app default domain.
When comes to FD, here is my route:
Origin path:
Backend Origin Group:
-
Mahesh 20 Reputation points
2024-08-09T13:51:20.56+00:00 Thanks for pitching in.
That is exactly correct.
I have created an Angular App and hosted in Azure container app and im able to access it.
Angular app can be accessible via Azure container app default domain.
Front Door Route:
Origin Group and Path:
Backend Origin Group:
Error while accessing application via FrontDoor.
-
Mahesh 20 Reputation points
2024-08-09T13:52:22.15+00:00 Thanks for pitching in.
That is exactly correct.
I have created an Angular App and hosted in Azure container app and im able to access it.
Angular app can be accessible via Azure container app default domain.
Front Door Route:
Origin Group and Path:
Backend Origin Group:
Error while accessing application via FrontDoor.
-
Anthony Chu - MSFT 861 Reputation points Microsoft Employee2024-08-09T16:26:37.47+00:00 It looks like Front Door is correctly configured. What appears to be happening is that the index.html of the Angular app is served properly. However, it's unaware that it's now hosted under a /angular prefix and it's requesting resources from the root (/). Not sure how to configure this in Angular but maybe it's this: https://angular.io/guide/deployment#the-base-tag
You might want to configure your container app to also serve the Angular app under /angular. That way if you can make it work on the container app, it should work the same on Front Door as well (you'll need to tweak the Front Door origin config for the new path).
-
KapilAnanth-MSFT 46,016 Reputation points Microsoft Employee
2024-08-09T16:55:11.7466667+00:00 @Mahesh ,
You are welcome.
Looks like the error is coming from the Angular App itself.
- Can you please check the Access log , and make sure the request to Origin was passed correctly?
- You should see something like this
-
You can use the below query, and please confirm both "httpStatusCode_s" and "httpStatusDetails_s" are giving you a HTTP response of 200.
AzureDiagnostics | where ResourceProvider == "MICROSOFT.CDN" and Category == "FrontDoorAccessLog" | project requestUri_s, originUrl_s, TimeGenerated, httpStatusCode_s, httpStatusDetails_s | sort by TimeGeneratedYou can also verify Anthony Chu - MSFT's points using the above access logs
- If the app requests files from root, as mentioned by Anthony - you have to check the documentation of the framework/library on how you can mitigate this.
Cheers,
Kapil
Sign in to comment
Sign in to answer