Azure DevOps のパイプラインで静的Webサイトを GitHub からデプロイ

Azure DevOps を使って、GitHub に置いてある静的なWebサイトをクラウドにデプロイしてみたので、そのやり方をメモしておきます。

やりたいこと : Webサイトにファイルをごそっとおきたい

長らく放置していた静的Webサイトの引越しをやるにあたって、ついでに自動デプロイの練習をすることにしました。

結果として、masterにpushすると、自動的にサイトに配置されるようになりました。

f:id:wayaguchi:20190528160503p:plain

初心者がやるタスクとしては最高にシンプルなやつだと思ったのですが、あまりに簡単すぎるのか、ちょうどいい記事が見当たらなくて、ちょっと調べながら進めることになりました。

Azure DevOps とは

Azure DevOps はSam Guckenheimer さんたちが作っているクラウドサービスで、もともとはVisual Studio Team Services とか Team Foundation Server とか言っていたものです。もともと DVDに入れてインストール型で売っていたアジャイル支援ツールを、クラウドに移行しました。プロダクトバックログ管理、デプロイパイプライン、アラート管理などが統合されています(バラバラでも使えますので今回はパイプラインだけ)。

azure.microsoft.com

ビルドを作る

今回やりたいのはGitHubからコピーするだけの作業ですが、それを行う「ビルド」を作ります。

[Pipelines]-[Builds] -> [+ New]-[New build pipeline]

f:id:wayaguchi:20190528142243p:plain

https://dev.azure.com/

更新元のファイルはGithub.comにあるのでGitHubを選択。

f:id:wayaguchi:20190528142416p:plain

プロジェクトにGithubを連携してあると、自分のリポジトリを検索できます。

f:id:wayaguchi:20190528142638p:plain
プロジェクトのGitHub連携は左下の project settings から GitHub Connections で [ + New Connection]でアカウントに紐づけて、連携対象のリポジトリを指定します。

f:id:wayaguchi:20190528143040p:plain

GitHubのリポジトリ直下に azure-pipelines.yml があると自動的に読み込むみたいです。

f:id:wayaguchi:20190528143422p:plain

設定ファイル azure-pipeline.yml の内容

今回の azure-pipeline.yml の内容はこれです。

masterブランチの更新をトリガーにして、WindowsのVM上で AzureFileCopyコマンドを実行し、SourcePath (規定値では作業ディレクトリ直下 = 対象リポジトリをクローンしたルートディレクトリ)　から、ディレクトリの内容をごっそり対象のBlobストレージにコピーします。

trigger:
- master

pool:
  vmImage: 'windows-2019'

steps:
- task: AzureFileCopy@3
  inputs:
    SourcePath: 
    azureSubscription: 'Free Trial (3372c....)'
    Destination: 'AzureBlob'
    storage: 'innov......'
    ContainerName: '$web'

Azure DevOps上で設定を変更すると、このファイルに保存され、Github リポジトリにPushされます。ここで master ブランチが更新されるため、すぐにこのビルドジョブがキックされて実行されます。

pool: vmImageは、Linuxや、低いバージョンのWindowsでは動かないようです。AzureFileCopyの制約かと思います。

The Microsoft-hosted agent pool provides 7 virtual machine images to choose from:

Visual Studio 2019 Preview on Windows Server 2019 (windows-2019)

Visual Studio 2017 on Windows Server 2016 (vs2017-win2016)

Visual Studio 2015 on Windows Server 2012R2 (vs2015-win2012r2)

Windows Server 1803 (win1803) - for running Windows containers

macOS X Mojave 10.14 (macOS-10.14)

macOS X High Sierra 10.13 (macOS-10.13)

Ubuntu 16.04 (ubuntu-16.04)

Microsoft-hosted agents for Azure Pipelines - Azure Pipelines | Microsoft Docs

task: AzureFileCopy が今回の処理のキモです。いつくかパラメータがあります。

azureSubscriptionと storage は、あらかじめ Azure上で作成したBlobストレージの情報を書き込みます。

sourceはちょっとハマったのですが、全部消すとビルドのローカルパスになると気づいて、消したらうまくいったのでそのままにしています。

ドキュメントによると $(Build.Repository.LocalPath)¥hogehoge とかやると Github 上のサブディレクトリが指定できそうです。

Source Required. The source of the files to copy. Pre-defined system variables such as $(Build.Repository.LocalPath) can be used. Names containing wildcards such as *.zip are not supported.

Azure File Copy task - Azure Pipelines | Microsoft Docs