Deploy Static Vue App on Azure CDN but allow Error Pages

I have searched around the web and whilst I have found similar articles, I have not been able to find a solution to this specific issue... This is not helped by the fact that I am not familiar with Azure and the services they provide (I usually use AWS).

Quite simply, I have a static Vue application that I intend to host on Azure CDN. Given the site is static, I do not see the need for a webserver, however, the downside of this is that I have no way to control the routing of the application.

Consider the following folder structure:

public
│   index.html
│   manifest.json
|   ...    
│
└───assets
│   │
│   └───images
│   |   │   ...
|   |
│   └───fonts
|       |   ...
│   
└───js
    ...

index.html needs to control all routing throughout the application (aside from other files that exist). In other words, whenever a request is sent to the CDN, I need it to do the following:

If the file exists then return it e.g. example.com/assets/images/foo.png
If the file does not exist then return index.html and let Vue handle the error page

Is there a way to achieve this using purely Azure CDN or do I need another service? Or, would it just be a lot simpler and quicker to host my project on a server (handle the routing through Apache/PHP), and then serve just the static files from the CDN?

Solution

The Azure Content Delivery Network (CDN) is designed to send audio, video, images, and other files faster. Basically, you could not host your application on the CDN. On Azure, you could select to host your web app on the storage account or Azure VM or Azure app service or cloud service.

For the static web application, it's recommended to host the static website on the storage account, which has a low cost and you need pay for storing and access data but you have less control of routing your static files. So, you may need to use rules engine with Azure premium CDN. You could refer to this tutorial to use Azure CDN to enable a custom domain with SSL for a static website.

As you know, I think you also could consider hosting your website on your server or Azure VM, then handle the routing through Apache/PHP. In this case, you could regard the CDN as a globally quicker entry to your website. You could set the cache rules for static contents. see Control Azure CDN caching behavior with caching rules and Control Azure CDN caching behavior with query strings.

Hope this could help you.