Azure Pipelines で Azure Static Web Apps のパイプラインを構築する

以前の記事で、Azure Pipelines を使って Azure Web Apps にデプロイする内容を記載しました。
gooner.hateblo.jp
今回は、Azure Static Web Apps 向けのパイプラインを構築します。以前は GitHub Actions のみサポートされていましたが、Azure DevOps でも使えるようになったので試してみました。

パイプラインの全体設計

以前の記事と同様に、パイプラインは、自動デプロイされる開発環境向け（Commit Stage）と承認デプロイされる本番環境向け（Production Stage）を作ります。
YAML の可変部をパラメータで切り替えできるテンプレートを作ることで再利用性を向上させます。

パイプライン

基本的には、こちらのチュートリアルの通りに進めばデプロイできます。

• Static Web Apps を作成する際に、Deployment details で Other を選択する
• Static Web Apps の作成後、Manage deployment token を取得する

docs.microsoft.com
アプリケーションが Vue.js の場合、このような azure-pipelines.yml となります。

trigger:
  - master

variables:
- group: variable-group-commit
- name: imageName
  value: 'ubuntu-latest'
- name: nodeVersion
  value: '10.x'

jobs:
- job: Deploy
  pool:
    vmImage: $(imageName)
  steps:
  - task: NodeTool@0
    inputs:
      versionSpec: $(nodeVersion)
    displayName: 'Install Node.js'
  
  - script: |
      npm install
      npm run build
    displayName: 'npm install and build'
  
  - task: AzureStaticWebApp@0
    inputs:
      app_location: '/'
      api_location: 'api'
      output_location: 'dist'
    env:
      azure_static_web_apps_api_token: $(deployment_token)
    displayName: 'Deploy to Azure Static Web Apps'

Azure Web Apps と違って、Azure Static Web Apps task の AzureStaticWebApp@0 を使っています。app_location や output_location のプロパティは、リポジトリ構成に合わせて変更してください。Manage deployment token は、Variable group に登録しています。

デプロイの承認機能が使えない？

Azure Pipeline の承認は、Deployment jobs と Environments を使います。
しかし、AzureStaticWebApp@0 のプロパティでアプリケーションのコードの場所を指定する必要があり、Deployment jobs を使うことができませんでした。
別のやり方があるのかもしれませんが、今のところ分かっていないです。

そのため、開発環境と本番環境のパイプラインの違いは、ブランチと Manage deployment token を切り替えるのみとなっています。

まとめ

Azure Pipelines を使って、Azure Static Web Apps にデプロイするパイプラインを構築してみました。
まだ Azure Static Web Apps はプレビューですが、Vue.js や React などで作った SPA のデプロイ環境として期待できるサービスです。Azure Static Web Apps CLI などの面白い機能もあるので、GA に向けてキャッチアップしていきたいと思います。

こちらから、パイプライン YAML の全体を確認できます。
github.com