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文件大概如下

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - master
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - master

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

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

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

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

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

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

自定义域&SSL

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

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

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

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

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

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

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

来自海南

前言

那是什么？

速度，配额相关

开始使用

自定义域&SSL

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

推荐文章