以前の記事で、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