在Azure CDN上部署Static Vue App，但允许出现错误页面

Question

我已经在网上搜索了，虽然我找到了类似的文章，但是我仍然无法找到针对该特定问题的解决方案...我不熟悉Azure和服务这一事实并没有帮助他们提供（我通常使用AWS）。

很简单，我有一个静态Vue应用程序，打算在Azure CDN上托管。鉴于站点是静态的，因此我看不到需要Web服务器，但是这样做的缺点是我无法控制应用程序的路由。

请考虑以下文件夹结构：

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

index.html需要控制整个应用程序中的所有路由（存在的其他文件除外）。换句话说，无论何时将请求发送到CDN，我都需要它执行以下操作：

• 如果文件存在，则将其返回，例如example.com/assets/images/foo.png
• 如果文件不存在，则返回index.html并让Vue处理错误页面

是否有一种方法可以使用纯Azure CDN来实现此目的，或者我需要其他服务吗？或者，将我的项目托管在服务器上（通过Apache / PHP处理路由），然后仅提供CDN中的静态文件，会更简单，更快捷吗？

Answer 1

Azure内容交付网络（CDN）旨在更快地发送音频，视频，图像和其他文件。基本上，您无法在CDN上托管应用程序。在Azure上，您可以选择将Web应用程序托管在存储帐户或Azure VM或Azure应用程序服务或云服务上。

对于静态Web应用程序，建议使用host the static website on the storage account，它成本低廉，您需要为存储和访问数据付费，但对路由静态文件的控制较少。因此，您可能需要将rules engine与Azure高级CDN一起使用。您可以参考此tutorial来使用Azure CDN为静态网站启用具有SSL的自定义域。

您知道，我认为您也可以考虑将网站托管在服务器或Azure VM上，然后通过Apache / PHP处理路由。在这种情况下，您可以将CDN视为在全球范围内更快速地进入您的网站。您可以为静态内容设置缓存规则。请参见控件Azure CDN caching behavior with caching rules和Control Azure CDN caching behavior with query strings。

希望这可以为您提供帮助。