どうもこんにちは四日市事業所の河口です。今回はAzure DevOpsを使用して、DockerイメージをACR経由でAzure Web Appsへ自動デプロイする方法をまとめます。Azureモリモリです!
1. Web Appsを立てる
Azureでデプロイ先のWeb Appsを立てておきます。注意点としては公開をDockerコンテナーにします。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-001.png)
2. ACR(Azure Container Registry)を作成
Dockerイメージを格納するためにACRを作成します。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-002-1024x468.png)
3. Azure DevOpsでビルドパイプラインを構築
DevOpsの画面を開きます。
https://azure.microsoft.com/ja-jp/services/devops/
BuildsからNew pipelineを作成します。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-003-2-1024x370.png)
リポジトリの接続先を選択します。今回はAzure Repos Gitを選択します。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-004.png)
リポジトリを選択します。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-005.png)
ビルドパイプラインの初期設定を選びます。show moreを押すと少し下のほうがDockerがありますので、Dockerを選択します。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-006.png)
設定はそのままでValidate and configureを押します
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-007.png)
これでBuildパイプラインのazure-pipelines.ymlが自動生成されます。ここからACRにdockerイメージがアップロードされるように変更していきます。とりあえず右上にあるSave and Run で保存します。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-008.png)
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-009.png)
PipelineのLibraryでACRへ接続するための環境変数を設定します。新規にVariable groupを作成します。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-010-1024x476.png)
各項目を設定します。
Variable group nameはビルドパイプラインから指定することになるのでわかりやすい名前にします。
VariablesにAddでACRの接続情報を追加していきます。ACRの接続情報はACRのアクセスキーに記載されています。必要なのは以下の3つです。
- ログインサーバー
- ユーザー名
- パスワード
入力が終わったら保存します。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-011-1024x662.png)
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-012-1024x354.png)
ビルドパイプラインを編集します。Editから編集できます。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-013-1024x345.png)
以下のように書き換えて保存します。
内容としてはvariablesで変数の宣言とLibraryから値を引っ張り代入しています。また、scriptでdockerビルドとACRへイメージをpushしています。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-014-1024x431.png)
# Docker
# Build a Docker image
# https://docs.microsoft.com/azure/devops/pipelines/languages/docker
trigger:
- master
resources:
- repo: self
variables:
- group: ACR_Valiables
- name: imageName
value: myimage:$(Build.buildId)
- name: acrId
value: $(ACR_USERNAME)
- name: acrPassword
value: $(ACR_PASSWORD)
- name: acrServer
value: $(ACR_SERVER)
steps:
- script: |
docker build -t $(acrServer)/$(imageName) .
docker login -u $(acrId) -p $(acrPassword) $(acrUrl)
docker push $(acrServer)/$(imageName)
displayName: Build Docker image
saveするとビルドが走りますので正常に完了することを確認しましょう。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-015-1024x460.png)
ACRのほうにもDockerイメージがあがっているはずです。 これでビルドパイプラインの作成が完了です!
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-016-1024x581.png)
4. Azure DevOpsでリリースパイプラインの構築
ReleasesからNew pipelineを作成します。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-017-1024x396.png)
Azure App Service deploymentをApplyします。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-018.png)
Stage 1の1 job、1 taskと表示されているところを選択します。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-019.png)
各項目を入力します。完了したら保存しOKを押します。
- Azure subscription : Web Appsを作成してあるサブスクリプションを選択し、認証
- App type : Web App for Containers (Linux)
- App service name : 作成したWeb Apps を選択
- Registry or Namespace : ACRのサーバーを入力する。今回はVariablesで管理
- Repository: Dockerのイメージ名を入力
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-020-1024x496.png)
リリースパイプラインのVariablesの設定をします。Libraryの時と同様にACRのログインサーバーを追加します。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-021-1024x241.png)
Add an artifact からArtifactsの設定をします。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-022.png)
ビルドパイプラインから最新のものをソースとして設定します。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-023.png)
トリガーを設定します。Artifactsの雷マークを選択します。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-024.png)
上側のトグルボタンをEnabledにすることでビルドパイプラインが正常に完了したことをトリガーにリリースパイプラインが動くようになります。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-025-1.png)
Web Appsのコンテナー設定をAzure コンテナーレジストリに変更しておきます。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-026-1024x555.png)
最後に確認してみましょう。ビルドパイプラインのQueueからビルドパイプラインを動かすかリポジトリのmasterにpushすることで自動でデプロイされるはずです。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-027-1024x394.png)
今回は適当にcreate-nuxt-appで作成したものをデプロイしてみました。
![](https://prtechblogfd-crhzb5g6hkhqafdm.z01.azurefd.net/drupalimages/beforemigration/2019-10-21-cicd-of-webapps-with-azure-devops-028-1024x522.png)
これでAzure Web Appsに継続的に自動デプロイできるようになりました。ありがとうございます。