背景
最近在浏览微软的文档的时候发现，微软喜欢用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应用的自定义域名-添加按钮即可。
费用
目前这个服务还是预览版，预览版期间免费。