はじめに

以前の記事「Azure Static Web Appsを試してみた」でAzure Static Web Appsで、GitHubを利用した自動Build/Deployについて書いてみました。
せっかくなので、今回はリポジトリー自体もAzure(Azure DevOps)で実施してみようと思います。

DevOpsリポジトリーの作成

作業の簡略化のために以前の記事で作成したGitHubのリポジトリから複製（Import)しようと思います。

Azure DevOpsにログインし、レポジトリで「Import repository」をクリックします。
前回の記事で作成したGitHubのURLを指定し、Importを実施します。

※ 認証が必要なリポジトリの場合は、「Requires Authentication」のチェックボックスをONにして、ユーザーIDとパスワードを入力してからImportを実施してください。

リソース(Static Web Apps)の作成

前回と同様に作成するのですが、「デプロイの詳細」で「その他」を選択し、GitHub以外のリポジトリーでの作業を前提とし、リソースを作成します。

この状態で作成されたStatic Web Appsにアクセスすると、以下のような画面が表示されます。
リポジトリー関連が未設定という警告ですね。
そのため、Azure DevOpsのリポジトリとパイプラインを連携してみようと思います。

Azure DevOps でのパイプラインを作成

デプロイトークンの取得

パイプラインで必要となるデプロイトークンをポータルから取得します。

Static Web Appsの概要で「デプロイトークンの管理」を選択する
デプロイトークンの管理ビューで「デプロイトークン」をコピーしてローカルに保存しておく

パイプラインの作成

作成したAzre DevOpsのリポジトリー(GitHubがインポートしたリポジトリ)でパイプラインを作成していきます。

「Set up build」をクリックします。
Configure your pipelineで「Node.js with Angular」を選択します。

Build後のStatic Web AppsへのDeployルールを追記します(24 ～ 30行目)

# Node.js with Angular
# Build a Node.js project that uses Angular.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
　
trigger:
- main
　
pool:
vmImage: ubuntu-latest
　
steps:
- task: NodeTool@0
inputs:
versionSpec: '12.x'
displayName: 'Install Node.js'
　
- script: |
npm install -g @angular/cli@9.1.15
npm install
ng build --prod
displayName: 'npm install and build'
　
- task: AzureStaticWebApp@0
inputs:
  app_location: "/" 
  api_location: ""
  output_location: "dist/appName"
env:
  azure_static_web_apps_api_token: $(deployment_token)

Static Web Appsへのデプロイ用のトークンを環境変数として登録
1. Variablesをクリック
2. New variableをクリック
3. Nameに「deployment_token」を入力
4. Valueに取得した「デプロイトークン」を入力
5. Keep this value secretのチェックボックスをOnへ
「Save and run」をクリックし、実行