Single Page Application Azure gateway path-based routing to Function App

Question

I've an Single Page Application (Vuejs + node) with static file and an api.

I use an azure application gateway standard to serve. I dispatch requests between static files, app plan service and function app (with Consumption plan).

I use a function app because I want to route html5 routes to index.html. Static website send a 404 error for a route different from /. The function app is use to rewrite SPA url to send it to the page index.html. I get ideas from https://dev.to/effectory/hosting-an-angular-app-as-a-static-website-with-azure-function-proxies-3m44

Static files (for all others assets) & app plan service (api) redirection work but not function app. I have the error when I want to reach the function app from my original hostname:

502 - Web server received an invalid response while acting as a gateway or proxy server.

My function app is unhealthy on the scheme because the plan I choose doesn't allow to probe. When I request directly my function, it's work

How can I configure Azure to make my SPA works?

Answer 1

I have tried also to route to Azure CDN. The status is unhealty too.

Maybe it is because I have a standard & small plan.

My solution, not the best but it works, is:

• A CDN with a custom domain eg: club.contoso.com
• A gateway which listen www.contoso.com

For client routes, I redirect (not a routing to backend) to the CDN. The CDN have 5 free rules that manage the rewriting.

So if you want to reach www.contoso.com/foo/bar , you are redirect to club.contoso.com/foo/bar which rewrite to club.contoso.com/index.html with arg /foo/bar