在 Azure CDN 上部署静态 Vue 应用程序但允许错误页面

Question

我在网上搜索过，虽然我找到了类似的文章，但我无法找到解决这个特定问题的方法......这无济于事，因为我不熟悉 Azure 和服务他们提供（我通常使用 AWS）。

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

考虑以下文件夹结构：

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 应用程序服务或云服务上。

对于静态网络应用，推荐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。

希望这对你有帮助。