ゼロからはじめるAzure(27) 「Azure DevOps」でチーム開発を行おう(3)Azure Reposを使ったソースコードの管理

はじめに

今回は、Azureが提供するチーム開発のためのサービス群であるAzure DevOpsの中から、ソースコードリポジトリのサービスであるAzure Reposを紹介します。

Azure Reposとは

Azure Reposは、ソースコード管理システムとしてデファクトスタンダードとなっているGitのリモートリポジトリをクラウド上にホスティングしたサービスです。

Gitとは

まずはGitについて簡単に紹介します。 Gitは分散型のソースコード管理システムです。分散型のソースコード管理システムは、サーバー上などに存在し、利用者全員が参照できるリモートリポジトリと、リモートリポジトリを利用者のローカルマシン上に複製したローカルリポジトリで構成されています。開発者はローカルリポジトリを自身のPC上に作成して開発作業を進め、その更新内容をローカルリポジトリに記録していきます。ローカルリポジトリはPC上にあるため、リモートリポジトリと常に接続している必要が無く、オフラインでも作業を進めることが可能です。任意のタイミングでローカルリポジトリに記録した更新内容をリモートリポジトリへ反映することで、他の開発者に自身の更新内容を共有できるようになります。このようにリモートとローカルの２つのリポジトリが存在することで、Gitでは柔軟なコードの変更が可能でありながらも、全体として整合の取れたソースコードの管理を実現することができているのです。

Azure Reposとは

Azure Reposとは、このGitのリモートリポジトリとしての機能を提供するサービスです。Gitを使ったソースコード管理では、リモートリポジトリは開発者全員が参照できるところに存在していなければいけません。そのため必然的にリモートリポジトリは任意のサーバー上へ配置することとなります。自前でサーバーを構築してGitのリモートリポジトリを配置することも可能ですが、構築や運用保守の面でコストがかかりすぎてしまう恐れがあります。そのため、リモートリポジトリをホスティングしたクラウドサービスの利用が大変人気となっています。最も有名なものとしてGitHubがあり、他にもGitLabやBitbucketなども有名です。Azure Reposも、これらと同じリモートリポジトリのホスティングサービスのひとつです。

Azure Reposの特徴としては主に以下に挙げるものがあります。

・プライベートリポジトリ（閲覧・編集できる人を制限できるリポジトリ）を無制限で作成できる

Azure Reposでは、誰でもリポジトリを参照することができるパブリックリポジトリと、参照できる範囲を制限できるプライベートリポジトリの2種類のリポジトリを作成することができます。他のサービスではプライベートリポジトリの作成数に制限があるものもありますが、Azure Reposでは無制限で作成できます。

・プルリクエストやリポジトリのフォークなど、他のリポジトリホスティングサービスと同等の機能の提供

コードの品質を保つために、コードレビューを行う際にプルリクエストの機能を使用すると非常に便利です。プルリクエストはブランチのマージ時に他の開発者によるコードレビューを行い、レビューが承認されることでマージが行えるようする機能・ルールです。プルリクエストはGitの機能ではなく、はじめはGitHubによって提供された機能ですが、Azure Reposでもサポートしています。他にもリポジトリの複製をするフォークであったりブラウザ上から直接リモートブランチのコードを編集できる機能など、他のサービスが提供している機能の多くをサポートしているため、他のサービスを使用したことがあればスムーズにAzure Reposも使用することができるかと思います。

・他のAzure DevOpsサービスとの親和性の高さ

Azure Reposの最大の特徴はAzure DevOpsのサービスラインナップの一つである点であり、他のAzure DevOpsのサービスとの連携をシームレスに行うことができるようになっています。Azure Boardsで作成したタスクに関連するブランチを作成したり、Azure ReposへのコミットをトリガーにしてAzure Pipelinesでソースコードのビルドとデプロイを行ったりといった連携が非常に簡単にできるようになっています。またAzure DevOpsとしてWeb画面が集約されているところも使いやすい点となっています。

Azure Reposを使ったコード管理の実践

ここからは実際にAzure Reposを使った基本的な操作方法について説明していきます。

DevOpsプロジェクトの新規作成

今回も前回同様、Azure DevOpsのプロジェクトを新規作成してAzure Reposに触れてみたいと思います。 Azureポータルにログインし、左側のメニューから「すべてのサービス」を選択して検索ボックスに「devops」と入力します。表示されている「DevOps Projects」を選択します。

DevOps Projectsを選択する

Azure DevOpsのプロジェクト一覧の画面に遷移したら、「追加」を選択します。

プロジェクトの新規作成を行う

プロジェクトの新規作成ではまずプロジェクトテンプレートの選択画面が表示されます。ここから使用するアプリケーションの種類を選択します。今回は「.NET」を選択して画面下部の「Next」を選択します。

新しいプロジェクトのアプリケーションの種類を選択する

次にアプリケーションのフレームワークを選択します。ここでは「ASP.NET Core」を選択して「Next」を選択します。

アプリケーションのフレームワークを選択する

次はアプリケーションをデプロイするサービスの選択です。「Windows Web App」を選択して「Next」を選択します。

アプリケーションをデプロイするサービスを選択する

最後の画面でプロジェクトの詳細情報を入力していきます。「Project name」と「Web app name」には任意の名称を入力します。「Azure DevOps Organization」には既に作成済みのOrganizationが表示されているかと思いますので、それを選択します。「Location」は「Japan East」を選択します。ここまで入力したら、次に「Location」の右下にある「Additional settings」を選択します。

プロジェクトの詳細情報の入力

「Additional settings」のウィンドウが表示されたら、DevOpsプロジェクトとアプリケーションのデプロイ先となるApp Serviceに関する内容を入力していきます。「DevOps project」のセクションの「Create new Azure DevOps organization」は新しいDevOps organizationを作成するかどうかの選択肢です。今回は既存のorganizationを使用するので「No」を選択した状態にします。「Web App on Windows」のセクションの「Resource group」には任意のリソースグループ名を入力します。「Pricing tier」ではApp Serviceの稼働するマシンのサイズを選択することができます。今回はサンプルアプリケーションのため、無料の「F1 Free」を選択します。「Application Insights Location」ではApp Serviceから出力されるログを収集するサービスであるApplication Insightsの配置場所を選択します。今回は「Japan East」を選択します。最後に「Additional settings」ウィンドウ下部の「OK」を選択します。

Additional settingsの入力

プロジェクトの詳細情報の入力画面に戻ってきたら、画面下部の「Done」を選択してプロジェクトの作成を開始します。しばらく待つと「デプロイが完了しました」という画面が表示されるので、その中の「リソースに移動」を選択するか、冒頭で説明したように左側メニューの「すべてのサービス」から「DevOps Projects」に移動して作成したプロジェクトを選択します。

プロジェクトの作成完了画面からプロジェクトに遷移する

ここまででDevOpsプロジェクトの作成が完了しました。次からいよいよAzure Reposに触れていきます。

Azure Reposのメニュー

DevOpsプロジェクトの画面のヘッダー部分にある「Repositories」あるいは画面下部の「Repository」ブロック内の「Code」を選択するとAzure DevOpsの専用のダッシュボード上でAzure Reposのリポジトリが表示されます。

リポジトリへの移動方法

画面の左側のメニュー部分を確認してみると、「Repos」の中の「Files」が選択された状態になっているかと思います。これが、Azure Reposの初期表示画面になります。

Azure Reposの画面

各メニューを選択した場合に表示される画面の内容は以下の通りになります。

・Files

このリポジトリにコミットされている全てのファイルを確認できる画面です。他にもファイルのアップロードやダウンロード、編集なども行うことができます。

・Commits

このリポジトリに対して行われた全てのコミット履歴が表示される画面です。

・Pushes

ローカルリポジトリでの更新内容をリモートリポジトリへ反映するプッシュの履歴を確認することができる画面です。

・Branches

このリポジトリに現在存在しているブランチの一覧を確認することができる画面です。

・Tags

特定のコミットに対して付与することのできるタグの一覧を確認することができる画面です。

・Pull requests

プルリクエストの作成や確認を行う画面です。

「Pull requests」以外のメニュー名は、Gitの用語に準ずるものとなっているので、Gitの使用経験があればすぐに理解できるメニュー構成となっています。

リポジトリをローカルマシンにクローンする

次に、リモートリポジトリをローカルマシン上にコピーしてローカルリポジトリを作成する「クローン」を行ってみます。 Azure ReposのFilesメニューを選択した状態で、画面右上の「Clone」を選択します。クローンの方法には大きく２種類あり、コマンドラインからGitコマンドを使用してクローンする方法と、IDE（統合開発環境）上でクローンする方法です。コマンドラインの場合は、さらにHTTPSとSSHの２種類からクローンの方法を選ぶことができます。IDEの場合は、以下の図のようにプルダウンから自身が使用しているIDEを選択することでIDEが表示されてクローンを行えるようになります。

リポジトリのクローン

ここでは例として、IDEとして「Visual Studio」を選択してリポジトリをクローンしてみます。プルダウンから「Visual Studio」を選択すると、以下の図のようなポップアップがブラウザに表示されます。このポップアップ内の「Microsoft Visual...を開く」を選択すると、Visual Studioが起動します。

IDE表示確認のポップアップ

Visual Studioの起動後しばらくすると、「アカウントにサインイン」というポップアップが表示されるので、表示されている内容に従ってAzureにログインする際のアカウント情報を入力していきます。

「アカウントにサインイン」ポップアップ

認証に成功すると、続いて「Azure DevOps」のポップアップが表示されます。ここには、クローンする元となるAzure Reposのリポジトリ名やURLと、クローン先となるローカルマシンの保存先のパスが表示されています。「ローカルパス」を任意のフォルダに変更して、「複製」を選択するとリポジトリのクローンが開始します。なお、この際に再度「アカウントにサインイン」のポップアップが表示されることがありますので、その場合はもう一度アカウント情報を入力するようにして下さい。

クローンの確認ポップアップ

クローンが完了すると、ソリューションエクスプローラーにAzure Reposの「Files」メニューに表示されているものと同じファイルが表示されるようになります。また紫色のフッター部分の右側には、接続しているリポジトリの名前と現在のローカルリポジトリのブランチ名が表示されています。

クローン後のソリューションエクスプローラー

リポジトリのクローンができたので、次はローカルで更新した内容をリモートリポジトリに反映し、プルリクエストを作成してマージする流れまで行います。

ブランチの作成、コードのコミットとプッシュ

ブランチの作成はリモート、ローカルのどちらのリポジトリからでも行うことができます。今回はローカルリポジトリでブランチを作成して、その内容をリモートリポジトリに反映していきます。

Visual Studioの紫色のフッター部分に表示されている「master」をクリックし、「新しいブランチ」を選択します。

新しいブランチの作成

選択するとチームエクスプローラーが表示され、新しいブランチの名前を入力するよう求められます。ここでは「change_greet」という名前を入力して、「ブランチの作成」を選択します。この時、「ブランチのチェックアウト」にチェックを入れた状態にします。チェックが入っている場合は、ブランチの作成と同時にブランチの切り替えが行われ、masterブランチからchange_greetブランチに切り替え（チェックアウト）がされます。

ブランチ名を入力して作成

ブランチの作成が完了すると、フッター部分のブランチ名の表示が「master」から「change_greet」に切り替わっていることが分かります。

ブランチの新規作成、チェックアウト後の状態

これでブランチの作成と切り替えは完了しました。続いてコードを編集してその内容をローカルリポジトリへコミット、リモートリポジトリへ反映（プッシュ）を行います。ソリューションエクスプローラーに戻り、「Application/aspnet-core-dotnet-core/Pages」とフォルダを展開して「Index.cshtml」ファイルを表示します。この際フォルダが展開できない場合は、ソリューションエクスプローラー上部に表示されている「上のソリューションおよびフォルダーをクリックして、ソリューションの一覧を表示します。」というメッセージをクリックしてください。18行目のdivタグに囲まれた「Success!」というテキストを、「Hello, Azure Repos！」に書き換えてファイルを保存します。ファイル保存後、Index.cshtmlのエディター上で右クリックをして「ソース管理　→　コミット」を選択します。

Index.cshtmlの編集

コミットを選択するとチームエクスプローラーが表示され、「変更」という表示名となっています。この「変更」画面でファイルのコミットやリモートリポジトリへのプッシュを行うことができます。下の図では、先程編集した「Index.cshtml」以外にも変更となっているファイルがあります。これらはVisual Studioでソリューションを開いた際に自動生成されたもので、今回はコミットの対象外とします。チームエクスプローラー上の「Index.cshtml」を右クリックし、「ステージ」を選択します。ステージとは、変更のあったファイルの中からコミット対象となるファイルのみをグルーピングする一時的な領域のことです。

コミット対象のファイルをステージへ移動

「Index.cshtml」のみが「ステージング済みの変更」の中に含まれている状態となったら、コミットメッセージを入力していきます。薄黄色のテキストエリア内に今回のコミットでの変更内容を分かりやすく記入します。下の図の例では「トップ画面のメッセージを変更」と記入しています。

コミットメッセージの入力

コミットメッセージを入力すると、すぐ下のボタンが活性化されます。ボタン右側の下矢印マークを選択して、プルダウンの中から「ステージング済みをコミットしてプッシュ」を選択します。これによりステージに移動した「Index.cshtml」のみがローカルリポジトリにコミットされ、さらにリモートリポジトリにプッシュされました。ブラウザに戻ってAzure Reposの「Branches」メニューを表示します。先程Visual Studioで作成した「change_greet」というブランチが、リモートリポジトリにも反映されています。

新しいブランチの表示

同様に、「Commits」メニューを表示し、左上のブランチを「change_greet」に変更すると、先程Visual Studioでコミットした内容が反映されていることが分かります。

コミット履歴の表示

最後に、プルリクエストの作成を行ってみます。

プルリクエストを作成する

先程プッシュした「change_greet」ブランチの内容を「master」ブランチにマージするためのプルリクエストを作成します。 Azure Reposの「Pull requests」メニューを表示し、画面右上あるいは画面中央に表示されている「New pull request」を選択します。

プルリクエストの新規作成

プルリクエストの作成画面に遷移したら、内容を入力していきます。最上部の項目ではマージ元のブランチとマージ先のブランチを選択します。左側に表示されているブランチがマージ元となり、右側がマージ先です。「Title」、「Description」にはこのプルリクエストのタイトルと詳細な変更内容を入力します。プルリクエストはコードレビューのツールのため、第三者に分かりやすいタイトルや説明を入力するようにしましょう。なお、「Description」はマークダウン記法を使用して内容を記入できるため、より可読性の高い説明を記入することもできます。「Reviewers」にはこのプルリクエストのコードレビューを行うメンバーを追加していきます。メンバーは何名でも追加することが可能です。「Work Items」にはAzure Boardsで作成したワークアイテムを追加することができます。プルリクエストにワークアイテムを紐付けることで、課題の進捗状況のトラッキングに役立てることができます。内容の入力が完了したら、「Create」を選択してプルリクエストを作成します。

新しいブランチの表示

プルリクエストの作成後、レビュアーはAzure Reposの「Pull requests」メニューから自身がレビュアーとして指名されているプルリクエストを選択してレビューを開始します。この画面では変更前後の差分表示などを利用してコードレビューを行います。気になる点がある場合などはコードの一行一行に対してコメントを入力することも可能です。

プルリクエストによるコードレビューの例

レビュアーからの指摘によってコードの修正が必要な場合は、同じブランチ（この例ではchage_greet）にてコードを修正してコミット、プッシュをすることでプルリクエストの画面も最新のコードに更新されていきます。このようにレビューと修正を繰り返し、レビュアーが納得する品質のコードになった時点で、レビュアーはプルリクエストの承認を行います。承認はプルリクエストの画面右上の「Approve」を選択することで行われます。なお承認するとそのレビュアーのアイコンに緑色のチェックマークが付きます。