使用 Azure Functions、SignalR 和静态 HTML 构建无服务器状态页面

本文是#25DaysOfServerless活动的一部分。整个十二月，微软云技术倡导者每天都会发布新的挑战。了解更多关于 Microsoft Azure 如何助力您实现无服务器功能的信息。

#25DaysOfServerless挑战 第8天

邪恶的格林奇偷走了全世界所有的服务器，我们必须前往许多国家，经历许多不同的情况才能把事情恢复正常！

...

今天，我们将来到北极，探访全球送礼行动的中心——圣诞老人的工作室！

技术并非总是完美无缺。故障和中断时有发生——即使是圣诞老人也不例外。如果出现问题，我们需要一种方法向全球用户传达服务中断的当前状态。这就是“状态页面”解决方案。

圣诞老人和他的团队需要一种方法，向所有参与圣诞节早晨庆祝活动的人员报告服务中断情况。这便是status.azure.com上所显示内容的简化版本，该网站会发布许多服务的状态信息。

为简便起见，我们希望能够通过设置（并广播）系统（驯鹿引导和运送）的当前“状态”来通知他人，可以设置以下任一信息更新：

• 我们遇到问题（服务中断/离线）
• 我们的问题已解决（服务已恢复/已上线）
• 仍在调查中（请稍候更新）

我们还会显示所有更新的日志，方便大家随时了解最新进展。

图片来源：卡罗·拉姆齐

解决方案

我们可以使用Azure 函数、静态 HTML 网站、外发 webhook 和SignalR来解决这个问题，从而自动刷新/重新加载浏览器。

使用的技术

该解决方案的核心是一个Azure 函数（运行 Node.js） ，它通过传出 webhook（来自 Microsoft Teams）触发。

该函数会修改存储在 Azure 存储中由无服务器 SMB 文件共享提供的“web 服务器”中的 index.html 文件。

用户可以open通过在聊天频道内调用“状态更新”功能来发送消息update。close

除了网站文件外，还将使用Azure 表来存储每次状态更新的历史记录。

SignalR管理客户端的刷新，以便对 HTML 所做的更改能够立即显示，而无需最终用户进行任何交互。

Application Insights 用于提供对解决方案的运行、行为和使用情况的可观察性，是构建高可用性和可靠系统的“最佳实践”……这是我们对任何状态页面解决方案的期望。

图片来源：卡罗·拉姆齐

（点击此处查看实际效果）

先决条件

您需要注册以下服务的帐户：

• Microsoft Azure
• 微软团队

部署说明

1. 请查看我在 GitHub 上的解决方案，其中包含一个“部署到 Azure”按钮，方便您立即开始部​​署。您只需要一个免费的 Azure 帐户。

蓝色按钮会将此解决方案所需的所有资源部署到您选择的资源组和 Azure 区域中。您选择的名称还会决定用于查看状态页面的 URL 以及用于触发更新的传入 URL。部署完成后，请继续执行步骤 2。

2.在 Azure 门户中，打开存储帐户并添加一个名为 的表statuses。您无需设置任何属性或添加记录。

3.打开函数应用，teams-webhook点击“获取函数网址”，复制网址。

4.在新标签页中打开函数的 URL。这是“状态页面”，更新后会自动更改。它与下一步中使用的“获取函数 URL”不同。

5.打开 Microsoft Teams，导航到要创建机器人的团队的“应用”页面。单击“创建传出 Webhook”。

• 用作StatusPage机器人名称（目前是硬编码的）。
• 粘贴函数 URL，输入描述，然后点击创建按钮。

系统会提示您输入一个用于验证 Teams Webhook 调用的密钥。我们目前未使用此功能。请关闭对话框。

6.在 Microsoft Teams 中，输入以下命令更新状态页面@StatusPage以召唤机器人：open We are experiencing a problem. Standby for more information

可用命令有：

        @StatusPage open [message]
        @StatusPage update [message]
        @StatusPage close [message]
        @StatusPage help`

该解决方案基于为 Microsoft Ignite The Tour 打造的现场演示。

要了解完整演示的更多信息，请查看“ OPS20 - 事件响应”代码库。非常感谢Anthony Chu 的辛勤付出，使之得以实现。

图片来源：卡罗·拉姆齐

你还能用什么其他方法解决这个问题？请在下方评论区分享你的解决方案！

你想提交你自己的解决方案来应对这个挑战吗？

一旦找到解决方案，请将其作为问题提交。

如果您的解决方案不涉及代码或代码库供查看，请录制一段简短的视频，并在问题描述中以链接形式提交。请务必告知我们该解决方案针对的是哪个挑战。

我们非常期待看到你的作品！你有什么意见或问题吗？请在下方评论区留言。

整个十二月，我们将举办为期 25 天的无服务器架构挑战赛，敬请期待！请持续关注 dev.to，我们将在此发布挑战和解决方案！立即注册 Azure 免费帐户，为挑战做好准备！