こちらの記事の続きです。
本エントリでは
「GitHubに作ったClient Side BlazorのPrivate Repositoryのmaster branchへのコミットをトリガーにして、Azure DevOpsでBuild, UnitTest, Publishした後、Azure Storageの静的サイトへ自動デプロイする。」
というCI/CDのベーシック(?)な流れを設定してみたので、その設定方法を記録として残します。
あくまで記録なので、大した説明もしていませんのでご留意ください。
手順
Client Side Blazorと単体テスト プロジェクトを持つソースコード一式をGitHubにPrivate Repositoryとして用意しました。
Azure DevOpsにProjectの作成
Azure DevOpsにアクセスします。
Private Projectを生成します。
今回はClientSideBlazor
にしました。
Build Pipelinesの設定
GitHubのPrivate Repositoryへのコミットをトリガーにbuild, UnitTest, Publishを行うBuild Pipelineを設定します。
restore, UnitTest, publishの設定
メニューからPipelines
を選択して、ソースの置き場所であるGitHub
を選択します。
Blazorのソースが格納されたRepositoryを選択します。
Starter pipelines
を選択します。
YAMLが表示されましたね。
ここを編集してきます。
不要なTaskを削除します。
steps
以下を全て削除しましょう。
画面右上のShow assistant
を押下し、.NET Core
を選択します。
Command
はrestore
を選択します。
Blazorの.sln
ファイルの相対パスをPath to project(s)
に指定しAdd
を押下します。
YAMLにrestore
のTaskが追加されましたね。
あとはtest
, publish
のTaskを同じように追加します。
publish
の注意点としてはworkingDirectory
は.sln
がある相対パスを指定し
Argumentは-c Release -o $(Build.SourcesDirectory)/out
を指定します。
publish
に成功すると$(Build.SourcesDirectory)/out
以下にZIPで固められたPublishファイルが格納されます。
※zipAfterPublish
を指定していないのにZIPになるのはpublishWebProjects
のせいでしょうか?
ちょっとよく分かっていません。
ここまでのYAMLは以下の通りです。
# Starter pipeline # Start with a minimal pipeline that you can customize to build and deploy your code. # Add steps that build, run tests, deploy, and more: # https://aka.ms/yaml trigger: - master pool: vmImage: 'ubuntu-latest' steps: - task: DotNetCoreCLI@2 inputs: command: 'restore' projects: 'src/ClientSideBlazorSample.sln' feedsToUse: 'select' - task: DotNetCoreCLI@2 inputs: command: 'test' projects: 'src/ClientSideBlazorSample.sln' - task: DotNetCoreCLI@2 inputs: command: 'publish' publishWebProjects: true arguments: '-c Release -o $(Build.SourcesDirectory)/out' workingDirectory: 'src/ClientSideBlazorSample'
なお.NET Core CLI Taskで使用できる設定値は以下をご参照ください。
Azure ArtifactsへのPublishファイルコピーの設定
publish
で生成されたZIPファイルをRelease Pipelines
で使用するために、Azure ArtifactsへコピーするYAMLの設定を追加します。
Show assistant
からCopy files
を選択します。
Source Folder
はpublish
で指定したパスを指定します。
Contents
はpublish
で生成されたZIPのファイル名を指定します。
Target Folder
は$(Build.ArtifactStagingDirectory)
を指定します。
※Build.ArtifactStagingDirectory
については以下をご参照ください。
最後にShow assistant
からPublish build artifacts
を選択します。
デフォルトのままAdd
します。
以上でPipelines
の設定は完了です。
最終的なYAMLは以下の通りです。
# Starter pipeline # Start with a minimal pipeline that you can customize to build and deploy your code. # Add steps that build, run tests, deploy, and more: # https://aka.ms/yaml trigger: - master pool: vmImage: 'ubuntu-latest' steps: - task: DotNetCoreCLI@2 inputs: command: 'restore' projects: 'src/ClientSideBlazorSample.sln' feedsToUse: 'select' - task: DotNetCoreCLI@2 inputs: command: 'test' projects: 'src/ClientSideBlazorSample.sln' - task: DotNetCoreCLI@2 inputs: command: 'publish' publishWebProjects: true arguments: '-c Release -o $(Build.SourcesDirectory)/out' workingDirectory: 'src/ClientSideBlazorSample' - task: CopyFiles@2 inputs: SourceFolder: '$(Build.SourcesDirectory)/out' Contents: 'ClientSideBlazorSample.zip' TargetFolder: '$(Build.ArtifactStagingDirectory)' CleanTargetFolder: true - task: PublishBuildArtifacts@1 inputs: PathtoPublish: '$(Build.ArtifactStagingDirectory)' ArtifactName: 'drop' publishLocation: 'Container'
右上のSave
ボタンを押下してYAMLをRepositoryにコミットすると、設定したPipelinesが実行されます。
Pipelines実行結果
実行結果はこんな感じになりました。
Testのタブを選択するとUnitTestの結果も見れます。
※テストでFailedがあると、以降で設定するRelease Pipelineはトリガーされません。
Release Pipelinesの設定
Azure Storageの静的サイトへ自動デプロイするためにRelease Pipelines
の設定を行います。
画面左メニューからRelease
のメニューを選択します。
New Pipelines
を押下し、Empty jobs
を選択します。
Stage名は好きに変えてください。
Artifactsの設定
赤く塗ったAdd an artifact
を押下します。
Project
は自身であるClientSideBlazor
を選択し、Source Build Pipeline
は先ほど作成したbuild pipelines
の項目名を選択してAdd
を押下します。
Artifactの稲妻のマークを選択します。
稲妻のマークで、このPipelineを動かすトリガーを設定します。
Continuous deployment trigger
をEnable
にします。
Repositoryの監視対象branchをmaster
に指定します。
Pull Requestのトリガーは無効のままにしておきましょう。
以上でCDのトリガーと、Deployに使用するArtifactsの指定を終えました。
Deploy Stageの設定
Deployの設定を行います。
今回はDeployの手動承認やGate(※)は指定しません。
※関連付けられたIssueやWorkItemが0件か や Release Pipeline上で実行したテスト結果が正常か といった条件の設定
Stage1の1 job, 0 task
というリンクを押下します。
Agent Job
の+
リンクを押下します。
publish
で作成したZIPファイルの解凍処理を追加します。
Extract files
を選択します。
Archive file patterns
に**/ClientSideBlazorSample.zip
を指定します。
Destination folder
は$(Build.BuildId)
を指定します。
Azure Key Vaultの設定
デプロイにはAzure CLIを使用します。
CLIコマンドには--account-key
を記載する必要がありますが、機微な情報なのでAzure DevOpsの設定内に記述するわけにはいきません。
よって--account-key
の情報はAzure Key Vaultに格納し、そちらの値を参照する形でCLIを記述します。
Azure Key Vaultの設定のためここで一旦Azure DevOpsからAzure Portalに移動します。
Azure PortalからAzure Key Vaultを追加します。
シークレットに--account-key
情報を追加します。シークレットの名前はstorageKey
にしました。
--account-key
の確認は以下のコマンドで行えます。
az storage account keys list --account-name {StorageAccount名}
ここで一旦Azure DevOpsに戻ります。
Azure CLIから値を取得するためのAzure Key Vault
のタスクを追加します。
Agent Job
の+
リンクからAzure Key Vault
を検索し追加します。
Azure subscription
はご自身のサブスクリプションを選択します。
※選択後承認ボタンが表示されるので、承認しましょう。
Key vault
は上で作ったKey Vault名を指定します。
Secrets filter
はAzure Key Vaultに追加したシークレット名のstorageKey
を指定します。
ここで一旦Azure Portalに移動し、アクセスポリシーを追加します。
アクセスポリシーの追加
を押下します。
シークレットのアクセス許可
から取得
と一覧
を選択します。
プリンシパル
は{user名}-{Azure DevOpsのProject名}-{サブスクリプションID}
の項目を選択します。
※先にAzure DevOpsでAzure Key Vault
のタスクを追加し、承認を終えていないとここで表示されません。
保存ボタンを押下することを忘れないでください。
以上でAzure Key Vault側の設定は終了です。Azure DevOpsに戻ります。
Azure CLIの設定
Azure CLIを使ってAzure Storageへとファイルをアップロードします。
Agent Job
の+
リンクを押下し、Azure CLI
を追加します。
Azure Subscription
はご自身の任意のサブスクリプションを、
Script Location
はとりあえずInline script
を使用します。
Inner Script
は以下の通り。
az storage blob upload-batch --account-name {StorageAccount名} --account-key $(storageKey) -d $web -s ./ClientSideBlazorSample/dist/ az storage blob update --account-name {StorageAccount名} --account-key $(storageKey) -c $web -n _framework/wasm/mono.wasm --content-type application/wasm
$(storageKey)
はAzure Key Vaultで設定したシークレットを指しています。
Working Directory
は$(Build.BuildId)
を指定します。
以上で設定は完了です。Save
ボタンを押下し設定を終了します。
動作させてみる
指定したRepositoryにコミットするか、Build Pipelineを手動で開始させます。
手動開始は設定したBuild PipelineのRun pipeline
ボタンで開始できます。
ビルドとデプロイが正常に終わると、こんな感じになります。
無事動きました。
これでmasterへコミットするとCI/CDが走り、自動デプロイされるようになりました。
おわり
いまいち分らない点がありますが、ちょっと試すくらいなら画面をポチポチするだけで簡単にできちゃいますね...。
--account-name
もAzure Key VaultのキーとかAzure DevOpsのVariablesに乗せた方がいい気がする...Azure Storage静的サイトへのファイルのコピーはAzure CLIじゃないとできないっぽいので、そこが面倒ですね。