Azure静态WebApp的配置和使用

前言

前段时间对网站进行了备案，顺便写了一个静态的个人引导起始页。遂寻找有没有可用的托管服务。

GithubPages 和 CloudflarePages 速度一般，正好手上有 Azure 账号，探索到这玩意有一个叫做 “静态Webapp” 的服务，可以用来托管静态网站。于是琢磨了一下并且开始使用

那是什么？

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

Azure 静态 Web 应用的工作流适用于开发人员的日常工作流。基于代码更改生成并部署应用。
当你创建 Azure Static Web Apps 资源时，Azure 会直接与 GitHub 或 Azure DevOps 交互以监视你选择的分支。每次你向受监视的分支推送提交或接受拉取请求时，系统都会自动运行一次生成，并将你的应用和 API 部署到 Azure。
通常使用不需要服务器端渲染的库和 Web 框架（例如 Angular、React、Svelte、Vue 或 Blazor）来生成静态 Web 应用。这些应用包括构成应用程序的 HTML、CSS、JavaScript 和映像资产。对于传统 Web 服务器，这些资产与任何所需的 API 终结点一起由单个服务器提供。
使用静态 Web 应用时，静态资产与传统 Web 服务器分离，由分布在世界各地的服务器端提供。由于文件在物理上离最终用户更近，这种分布使文件提供的速度更快。此外，API 终结点使用无服务器体系结构，无需将完整的后端服务器组合在一起。

简而言之就是 Azure 提供的类似 Cfpages 的服务。但又不完全一样，Azure 静态 web 应用构建依靠的是仓库的 Action，这个 Action 会构建你的项目并且推送到 Azure，而 cloudflare pages 是把东西下过去在 cloudflare 的机器上构建。

速度，配额相关

速度的话只能用非常快来形容。没有之一，目前用过境外最快的。

配额如下，免费版没有 sla，提供 250mb 的空间，但是流量无限，基本可以看做是 Cloudflare Pages 少了 50M

开始使用

打开Azure仪表盘，点击创建静态 Web 应用

把该输入的都输入了。需要注意的是如果你需要同步的仓库在组织里还要去 Github 手动授权 Azure。

选择完仓库之后底下会有一个生成预设，如果你的网页是构建产物或者纯 html，留空。

* 注意，如果你的项目比较特殊没有 index.html，会导致构建失败。

接下来是我认为整个 Azure 静态 WebApp 中最唐的一个地方。

如你所见，他不支持在仪表盘里自定义构建命令。他默认的构建命令根据框架不同有所出入，但无非还是 npm run build

目前的方法是先下一步等他在 Github 仓库创建了 Workflow 文件之后手动更改。

一个 Azure 静态 WebApp 的 Workflow 文件大概如下

1
name: Azure Static Web Apps CI/CD
2

3
on:
4
  push:
5
    branches:
6
      - master
7
  pull_request:
8
    types: [opened, synchronize, reopened, closed]
9
    branches:
10
      - master
11

12
jobs:
13
  build_and_deploy_job:
14
    if: github.event_name == 'push'  (github.event_name == 'pull_request' && github.event.action != 'closed')
15
    runs-on: ubuntu-latest
16
    name: Build and Deploy Job
17
    steps:
18
      - uses: actions/checkout@v3
19
        with:
20
          submodules: true
21
          lfs: false
22
      - name: Build And Deploy
23
        id: builddeploy
24
        uses: Azure/static-web-apps-deploy@v1
25
        with:
26
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_KIND_MEADOW_05AF41C00 }}
27
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
28
          action: "upload"
29
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
30
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
31
          app_location: "/" # App source code path
32
          api_location: "" # Api source code path - optional
33
          output_location: "dist" # Built app content directory - optional
34
          ###### End of Repository/Build Configurations ######
35

36
  close_pull_request_job:
37
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
38
    runs-on: ubuntu-latest
39
    name: Close Pull Request Job
40
    steps:
41
      - name: Close Pull Request
42
        id: closepullrequest
43
        uses: Azure/static-web-apps-deploy@v1
44
        with:
45
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_KIND_MEADOW_05AF41C00 }}
46
          action: "close"

如果你需要自定义构建命令。你需要在这里增加一个_app_build_command_

1
 app_location: "/" # App source code path
2
          api_location: "" # Api source code path - optional
3
          output_location: "dist" # Built app content directory - optional
4
          app_build_command: "npm run build"

接下来第二个唐点来了，这东西不默认带 npm 之外的包管理器，需要自己想办法在 Action 执行前安装。这部分不再多说。

然后保存你的 Workflow 文件，当你每次 Push 新东西到这个仓库，Action 会自动运行并且推送构建后的内容到 Azure。

自定义域 & SSL

接下来当你部署完成之后就要添加自定义域了。

这东西的自定义域部署跟 Cloudflare Pages 差不多，给你一个地址 cname 过去就好了。

需要注意的是如果你绑定的域名是根域，需要走一步额外的 txt 验证（贼慢）。

关于证书，不得不说巨硬还是大手笔。

（题外话）为什么这么快？

首先，Azure 的路由不差，并且这个东西会部署在香港的基础设施上

其次 Azure 注册门槛是众所周知的高，滥用少也是一方面。

前言

那是什么？

速度，配额相关

开始使用

自定义域 & SSL

（题外话）为什么这么快？

评论