尝鲜一试，Azure静态网站应用服务(Azure Static Web Apps) 免费预览，协同Github自动发布静态SPA

背景

最近在浏览微软的文档的时候发现，微软喜欢用Hugo这个文档框架，有些技术产品的文档页面就用Hugo来做的，同时搭配Github + Azure Static Web Apps Service这个组合来完成自动构建和发布。

刚好我也有个和Hugo类似的静态前端框架在用，结果还真的在Azure Static Web Apps Service支持的范围内，索性就尝鲜一试。

什么是Azure静态网站应用服务(Azure Static Web Apps)

Azure Static Web Apps是一种服务，可从代码存储库自动生成完整的堆栈Web应用，并将其部署到Azure。

使用下来通俗的感受就是，基于Git，发布你的静态SPA到Github上，然后会自动触发Github的Actions进行流程构建，在Github构建流程中会编译SPA，并且最终发布到Azure的静态应用中去，加上自定义域名，也就实打实的一个静态网站了，应该特别适合一些技术产品的网站或者文档中心来着。

基本概念

Azure静态Web应用的工作流适用于开发人员的日常工作流。基于代码更改生成并部署应用。

当你创建Azure Static Web Apps资源时，Azure会直接与GitHub或Azure DevOps交互以监视你选择的分支。每次你向受监视的分支推送提交或接受拉取请求时，系统都会自动运行一次生成，并将你的应用和API部署到Azure。

通常使用不需要服务器端渲染的库和框架（例如，Angular、React、Svelte、Vue或Blazor）来生成静态Web应用。这些应用包括构成应用程序的HTML、CSS、JavaScript和映像资产。对于传统Web服务器，这些资产与任何所需的API终结点一起由单个服务器提供。

使用静态Web应用时，静态资产与传统Web服务器分离，由分布在世界各地的服务器端提供。由于文件在物理上离最终用户更近，这种分布使文件提供的速度更快。此外，API终结点使用无服务器体系结构，无需将完整的后端服务器组合在一起。

Azure Functions是一种无服务器解决方案，可以使用户减少代码编写、减少需要维护的基础结构并节省成本。无需担心部署和维护服务器，云基础结构提供保持应用程序运行所需的所有最新资源。

主要功能

适用于HTML、CSS、JavaScript和映像等静态内容的Web托管。
由Azure Functions提供的集成API支持。
一流的GitHub和Azure DevOps集成，其中的存储库更改会触发生成和部署。
全球分布的静态内容，使内容更接近你的用户。
可自动续订的免费SSL证书。
自定义域为应用提供品牌自定义。
调用API时使用反向代理的无缝安全模型，这不需要配置CORS。
身份验证提供程序与Azure Active Directory、Facebook、Google、GitHub和Twitter集成。
可自定义的授权角色定义和分配。
后端路由规则，使你能够完全控制所提供的内容和路由。
生成的临时版本由拉取请求提供支持，在发布前提供站点的预览版本。

可对静态Web应用执行的操作

使用Angular、React、Svelte、Vue等JavaScript框架和库构建新式Web应用程序，或使用带Azure Functions后端的Blazor创建WebAssembly应用程序。
使用Gatsby、Hugo、VuePress等框架发布静态站点。
使用Next.js和Nuxt.js等框架部署Web应用程序。

安装Visual Studio Code扩展

通过VSC的扩展菜单搜索Azure Static Web Apps关键词安装即可。

实在找不到就用下面的地址：

https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps

安装完成之后，VSC的左侧菜单会多出一个Azure图标。

准备好Github和Azure账号

GitHub账号就不用多说了，至于Azure账号，比较推荐的就是走Free Trial就行了，但是需要信用卡这是硬伤哈。

https://azure.microsoft.com/free

需要登录Azure和GitHub。如果尚未从Visual Studio Code登录到Azure和GitHub，该扩展将在创建过程中提示你登录到这两个站点。

创建静态网站应用

回到Visual Studio Code的左侧Azure菜单，点击Static Web Apps旁边的加号

会弹出创建一个静态网站应用的六个步骤，第一步先输入应用名称

第二步，选中静态应用对应的SPA框架。

设置你的SPA程序的代码路径，默认是/，但是对有些代码来说，比如丢在/src/中了，那就要对应的修改。

接下来会让你创建一个Azure Function的目录，如果你把默认的api删掉就可以跳过这个创建，这里我们不需要就暂时跳过。

接下来就是设定SPA的静态输出目录了，我们知道对vuepress来说，默认就是.vuepress/dist，如果你改了，这里就需要跟着改。

再接着，就是让你选Azure的区域了，这决定了你这个会被创建在Azure的哪个片区，就中国而言，当然东亚就是我们要的片区。

接下来就等着完成一系列的创建吧。

创建成功之后，可以点击弹窗消息中的Browse Website即可。

我们查看这个项目的Github Action会发现，完成了一个ci: add Azure Static Web Apps workflow file的流程。

其核心就是添加了一个yml文件。

剩下的就简单了，只要你再次编辑SPA里面的东西，并且git提交到Github之后，它就会自动构建和发布。

你看是不是把Github+Azure完美的结合起来了，肯定又是微软用来圈钱的新武器。

如果不需要这个应用，也可以在VSC那个Azure扩展中，一键删除。

设置自定义域名

默认创建好静态网站应用后会自动分配一个二级域名，这个大家用过Azure都知道，我们只需要在自己域名添加cname到这个域名就可以添加自定义域名绑定。

要绑定新自定义域名，只要点击Azure Portal中该静态Web应用的自定义域名-添加按钮即可。

费用

目前这个服务还是预览版，预览版期间免费。

参考