JavaScript アプリのパイプライン

この記事では、Azure Pipelines と JavaScript アプリの連携方法について説明します。 Microsoft がホストするエージェントは、インフラストラクチャを設定しなくても、npm、Node.js、Yarn、Gulp などの一般的な JavaScript ビルド、テスト、およびデプロイツールをプレインストールします。セルフホステッドエージェントを構成することもできます。

JavaScript 用のパイプラインをすばやく作成するには、 JavaScript のクイックスタートを参照してください。

ノードツールインストーラー

プレインストールされていない Node.js と npm のバージョンをインストールする場合、またはセルフホステッドエージェントにツールをインストールするには、次のようにします。

npm の場合は、パイプラインで npm i -g npm@version-number コマンドを実行します。
Node.jsの場合は、[ use Node.js ecosystem v1 (UseNode@1) タスクをパイプラインに追加します。

YAML
クラシック

特定の Node.js バージョンをインストールするには、 azure-pipelines.yml ファイルに 次のコードを追加します。

- task: UseNode@1
  inputs:
    version: '16.x' # replace with the version you need

注意

このタスクでは、パイプラインが実行されるたびに、新しいマイナーバージョンへのアップデートに多くの時間がかかる可能性があります。 Microsoft でホストされるエージェントは定期的に更新されるため、プレインストールされていない特定の Node バージョンをインストールする場合にのみ、このタスクを使用します。 Microsoft がホストするエージェントにプレインストールされている Node.js と npm のバージョンについては、「ソフトウェア」を参照してください。

戦略で matrixするタスクを使用して、複数のバージョンの Node.jsでアプリをビルドしてテストできます。詳細については、「マルチジョブ構成」を参照してください。

pool:
  vmImage: 'ubuntu-latest'
strategy:
  matrix:
    node_16_x:
      node_version: 16.x
    node_13_x:
      node_version: 18.x

steps:
- task: UseNode@1
  inputs:
    version: $(node_version)

- script: npm install

依存関係ツールのインストール

プロジェクト package.json または package-lock.json ファイルに開発依存関係ツールがある場合は、npm を使用してツールと依存関係をインストールします。プロジェクトファイルは、ビルドエージェントに存在する他のバージョンとは無関係に、ツールの正確なバージョンを定義します。

これらのツールをビルドエージェントにインストールするには、パイプラインでスクリプト、 npm タスク、またはコマンドラインタスクを使用します。

スクリプトを使用するには:

- script: npm install --only=dev

npm タスクを使用するには:

- task: Npm@1
  inputs:
     command: 'install'

この方法でインストールするツールは、npm npx パッケージランナーを使用します。これにより、PATH 解決でツールが検出されます。次の例では、 mocha テストランナーを呼び出し、 npm install -gによってグローバルにインストールされたバージョンではなく、開発依存関係バージョンを使用します。

- script: npx mocha

package.json で開発依存関係として設定されていない必要があるツールをプロジェクトにインストールするには、パイプライン内のスクリプトから npm install -g を呼び出します。次の例では、を使用して最新バージョンの npm をインストールします。パイプライン内の他のスクリプトでは、Angular ng コマンドを使用できます。

- script: npm install -g @angular/cli

注意

Microsoft でホストされる Linux エージェントでは、sudo のようにコマンドの前に sudo npm install -g を付けます。

これらのツールのインストールタスクは、パイプラインが実行されるたびに実行されるため、ビルド時間への影響に注意してください。オーバーヘッドがビルドのパフォーマンスに深刻な影響を与える場合は、必要なツールバージョンで事前構成されたセルフホステッドエージェントの使用を検討してください。

注意

これらのツールのインストールタスクは、パイプラインが実行されるたびに実行されるため、ビルド時間への影響に注意してください。

依存関係パッケージのダウンロード

Yarn または Azure Artifacts を使用して、*.npmrc ファイルで指定したパブリック npm レジストリまたはプライベート npm レジストリからパッケージをダウンロードできます。 npm レジストリを指定するには、コードリポジトリ内の *.npmrc ファイルにその URL を追加します。

npm を使用する

npm を使用して、次の方法でパイプライン内のビルドパッケージをダウンロードできます。

認証なしでパッケージをダウンロードする最も簡単な方法については、 npm installを直接実行します。
認証済みレジストリを使用するには、 npm タスクを追加します。
タスクランナー Gulp、Grunt、または Maven 内から npm install を実行するには、 npm 認証タスクを使用します。

注意

npm フィードで認証を使用する場合は、Azure DevOps Project 設定の [サービス] タブで npm サービス接続を作成して、その資格情報を管理する必要があります。

npm パッケージを直接インストールするには、 azure-pipelines.ymlで次のスクリプトを使用します。ビルドエージェントで開発の依存関係が不要な場合は、 --only=prod オプションを npm installに追加することで、ビルド時間を短縮できます。

- script: npm install --only=prod

*.npmrc ファイルで指定されたプライベートレジストリを使用するには、Npm@1 タスクをazure-pipelines.ymlに追加します。

- task: Npm@1
  inputs:
    customEndpoint: <Name of npm service connection>

Gulp などのタスクランナーを介して npm コマンドにレジストリ資格情報を渡すには、タスクランナーを呼び出す前に、npmAuthenticate@0 タスクをazure-pipelines.ymlに追加します。

- task: npmAuthenticate@0
  inputs:
    customEndpoint: <Name of npm service connection>

注意

Microsoft がホストするエージェントは、すべてのビルドで新しいマシンを使用します。依存関係の復元には、かなりの時間がかかる場合があります。この問題を軽減するために、パッケージキャッシュで Azure Artifacts またはセルフホステッドエージェントを使用できます。

npm レジストリからパッケージを復元するときに接続の問題が原因でビルドが失敗する場合は、アップストリームソースで Azure Artifacts を使用してパッケージをキャッシュできます。 Azure Artifacts では、パイプラインの資格情報が自動的に使用されます。これは通常、 Project Collection Build Service アカウントから派生します。

注意

依存関係の復元には、かなりの時間がかかる場合があります。この問題を軽減するために、パッケージキャッシュで Azure Artifacts またはセルフホステッドエージェントを使用できます。

Yarn を使用する

依存関係を復元するために Yarn をインストールするには、スクリプトを使用します。 Yarn は、Microsoft がホストする一部のエージェントにプレインストールされています。他のツールと同様に、セルフホステッドエージェントに Yarn をインストールして構成できます。

- script: yarn install

パイプラインで CLI または Bash タスクを使用して Yarn を呼び出すこともできます。

JavaScript コンパイラ

JavaScript アプリでは、Babel や TypeScripttsc コンパイラなどのコンパイラを使用して、ソースコードを Node.js ランタイムまたは Web ブラウザーで使用できるバージョンに変換します。コンパイラを実行するためにプロジェクト package.json ファイルにスクリプトオブジェクトが設定されている場合は、パイプラインで呼び出すことができます。

- script: npm run compile

スクリプトを使用して、パイプラインから直接コンパイラを呼び出すこともできます。これらのコマンドは、複製されたソースコードリポジトリのルートから実行されます。

- script: tsc --target ES6 --strict true --project tsconfigs/production.json

プロジェクトでコンパイルスクリプトが定義されている場合は、 npm タスクを使用してコード package.json ビルドできます。コンパイルスクリプトを定義しない場合は、 Bash タスクを使用してコードをコンパイルできます。

単体テスト

JUnit XML 形式で結果が生成されるように、JavaScript テストを実行するようにパイプラインを構成できます。その後、テスト結果の発行タスクを使用して結果を発行できます。

テストフレームワークが JUnit 出力をサポートしていない場合は、 mocha-junit-reporter などのパートナーレポートモジュールを通じてサポートを追加します。テストスクリプトを更新して JUnit レポーターを使用するか、レポーターがコマンドラインオプションをサポートしている場合は、それらのオプションをタスク定義に渡すことができます。

次の表に、最もよく使用されるテストランナーと、XML 結果の生成に使用できるレポーターを示します。

テストランナー	XML レポートのレポーター
モカ	mocha-junit-reporter cypress-multi-reporters
ジャスミン	jasmine-reporters
Jest	jest-junit jest-junit-reporter
Karma	karma-junit-reporter
Ava	tap-xunit

次の例では、mocha-junit-reporter を使用し、スクリプトを使用して mocha test を直接呼び出します。このスクリプトは、. /test-results.xmlの既定の場所で JUnit XML 出力を生成します。

- script: mocha test --reporter mocha-junit-reporter

test ファイルでスクリプトを定義した場合は、npm testを使用して呼び出すことができます。

- script: npm test

テスト結果を公開する

テスト結果を発行するには、テスト結果の発行タスクを使用します。

- task: PublishTestResults@2
  condition: succeededOrFailed()
  inputs:
    testRunner: JUnit
    testResultsFiles: '**/test-results.xml'

コードカバレッジの結果を発行する

テストスクリプトで Istanbul などのコードカバレッジツールを実行する場合は、コードカバレッジ結果の発行タスクを追加します。その後、ビルドの概要でカバレッジメトリックを確認し、HTML レポートをダウンロードして詳細な分析を行うことができます。

このタスクでは、Cobertura または JaCoCo レポートの出力が必要です。 --report coberturaなど、適切な出力を生成するために必要なオプションでコードカバレッジツールが実行されていることを確認します。

YAML
クラシック

次の例では、mocha-junit-reporter と共に Istanbul コマンドラインインターフェイス nyc を使用し、npm testを呼び出します。

- script: |
    nyc --reporter=cobertura --reporter=html \
    npm test -- --reporter mocha-junit-reporter --reporter-options mochaFile=./test-results.xml
  displayName: 'Build code coverage report'

- task: PublishCodeCoverageResults@2
  inputs: 
    summaryFileLocation: '$(System.DefaultWorkingDirectory)/**/*coverage.xml'

エンドツーエンドのブラウザーテスト

パイプラインでは、Protractor や Karma などのツールを使用して、ヘッドレスブラウザーでテストを実行し、テスト結果を発行できます。ブラウザーのテストを構成し、結果を発行するには、次の手順に従います。

ヘッドレス Chrome や Firefox などのヘッドレスブラウザーテストドライバー、または PhantomJS などのブラウザーモックツールをビルドエージェントにインストールします。
ツールのドキュメントに従い、テストフレームワークをあなたのヘッドレスブラウザーまたはドライバーオプションを使用するように設定してください。
JUnit 形式のテスト結果を出力するようにテストフレームワークを構成します。通常は、レポータープラグインまたは構成を使用します。
ヘッドレスブラウザーインスタンスを開始するスクリプトまたは CLI タスクを追加します。
パイプラインステージで、単体テストと共にエンドツーエンドのテストを実行します。
同じテスト結果の発行タスクを使用して、単体テストと共に結果を発行します。

パッケージ化と配送

アプリをビルドしてテストした後、次のことができます。

ビルド出力を Azure Pipelines にアップロードします。
npm または Maven パッケージを作成して発行します。
ビルド出力を ZIP アーカイブにパッケージ化して、Web アプリケーションにデプロイします。

Azure Pipelines にファイルを発行する

作業ディレクトリ全体をアップロードするには、ビルド成果物の発行タスクを azure-pipelines.yml ファイルに追加します。

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(System.DefaultWorkingDirectory)'

ファイルのサブセットをアップロードするには、まず、ファイルのコピータスクを使用して作業ディレクトリからステージングディレクトリに必要なファイルをコピーしてから、ビルド成果物の発行タスクを使用します。

- task: CopyFiles@2
  inputs:
    SourceFolder: '$(System.DefaultWorkingDirectory)'
    Contents: |
      **\*.js
      package.json
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- task: PublishBuildArtifacts@1

npm レジストリにモジュールを発行する

プロジェクトの出力が、他のプロジェクトが使用する npm モジュールであり、Web アプリケーションではない場合は、 npm タスクを使用して、ローカルレジストリまたはパブリック npm レジストリにモジュールを発行します。発行するたびに名前とバージョンの一意の組み合わせを指定します。

次の例では、スクリプトを使用してパブリック npm レジストリに発行します。この例では、バージョン管理の package.json ファイルを使用して npm バージョンなどのバージョン情報を管理することを前提としています。

- script: npm publish

次の例では、リポジトリの *.npmrc ファイルで定義されているカスタムレジストリに発行します。認証資格情報をビルドの実行時に接続時に挿入するように、npm サービス接続を設定します。

- task: Npm@1
  inputs:
     command: publish
     publishRegistry: useExternalRegistry
     publishEndpoint: https://my.npmregistry.com

次の例では、モジュールを Azure DevOps Services パッケージ管理フィードに発行します。

- task: Npm@1
  inputs:
     command: publish
     publishRegistry: useFeed
     publishFeed: https://my.npmregistry.com

npm パッケージのバージョン管理と発行の詳細については、「 npm パッケージの発行」および「ビルドプロセスの一環として npm パッケージをバージョン管理する方法」を参照してください。

Web アプリのパッケージ化とデプロイ

アプリケーションをパッケージ化して、中間出力と依存関係を持つすべてのモジュールをデプロイの準備ができている静的資産にバンドルできます。コンパイルとテストの後にパイプラインステージを追加して、 webpack や Angular CLI ng ビルドなどのツールを実行します。

次の例では、 webpackを呼び出します。このプロセスを機能させるには、webpackでが開発依存関係として構成されていることを確認します。このスクリプトは、プロジェクトのルートフォルダーにwebpack.config.jsファイルがない限り、既定の構成でwebpack実行されます。

- script: webpack

次の例では、npm run buildを使用して、プロジェクトpackage.jsonファイルで定義されているbuild スクリプトオブジェクトを呼び出します。プロジェクトでスクリプトオブジェクトを使用すると、ビルドロジックがソースコードに移動され、パイプラインから外されます。

- script: npm run build

パイプラインで CLI または Bash タスクを使用して、 webpack や Angular の ng buildなどのパッケージ化ツールを呼び出すこともできます。

Web アプリに発行する準備ができている *.zip ファイルアーカイブを作成するには、[ ファイルのアーカイブ ] タスクを使用します。

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
    includeRootFolder: false

このアーカイブを Web アプリに発行するには、「 Azure Pipelines を使用して Azure App Service にデプロイする」を参照してください。

JavaScript フレームワーク

さまざまな JavaScript フレームワークをサポートするために、パイプラインにパッケージをインストールできます。

Angular

Angular アプリでは、 ng test、 ng build、 ng e2eなどの Angular 固有のコマンドを実行できます。パイプラインで Angular CLI コマンドを使用するには、ビルドエージェントに angular/cli npm パッケージをインストールします。

YAML
クラシック

- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod

注意

Microsoft でホストされる Linux エージェントでは、sudo のようにコマンドの前に sudo npm install -g を付けます。

ng test コマンドで Karma を実行するなど、ブラウザーの実行を必要とするパイプライン内のテストでは、標準ブラウザーではなくヘッドレスブラウザーを使用します。 Angular スターターアプリ:

browsers プロジェクトファイルのエントリを browsers: ['Chrome'] から browsers: ['ChromeHeadless'] に変更します。
singleRun プロジェクトファイルのエントリを false から true に変更します。この変更は、Karma プロセスが実行後に停止することを保証するのに役立ちます。

React と Vue

React アプリと Vue アプリのすべての依存関係は、 package.json ファイルにキャプチャされます。 azure-pipelines.yml ファイルには、標準のnpm スクリプトが含まれています。

- script: |
    npm install
  displayName: 'npm install'

- script: |
    npm run build
  displayName: 'npm build'

ビルドファイルは、Vue の 場合は dist 、React の場合は ビルド の新しいフォルダーにあります。次の例では、リリースの準備ができている成果物 ( www) をビルドします。パイプラインでは、 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'

- task: CopyFiles@2
  inputs:
    Contents: 'build/**' # Pull the build directory (React)
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- task: PublishBuildArtifacts@1
  inputs: 
    PathtoPublish: $(Build.ArtifactStagingDirectory) # dist or build files
    ArtifactName: 'www' # output artifact named www

アプリをリリースするには、リリースタスクを dist または build 成果物にポイントし、 Azure Web App タスクを使用します。

webpack

Webpack 構成ファイルを使用して、Babel や TypeScript などのコンパイラを指定したり、JavaScript XML (JSX) または TypeScript をプレーンな JavaScript にトランスパイルしたり、アプリをバンドルしたりできます。

YAML
クラシック

- script: |
    npm install webpack webpack-cli --save-dev
    npx webpack --config webpack.config.js

ビルドタスクランナー

JavaScript アプリをビルドしてテストするには、タスクランナーとして Gulp または Grunt を使用するのが一般的です。

Gulp

Gulp は、Microsoft がホストするエージェントにプレインストールされています。

YAML
クラシック

YAML パイプラインファイルで gulp コマンドを実行できます。

- script: gulp # add any needed options

gulpfile.js ファイルの手順で npm レジストリによる認証が必要な場合は、npm 認証タスクを追加します。

- task: npmAuthenticate@0
  inputs:
    customEndpoint: <Name of npm service connection>

- script: gulp

JUnit または xUnit のテスト結果をサーバーに発行するには、テスト結果の発行タスクを追加します。

- task: PublishTestResults@2
  inputs:
    testResultsFiles: '**/TEST-RESULTS.xml'
    testRunTitle: 'Test results for JavaScript using gulp'

コードカバレッジの結果をサーバーに発行するには、コードカバレッジの結果の発行タスクを追加します。ビルドの概要でカバレッジメトリックを見つけることができ、詳細な分析のために HTML レポートをダウンロードできます。

- task: PublishCodeCoverageResults@1
  inputs: 
    codeCoverageTool: Cobertura
    summaryFileLocation: '$(System.DefaultWorkingDirectory)/**/*coverage.xml'
    reportDirectory: '$(System.DefaultWorkingDirectory)/**/coverage'

Grunt

Grunt は、Microsoft がホストするエージェントにプレインストールされています。

YAML
クラシック

YAML ファイルで grunt コマンドを実行できます。

- script: grunt # add any needed options

Gruntfile.js ファイルの手順で npm レジストリによる認証が必要な場合は、npm 認証タスクを追加します。

- task: npmAuthenticate@0
  inputs:
    customEndpoint: <Name of npm service connection>

- script: grunt

トラブルシューティング

開発用コンピューターでプロジェクトをビルドできるが、Azure Pipelines でビルドできない場合は、次の潜在的な原因と是正措置を確認してください。

開発用コンピューターの Node.js とタスクランナーのバージョンがエージェントのバージョンと一致していることを確認します。

パイプラインに node --version などのコマンドラインスクリプトを含め、エージェントにインストールされているバージョンを確認できます。 Use Node.js タスクを使用してエージェントに同じバージョンをインストールするか、npm installコマンドを実行してツールのバージョンを更新します。
パッケージの復元中にビルドが断続的に失敗する場合は、npm レジストリに問題があるか、Azure データセンターとレジストリの間にネットワークの問題があります。 npm レジストリを含む Azure Artifacts をアップストリームソースとして使用することで、ビルドの信頼性が向上するかどうかを調べます。
nvmを使用してさまざまなバージョンの Node.jsを管理する場合は、代わりに Node.js の使用 (UseNode@1) タスクに切り替えることを検討してください。 nvm は、macOS イメージに過去の理由からインストールされます。 nvm では、シェルエイリアスを追加し、 PATHを変更することで、複数の Node.js バージョンを管理します。これは、Azure Pipelines が新しいプロセスで各タスクを実行する方法と十分に対話しません。詳細については、「パイプラインの実行」を参照してください。

Use Node.js タスクはこのモデルを正しく処理します。ただし、作業で nvmを使用する必要がある場合は、各パイプラインの先頭に次のスクリプトを追加できます。
```
steps:
- bash: |
    NODE_VERSION=16  # or your preferred version
    npm config delete prefix  # avoid a warning
    . ${NVM_DIR}/nvm.sh
    nvm use ${NODE_VERSION}
    nvm alias default ${NODE_VERSION}
    VERSION_PATH="$(nvm_version_path ${NODE_VERSION})"
    echo "##vso[task.prependPath]$VERSION_PATH"
```
その後、node および他のコマンドラインツールが、パイプラインジョブの残りの部分で機能します。 nvm コマンドを使用する各ステップで、次のコードを使用してスクリプトを開始します。
```
- bash: |
    . ${NVM_DIR}/nvm.sh
    nvm <command>
```

FAQ

"FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory" というメッセージでパイプラインエラーを修正するにはどうすればよいですか?

このエラーの種類は、Node.js パッケージがメモリ使用量の制限を超えた場合に発生します。この問題を解決するには、 NODE_OPTIONS などの変数を追加し、 --max_old_space_size=16384の値を割り当てます。

ビルドプロセスの一環として npm パッケージをバージョン管理するにはどうすればよいですか?

1 つのオプションは、バージョン管理と npm バージョンの組み合わせを使用することです。パイプライン実行の最後に、新しいバージョンでリポジトリを更新できます。次の YAML パイプラインには GitHub リポジトリがあり、パッケージは npmjs にデプロイされます。 npmjs 上のパッケージバージョンと package.json ファイルの間に不一致がある場合、ビルドは失敗します。

variables:
    MAP_NPMTOKEN: $(NPMTOKEN) # Mapping secret var

trigger:
- none

pool:
  vmImage: 'ubuntu-latest'

steps: # Checking out connected repo
- checkout: self
  persistCredentials: true
  clean: true
    
- task: npmAuthenticate@0
  inputs:
    workingFile: .npmrc
    customEndpoint: 'my-npm-connection'
    
- task: UseNode@1
  inputs:
    version: '16.x'
  displayName: 'Install Node.js'

- script: |
    npm install
  displayName: 'npm install'

- script: |
    npm pack
  displayName: 'Package for release'

- bash: | # Grab the package version
    v=`node -p "const p = require('./package.json'); p.version;"`
    echo "##vso[task.setvariable variable=packageVersion]$v"

- task: CopyFiles@2
  inputs:
      contents: '*.tgz'
      targetFolder: $(Build.ArtifactStagingDirectory)/npm
  displayName: 'Copy archives to artifacts staging directory'

- task: CopyFiles@2
  inputs:
    sourceFolder: '$(Build.SourcesDirectory)'
    contents: 'package.json' 
    targetFolder: $(Build.ArtifactStagingDirectory)/npm
  displayName: 'Copy package.json'

- task: PublishBuildArtifacts@1 
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)/npm'
    artifactName: npm
  displayName: 'Publish npm artifact'

- script: |  # Config can be set in .npmrc
    npm config set //registry.npmjs.org/:_authToken=$(MAP_NPMTOKEN) 
    npm config set scope "@myscope"
    # npm config list
    # npm --version
    npm version patch --force
    npm publish --access public

- task: CmdLine@2 # Push changes to GitHub (substitute your repo)
  inputs:
    script: |
      git config --global user.email "username@contoso.com"
      git config --global user.name "Azure Pipeline"
      git add package.json
      git commit -a -m "Test Commit from Azure DevOps"
      git push -u origin HEAD:main

Azure Artifacts とパッケージ管理サービスの詳細については、「 Azure Artifacts でのパッケージ管理」を参照してください。
タスクの詳細については、「ビルド、リリース、およびテストタスク」を参照してください。

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-10-07