Azure DevOps Organizationsを作成

Azureポータルから「Azure DevOps Organizations」リソースを選択

新規のOrganizationsを作成

プロジェクトを作成

※今回はシンプルなNuxtのSPAをリポジトリにPushしました

コンテナーレジストリ(ACR)を作成

作成されたら管理者ユーザーを有効化しておきます。

DevOpsでコンテナをACRにPushするパイプラインを作成

Azure Repos Gitを選択

Dockerビルド＋ACRへのPushのテンプレートを選択し、対象のサブスクリプションを指定

先程作成したACRを選択

ベースのYamlファイルを生成してくれるのでNuxtアプリケーションのビルドコマンドを追記してSave and Run

# Docker
# Build and push an image to Azure Container Registry
# https://docs.microsoft.com/azure/devops/pipelines/languages/docker
trigger:
  - master

resources:
  - repo: self

variables:
  # Container registry service connection established during pipeline creation
  dockerRegistryServiceConnection: "8abda5f8-xxxx-xxxx-xxxx-a6d3b853a87c"
  imageRepository: "demo"
  containerRegistry: "dvosdemo.azurecr.io"
  dockerfilePath: "$(Build.SourcesDirectory)/Dockerfile"
  tag: "latest"
  # Agent VM image name
  vmImageName: "ubuntu-latest"

pool:
  vmImage: $(vmImageName)

steps:
  - script: npm install --save nuxt
    displayName: "npm install"

  - script: npm run generate
    displayName: "npm generate"

  - task: Docker@2
    displayName: Build and push an image to container registry
    inputs:
      command: buildAndPush
      repository: $(imageRepository)
      dockerfile: $(dockerfilePath)
      containerRegistry: $(dockerRegistryServiceConnection)
      tags: |
        $(tag)

実行が成功するとACRにPushされたコンテナを確認できる

サービスコネクションとは

dockerRegistryServiceConnectionはサービスコネクションと呼ばれるAzureリソースの認証情報を含んだ接続情報で、別のパイプラインから使用する等汎用的に利用できます。
今回の場合、対象のサブスクリプション指定した段階で作成されています。
コネクションの管理はDevOpsプロジェクトのService connectionsから確認できます。

サービスコネクションのについてもう少し深堀すると、実態はサービスプリンシパルです。
今回のケースだと対象のACRのIAMに共同作成者として作成されたサービスプリンシパルが追加されています。
したがってサービスコネクションの作成には、対象テナントのAzureADで「アプリケーションを作成できる権限」とAzureサブスクリプション側では「ユーザーアクセス管理者」（サービスプリンシパルにロールを割り当てるための権限）を持っているアカウントで実施する必要があることに注意です。
サブスクリプションやリソースの接続時にエラーになった場合はこの辺りを確認してみてください。

Azure Hosted Runnerを使う際の注意点

パイプライン実行時に以下のようなエラーに遭遇

No hosted parallelism has been purchased or granted. To request a free parallelism grant, please fill out the following form https://aka.ms/azpipelines-parallelism-request
原因：https://docs.microsoft.com/ja-jp/azure/devops/release-notes/2021/sprint-184-update
解決方法：
https://qiita.com/Hachiyou-Renge/items/2083f2ce9e8b38558805

WebApp for Containerの作成

続いてデプロイ先のWebAppを作成します。

基本設定

Linuxコンテナーを選択します
後々デプロイメントスロットを使いたいので P1v2を指定

Docker

事前に準備したACRのイメージを選択します

※ACRで管理者ユーザーを有効化していないとエラーになるので注意

動作確認

作成されたWebAppにアクセスし、アプリケーションが動作していればOK

デプロイ用のReleaseを作成

DevOpsのプロジェクトに戻り、PipelinesのReleasesを選択⇒New pipeline

Artifacts

ArtifactのSouce typeはBuildを選択し、最新のPipeline完了後に起動するように設定します

トリガーを有効化

Stage

Agent Job：Stageが実行される環境の設定
この環境に対してTaskを追加していく

Azure App Service deploy

Azure App Service manage：WebAppの再起動
上記deployの実行のみでは明示的なイメージの再起動とプルは行いません
そのため、無理やりですがTaskとして再起動を実施しています。
※アプリケーションの瞬断が発生するので気になる方は一度デプロイスロットにデプロイ⇒スロットを再起動⇒スワップで回避できます（別記事で紹介）

動作確認

アプリケーションを修正してコミットするとPipeline⇒Releasesの順で実行され、WebAppが更新されれば完成です！

Pipelineのログ

Releases 各TaskのログはLogsから確認可能

WebAppも無事更新されました！

以上