クイック スタート - Azure Pipelines を使用して Node.js パッケージをビルドして発行する

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019 | TFS 2018

Azure DevOps パイプラインを使用して、JavaScript アプリのビルド、デプロイ、テストを行うことができます。

このクイックスタートでは、パイプラインを使用して、Node Package Manager (npm) で Node.js パッケージを作成し、パイプライン成果物を発行する方法について説明します。

前提条件

Azure DevOps には次の項目が必要です。

  • リポジトリを作成できる GitHub アカウント。 無料で作成できます
  • Azure DevOps 組織とプロジェクト。 無料で作成できます
  • Microsoft によってホストされるエージェントでパイプラインを実行する機能。 並列ジョブを購入するか、Free レベルを要求できます。

YAML は TFS 2018 では使用できません。

1 - サンプル コードをフォークする

GitHub で次のサンプル Express.js サーバー アプリをフォークします。

https://github.com/Azure-Samples/js-e2e-express-server

2 - パイプラインを作成する

  1. Azure Pipelines にサインインします。 ブラウザーが https://dev.azure.com/my-organization-name に移動し、Azure DevOps ダッシュボードが表示されます。

  2. プロジェクトに移動し、[パイプライン]>[新しいパイプラインの作成] の順に選択します。

  3. ソース コードの場所として [GitHub] を選択します。

  4. サインインするために GitHub にリダイレクトされた場合は、GitHub の資格情報を入力します。

  5. リポジトリの一覧が表示されたら、Node.js サンプル リポジトリを選択します。

  6. Azure Pipelines によって、リポジトリ内のコードが分析され、パイプラインの Node.js テンプレートが推奨されます。 そのテンプレートを選択します。

  7. Azure Pipelines によって、パイプラインの YAML ファイルが生成されます。 [保存および実行]>[メイン ブランチに直接コミット] の順に選択し、[保存および実行] をもう一度選択します。

  8. 新しい実行が開始されます。 実行が終了するまで待ちます。

終了したら、リポジトリで YAML ファイル (azure-pipelines.yml) が稼働し、カスタマイズできるようになります。

  1. パイプラインを作成し、YAML テンプレートを選びます。

  2. パイプラインの [エージェント プール][YAML ファイル パス] を設定します。

  3. パイプラインを保存し、ビルドをキューに登録します。 "ビルド #nnnnnnnn.n がキューに登録されました" というメッセージが表示されたら、番号リンクを選んで、パイプラインの動作を確認します。

3 - パッケージをビルドして成果物を発行する

  1. [編集] を選択して、azure-pipelines.yml ファイルを編集します。

  2. Node.js バージョン 16 LTS を使用するように Node.js ツール インストーラ タスク を更新します。

    trigger:
    - main
    
    pool:
      vmImage: 'ubuntu-latest'
    
    steps:
    - task: UseNode@1
      inputs:
        version: '16.x'
      displayName: 'Install Node.js'
    
    - script: |
        npm install
      displayName: 'npm install'
    
    - script: |
        npm run build
      displayName: 'npm build'
    
  3. npm パッケージ (package.json) をコピーするタスクと成果物を発行するタスクを新たに追加します。 ファイルのコピー タスク は、ソース ファイルのダウンロード元となるエージェントのローカル パスからファイルをコピーし、宛先に発行する前に成果物がコピーされるエージェントのローカル パスにファイルを保存します。 src および public フォルダーのみがコピーされます。 パイプライン成果物の発行タスクは、前のファイルのコピー タスクからファイルをダウンロードし、パイプライン ビルドで発行されるパイプライン成果物として使用できるようにします。

    - task: CopyFiles@2
      inputs:
        sourceFolder: '$(Build.SourcesDirectory)'
        contents: |
           src/*
           public/*
        targetFolder: '$(Build.ArtifactStagingDirectory)'
      displayName: 'Copy project files'
    
    - task: PublishPipelineArtifact@1
      inputs:
        artifactName: e2e-server
        targetPath: '$(Build.ArtifactStagingDirectory)'
        publishLocation: 'pipeline'
      displayName: 'Publish npm artifact'
    

4 - パイプラインを実行する

パイプラインを保存して実行します。 パイプラインを実行した後、ジョブが正常に実行されたこと、および発行した成果物が表示されることを確認します。

成果物を使用したパイプラインの正常な実行を示すスクリーンショット。

  1. GitHub で次のリポジトリをフォークします。

    https://github.com/Azure-Samples/js-e2e-express-server
    
  2. 独自のリポジトリにサンプル コードを格納したら、最初のパイプラインを作成し、[空のプロセス]テンプレートを選択します。

  3. パイプライン エディターの [タスク] タブで [プロセス] を選択し、プロパティを次のように変更します。

    • エージェント キュー:Hosted Ubuntu Latest
  4. 次のタスクを、指定された順にパイプラインに追加します。

    • npm

      • コマンド:install
    • npm

      • 表示名:npm test
      • コマンド:custom
      • コマンドと引数:test
    • テスト結果を発行する

      • プロパティのすべての既定値をそのままにしておきます。
    • ファイルのアーカイブ

      • アーカイブするルート フォルダーまたはファイル:$(System.DefaultWorkingDirectory)
      • アーカイブ パスの先頭にルート フォルダー名を追加する: オフ
    • ビルド成果物の公開

      • プロパティのすべての既定値をそのままにしておきます。
  5. パイプラインを保存し、ビルドをキューに配置して、動作を確認します。

次のステップ

おめでとうございます。このクイックスタートを正常に完了できました。