4

We have a website where the frontend is a SPA that is hosted in Azure Blob storage, and the backend is hosted in Azure App Service. The site will be fronted by Azure Front Door. I'm trying to route requests to the correct backend.

All endpoints in the site hosted in App Service have the format /backend/*.

In the frontend we have some files in the root, /index.html and a few others like favoicon.ico, and then some files in an /assets folder. The only common thing about these is that they have a period in the filename.

The SPA has dynamic urls, e.g. /login that don't correspond to any physical file.

I would like the below routes in Front Door but I'm having problems creating a rule for the /*.* pattern, i.e. routing everything that looks like a file to blob storage without url rewriting.

╔═══════════════════════════════╦═══════════════╦══════════════╦══════════════════════════════════════════════════╦══════════════════════════════════════════════════════════════════════════════════════════════╗
║          Source url           ║ Route pattern ║ Backend pool ║                    Target url                    ║                                         Description                                          ║
╠═══════════════════════════════╬═══════════════╬══════════════╬══════════════════════════════════════════════════╬══════════════════════════════════════════════════════════════════════════════════════════════╣
║ www.example.com/backend/login ║ /backend/*    ║ App service  ║ ourbackend.azurewebsites.net/backend/login       ║ All backed routes                                                                            ║
║ www.example.com/              ║ /             ║ Blob storage ║ ourstaticstorage.web.core.windows.net/index.html ║ Requests to the root should return index.html from blob storage                              ║
║ www.example.com/favicon.ico   ║ /*.*          ║ Blob storage ║ ourstaticstorage.web.core.windows.net/*.*        ║ Blob storage contains other static files that should be returned. All files contain a period ║
║ www.example.com/scripts.css   ║ /*.*          ║ Blob storage ║ ourstaticstorage.web.core.windows.net/*.*        ║ Blob storage contains other static files that should be returned. All files contain a period ║
║ www.example.com/styles.css    ║ /*.*          ║ Blob storage ║ ourstaticstorage.web.core.windows.net/*.*        ║ Blob storage contains other static files that should be returned. All files contain a period ║
║ www.example.com/login         ║ /*            ║ Blob storage ║ ourstaticstorage.web.core.windows.net/index.html ║ Catch all route for deep links in the spa                                                    ║
╚═══════════════════════════════╩═══════════════╩══════════════╩══════════════════════════════════════════════════╩══════════════════════════════════════════════════════════════════════════════════════════════╝

Is there some other way to get this done?

Mathias Rönnlund
  • 4,078
  • 7
  • 43
  • 96
  • have you tried only first and last rule from the table? – Thiago Custodio Jan 15 '20 at 15:33
  • If I do that then queries to e.g. /favicon.ico will return the index.html file. – Mathias Rönnlund Jan 15 '20 at 15:57
  • I think you're using the wrong type for the SPA. You should forward the request to Storage Account and let it serve the request. It's hard to help just looking to this table. – Thiago Custodio Jan 15 '20 at 16:21
  • @ThiagoCustodio can you tell me how to handle dynamic url's in the spa, like /login? – Mathias Rönnlund Jan 15 '20 at 16:28
  • this is what I'm telling, besides /backend/* , all urls should be forwarded to your SPA (blob storage) – Thiago Custodio Jan 15 '20 at 16:37
  • The problem is that forwarding everything exactly as requested won't work. Requests such as /favicon.ico will work because that file exist, but virtual url's like /login should be forwarded to /index.html in blob storage so the SPA is executed. So you are right that all others than /backend should be forwarded to blob storage, but some of those url's need to be rewritten because they are virtual url's in the spa – Mathias Rönnlund Jan 15 '20 at 18:26
  • Yes, but then you can use URL rewrite to manage that. It and seems to be recurring problem when using SPA on Azure Storage: https://stackoverflow.com/a/58718909/1384539 – Thiago Custodio Jan 15 '20 at 19:02
  • To get deep links to be handled by Blog storage I would have to point storage to return index.html whenever a file/url that doesn't exist is requested but then index.html is returned with http status 404. We have done this in some test sites but for production when requesting www.example.com/somedeepurl it doesn't look good to return the page with 404 Not Found http status even though no normal user would see it – Mathias Rönnlund Jan 16 '20 at 09:47

0 Answers0