演習 - パイプラインを作成する - Training

20 分

この時点で、Mara は、Space Game Web サイトのビルド構成を既に定義しています。次はあなたの番です。これからパイプラインを作成し、最初のビルド成果物を生成します。

ご存じのとおり、Mara は YAML ファイルを使用してビルドを定義しました。パイプラインを作成すると、プロセスによって YAML ファイルが求められます。プロジェクトにはまだこのファイルがありません。

プロジェクトの最初の YAML ファイルを指定しない場合は、Azure Pipelines でアプリの種類に基づいて作成できます。ここでは、ASP.NET Core アプリをビルドしますが、Azure Pipelines には、Java、Go などの他の種類のプロジェクト用のスタートビルド構成もあります。

パイプラインを作成する

Azure DevOps で、プロジェクトにアクセスします。
プロジェクトページまたは左側のウィンドウから、[パイプライン] を選択します。
[パイプラインの作成] (または、これがプロジェクトの最初のパイプラインでない場合は [新しいパイプライン]) を選びます。
[Connect] タブで [GitHub] を選択します。

確認を求められたら GitHub の資格情報を入力します。
[Select] タブで、mslearn-tailspin-space game-web リポジトリを選択します。
Azure Pipelines アプリをインストールするために、GitHub にリダイレクトされる場合があります。その場合は、一番下までスクロールして、[Approve & Install] (承認してインストール) を選びます。
[Configure] タブで、[ASP.NET Core] を選択します。

Note

このオプションが表示されない場合は、[Show more] を選択します。 [ASP.NET Core (.NET Framework)] は選択しないでください。
[Review] タブで、最初のビルド構成に注目してください。

これは、アプリの種類、ASP.NET Core に基づいて Azure DevOps が提供する、非常に基本的な構成です。既定の構成では、Microsoft ホステッドエージェントを使用します。

テキスト vmImage: ubuntu-latest を name: Default (または、Codespaces リポジトリシークレットの設定時に異なるプールを指定した場合は、そのエージェントプールの名前) に置き換えます。
[Review] タブで、[Save and run] を選択します。 GitHub に変更内容をコミットしてパイプラインを開始するには、[メインブランチに直接コミットする] を選択し、もう一度 [保存および実行] を選択します。 This pipeline needs permission to access a resource before this run can continue のようなメッセージでアクセス許可を付与するように求められたら、[表示] を選択し、プロンプトに従ってアクセスを許可します。

パイプラインの実行を監視する

[Jobs] で、[Jobs] を選択します。次に、ステップごとにビルドプロセスをトレースします。ビルド完了時にジョブの出力をテキストファイルとして表示するには、[生のログを表示] を選択します。

パイプラインがすぐに起動しない場合は、Codespaces がまだ実行中であることを確認してください。 Codespaces は 30 分後にシャットダウンされるため、再起動が必要になる場合があります。

しばらくしてもパイプラインの状態が [キューに登録済み] のままで、[実行中] に移行しない場合は、並列ジョブを確認し、無料付与を要求します。並列ジョブにアクセスできない場合は、Codespaces を使ってモジュールをやり直すことができます。

ここで、ビルド定義によって作成されたステップが表示されます。 VM を準備し、GitHub から最新のソースコードをフェッチしてから、アプリをビルドします。

Screenshot of Azure Pipelines showing output from the initial build configuration.

この構成は、ビルドタスクを追加するための場所があるため、優れた開始点です。ただし、JavaScript および CSS ファイルを縮小するなど、Tailspin チームのニーズに合わせて更新する必要があります。

ヒント

メールを確認します。実行の結果が含まれているビルド通知を既に受信している可能性があります。これらの通知を使用すると、ビルドが完了したときや、各ビルドが成功したか失敗したかを、チームのメンバーに知らせることができます。

ビルドタスクを追加する

作業用のビルドプロセスが完成したので、ビルドタスクの追加を始めることができます。

main ブランチから作業していることに注意してください。作業内容を保持するために、次に build-pipeline という名前のブランチを作成します。このブランチを使用すると、チームの他のメンバーに影響を与えずに、実験を行い、ビルドを完全に機能させることができます。

Azure Pipelines から直接、azure-pipelines.yml にビルドタスクを追加できます。変更は、Azure Pipelines によってブランチに直接コミットされます。ここでは、azure-pipelines.yml をローカルに変更し、変更内容を GitHub にプッシュ (アップロード) します。このようにすることで、Git のスキルを実践できます。変更をプッシュするときに、パイプラインによってアプリが自動的にビルドされることを監視します。

実際には、ビルドタスクを 1 つずつ追加し、変更をプッシュして、ビルドの実行を監視することができます。ここでは、以前に特定したすべてのビルドタスクを一度に追加します。

Note

今からいくつかの Git コマンドを実行します。 Git を初めて使用する場合でも心配しないでください。何をすべきかをこれから説明します。また、今後のモジュールでも Git の詳細について説明します。

Visual Studio Code で、統合ターミナルに移動します。リポジトリ内の main ブランチに移動し、手順を実行します。
GitHub から最新の変更を取得し、main ブランチを更新するには、次の git pull コマンドを実行します。
```
git pull origin main
```
出力から、Git によって azure-pipelines.yml という名前のファイルがフェッチされるのがわかります。これは、Azure Pipelines で作成されたスタートパイプライン構成です。パイプラインを設定すると、Azure Pipelines でこのファイルが GitHub リポジトリに追加されます。
build-pipeline という名前のブランチを作成するには、次の git checkout コマンドを実行します。
```
git checkout -B build-pipeline
```
Visual Studio Code で、azure-pipelines.yml を次のように変更します。
```
trigger:
- '*'

pool:
  name: 'Default' # Replace Default with the name of your agent pool if you used a different pool

variables:
  buildConfiguration: 'Release'

steps:
- task: UseDotNet@2
  displayName: 'Use .NET SDK 6.x'
  inputs:
    packageType: sdk
    version: '6.x'

- task: Npm@1
  displayName: 'Run npm install'
  inputs:
    verbose: false

- script: './node_modules/.bin/node-sass Tailspin.SpaceGame.Web/wwwroot --output Tailspin.SpaceGame.Web/wwwroot'
  displayName: 'Compile Sass assets'

- task: gulp@1
  displayName: 'Run gulp tasks'

- script: 'echo "$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)" > buildinfo.txt'
  displayName: 'Write build info'
  workingDirectory: Tailspin.SpaceGame.Web/wwwroot

- task: DotNetCoreCLI@2
  displayName: 'Restore project dependencies'
  inputs:
    command: 'restore'
    projects: '**/*.csproj'

- task: DotNetCoreCLI@2
  displayName: 'Build the project - Release'
  inputs:
    command: 'build'
    arguments: '--no-restore --configuration Release'
    projects: '**/*.csproj'
```
```
trigger:
- '*'

pool:
  vmImage: ubuntu-latest

variables:
  buildConfiguration: 'Release'

steps:
- task: UseDotNet@2
  displayName: 'Use .NET SDK 6.x'
  inputs:
    packageType: sdk
    version: '6.x'

- task: Npm@1
  displayName: 'Run npm install'
  inputs:
    verbose: false

- script: './node_modules/.bin/node-sass Tailspin.SpaceGame.Web/wwwroot --output Tailspin.SpaceGame.Web/wwwroot'
  displayName: 'Compile Sass assets'

- task: gulp@1
  displayName: 'Run gulp tasks'

- script: 'echo "$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)" > buildinfo.txt'
  displayName: 'Write build info'
  workingDirectory: Tailspin.SpaceGame.Web/wwwroot

- task: DotNetCoreCLI@2
  displayName: 'Restore project dependencies'
  inputs:
    command: 'restore'
    projects: '**/*.csproj'

- task: DotNetCoreCLI@2
  displayName: 'Build the project - Release'
  inputs:
    command: 'build'
    arguments: '--no-restore --configuration Release'
    projects: '**/*.csproj'
```
steps セクションの下には、前に特定した各スクリプトコマンドにマップされるビルドタスクが表示されています。

Azure Pipelines には、多くの一般的なビルドアクティビティにマップされる組み込みのビルドタスクが用意されています。たとえば、DotNetCoreCLI@2 タスクは dotnet コマンドラインユーティリティにマップされます。このパイプラインでは DotNetCoreCLI@2 が 2 回使用されます。1 回はプロジェクトの依存関係を復元またはインストールするため、もう 1 回はプロジェクトをビルドするためです。

すべてのビルドアクティビティが組み込みタスクにマップされるわけではないことに注意してください。たとえば、node-Sass ユーティリティを実行したり、ビルド情報をテキストファイルに書き込んだりする組み込みタスクはありません。一般的なシステムコマンドを実行するには、CmdLine@2 または script タスクを使用します。このパイプラインでは script タスクを使用します。これが CmdLine@2 の一般的なショートカットだからです。

ビルドに関する情報をファイルに書き込むビルドステップでは、次の要素に注意してください。
- $(Build.DefinitionName)
- $(Build.BuildId)
- $(Build.BuildNumber)
これらの要素は、パイプラインで使用するためにシステムによって提供される組み込み変数です。
- $(Build.DefinitionName) は、ビルドパイプラインの名前です。たとえば、"Space Game-Web-CI" です。
- $(Build.BuildId) は、完了したビルドの数値識別子です (115 など)。
- $(Build.BuildNumber) は、完了したビルドの名前です。形式は構成できますが、既定では、ビルド番号には現在の日付とそれに続くその日のビルド番号が含まれます。ビルド番号の例は "20190329.1" です。
独自の変数を定義することもできます。これは、この後すぐに実行します。

また、最初のビルドステップである UseDotNet@2 タスクにもお気付きかもしれません。 Mara は、自分のビルドスクリプトでは必要なビルドツールがインストールされなかったことを思い出しました。ビルドエージェントにはいくつかの .NET SDK バージョンが付属していますが、このタスクにより、パイプライン作成者がビルドエージェントで使う必要があるバージョンを簡単に指定できます。
統合ターミナルから、azure-pipelines.yml をインデックスに追加し、変更をコミットして、GitHub に変更をプッシュするには、次の Git コマンドを実行します。これらの手順は、前に実行した手順と似ています。

ヒント

これらの Git コマンドを実行する前に、必ず azure-pipelines.yml を保存してください。
```
git add azure-pipelines.yml
git commit -m "Add build tasks"
git push origin build-pipeline
```
今回は、main ブランチではなく build-pipeline ブランチを GitHub にプッシュします。

ブランチを GitHub にプッシュすると、Azure Pipelines でビルドプロセスがトリガーされます。
Azure Pipelines でビルドに移動します。これを行うには、ページの横にある [パイプライン] を選択してから、パイプラインを選択します。コミットメッセージと、ビルドが build-pipeline ブランチからのコードを使用して実行されていることがわかります。

ヒント

すぐにビルドが表示されない場合は、少し待つか、ページを更新してください。
ビルドを選択し、[ジョブ] を選択して、実行されているビルドタスクをトレースします。

たとえば、JavaScript と CSS アセットを縮小する gulp タスクを実行する gulp@1 タスクを実行するとどうなるかを次に示します。

いずれかのステップが失敗すると、出力にエラーが表示されるため、エラーを診断して修正することができます。

これまでは、より最小限のビルド構成を実行しました。今回は、ビルドが完了すると、アプリのビルドに必要なタスクの完全なセットが表示されます。
ビルドが完了したら、いずれかのステップを選択して、ビルドの全体的な進行状況を確認します。そこから、ビルドログ、または GitHub にある関連する変更に移動できます。

続行

演習 - パイプラインを作成する

パイプラインを作成する

パイプラインの実行を監視する

ビルド タスクを追加する

フィードバック

ビルドタスクを追加する