npm プロジェクトを Azure Artifacts に接続する

[アーティクル]
12/31/2024

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

Azure Artifacts を使用すると、開発者は、npmjs.com フィードやプライベートフィードなどのパブリックレジストリの両方を含む、さまざまなソースからパッケージを管理できます。 Azure Artifacts で認証するには、npm 構成ファイルを構成する必要があります。このファイルには、npm で使用されるフィード URL と資格情報が含まれており、プロキシの設定、既定のパッケージの場所の定義、プライベートパッケージフィードの構成など、npm クライアントの動作をカスタマイズするためのオプションが提供されます。 .npmrc ファイルは通常、ユーザーのホームディレクトリにありますが、プロジェクトレベルで作成して既定の設定をオーバーライドすることもできます。

前提条件

Azure DevOps 組織。無料で作成します。
Azure DevOps プロジェクト。新しいプロジェクトをまだ作成していない場合は作成します。
Azure Artifacts フィード。無料で作成できます。
Node.js と npmをダウンロードしてインストールします。

フィードに接続する

Azure Artifacts では、2 つの個別の構成ファイルを使用することをお勧めします。 1 つ目は Azure Artifacts での認証専用で、2 つ目は資格情報を格納するためにローカルに保持する必要があります。この方法では、資格情報をセキュリティで保護しながら、構成ファイルを共有できます。

2 番目のファイルを設定するには、開発用コンピューターのホームディレクトリに配置し、すべてのレジストリ資格情報を含めるだけです。これにより、npm クライアントは認証のために資格情報に簡単にアクセスできます。

次の手順では、最初の構成ファイルを設定する手順について説明します。開発環境に対応するタブを選択します。

手記

vsts-npm-auth は、Azure DevOps Server ではサポートされていません。

Windows
Linux/MacOS

Azure DevOps 組織にサインインし、プロジェクトに移動します。
[Artifacts] を選択し、[フィードに接続する] を選択します。
左側 サイドバーから npm を選択します。 npm で Azure Artifacts を初めて使用する場合は、前提条件がインストールされていることを確認してください。
Project のセットアップ セクションの手順に従ってフィードに接続します。

.npmrc ファイルをプロジェクトのディレクトリ (package.json ファイルと同じディレクトリ) に追加し、次のスニペットを貼り付けます。
```
registry=https://pkgs.dev.azure.com/<ORGANIZATION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/registry/ 

always-auth=true
```

資格情報のセットアップ

次のスニペットをコピーして、ユーザーレベルの npmrc ファイルに貼り付けます。

組織スコープのフィード:

; begin auth token
//pkgs.dev.azure.com/<ORGANIZATION_NAME>/_packaging/<FEED_NAME>/npm/registry/:username=[ENTER_ANY_VALUE_BUT_NOT_AN_EMPTY_STRING]
//pkgs.dev.azure.com/<ORGANIZATION_NAME>/_packaging/<FEED_NAME>/npm/registry/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//pkgs.dev.azure.com/<ORGANIZATION_NAME>/_packaging/<FEED_NAME>/npm/registry/:email=npm requires email to be set but doesn't use the value
//pkgs.dev.azure.com/<ORGANIZATION_NAME>/_packaging/<FEED_NAME>/npm/:username=[ANY_VALUE_BUT_NOT_AN_EMPTY_STRING]
//pkgs.dev.azure.com/<ORGANIZATION_NAME>/_packaging/<FEED_NAME>/npm/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//pkgs.dev.azure.com/<ORGANIZATION_NAME>/_packaging/<FEED_NAME>/npm/:email=npm requires email to be set but doesn't use the value
; end auth token

プロジェクトスコープのフィード:

; begin auth token
//pkgs.dev.azure.com/<ORGANIZATION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/registry/:username=[ENTER_ANY_VALUE_BUT_NOT_AN_EMPTY_STRING]
//pkgs.dev.azure.com/<ORGANIZATION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/registry/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//pkgs.dev.azure.com/<ORGANIZATION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/registry/:email=npm requires email to be set but doesn't use the value
//pkgs.dev.azure.com/<ORGANIZATION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/:username=[ENTER_ANY_VALUE_BUT_NOT_AN_EMPTY_STRING]
//pkgs.dev.azure.com/<ORGANIZATION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//pkgs.dev.azure.com/<ORGANIZATION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/:email=npm requires email to be set but doesn't use the value
; end auth token

パッケージの読み取りおよび書き込みスコープで、個人アクセストークンを生成します。
コマンドプロンプトウィンドウで次のコマンドを実行し、メッセージが表示されたら個人用アクセストークンを貼り付けます。完了したら、生成された Base 64 でエンコードされた値をコピーします。
```
node -e "require('readline') .createInterface({input:process.stdin,output:process.stdout,historySize:0}) .question('PAT> ',p => { b64=Buffer.from(p.trim()).toString('base64');console.log(b64);process.exit(); })"
```
Linux/Mac を使用している場合は、次のコマンドを使用して、個人用アクセストークンを Base 64 に変換することもできます。結果の Base64 でエンコードされた値をコピーします。
```
echo -n "YOUR_PERSONAL_ACCESS-TOKEN" | base64
```
ユーザー .npmrc ファイルの [BASE64_ENCODED_PERSONAL_ACCESS_TOKEN] プレースホルダーを、前の手順で取得したエンコードされた個人用アクセストークンに置き換えます。

Windows
Linux/MacOS

Azure DevOps コレクションにサインインし、プロジェクトに移動します。
[Artifacts] を選択し、[フィードに接続する] を選択します。
左側 サイドバーから npm を選択し、「プロジェクトのセットアップ」セクションの指示に従って構成ファイルを設定します。

.npmrc ファイルをプロジェクトのディレクトリ (package.json ファイルと同じディレクトリ) に追加し、次のスニペットを貼り付けます。
```
registry=http://<SERVER_NAME>/<COLLECTION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/registry/

always-auth=true
```

資格情報のセットアップ

次のスニペットをコピーし、.npmrc ファイルユーザーレベルに貼り付けます。

コレクションスコープのフィード

; begin auth token
//<SERVER_NAME>/<COLLECTION_NAME>/_packaging/<FEED_NAME>/npm/registry/:username=DefaultCollection
//<SERVER_NAME>/<COLLECTION_NAME>/_packaging/<FEED_NAME>/npm/registry/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//<SERVER_NAME>/<COLLECTION_NAME>/_packaging/<FEED_NAME>/npm/registry/:email=npm requires email to be set but doesn't use the value
//<SERVER_NAME>/<COLLECTION_NAME>/_packaging/<FEED_NAME>/npm/:username=DefaultCollection
//<SERVER_NAME>/<COLLECTION_NAME>/_packaging/<FEED_NAME>/npm/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//<SERVER_NAME>/<COLLECTION_NAME>/_packaging/<FEED_NAME>/npm/:email=npm requires email to be set but doesn't use the value
; end auth token

プロジェクトスコープのフィード:

; begin auth token
//<SERVER_NAME>/<COLLECTION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/registry/:username=[ENTER_ANY_VALUE_BUT_NOT_AN_EMPTY_STRING]
//<SERVER_NAME>/<COLLECTION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/registry/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//<SERVER_NAME>/<COLLECTION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/registry/:email=npm requires email to be set but doesn't use the value
//<SERVER_NAME>/<COLLECTION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/:username=[ENTER_ANY_VALUE_BUT_NOT_AN_EMPTY_STRING]
//<SERVER_NAME>/<COLLECTION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//<SERVER_NAME>/<COLLECTION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/:email=npm requires email to be set but doesn't use the value
; end auth token

パッケージの読み取りおよび書き込みスコープで、個人アクセストークンを生成します。
コマンドプロンプトウィンドウで次のコマンドを実行し、メッセージが表示されたら個人用アクセストークンを貼り付けます。完了したら、生成された Base 64 でエンコードされた値をコピーします。
```
node -e "require('readline') .createInterface({input:process.stdin,output:process.stdout,historySize:0}) .question('PAT> ',p => { b64=Buffer.from(p.trim()).toString('base64');console.log(b64);process.exit(); })"
```
ユーザー .npmrc ファイルの [BASE64_ENCODED_PERSONAL_ACCESS_TOKEN] プレースホルダーを、前の手順で取得したエンコードされた個人用アクセストークンに置き換えます。

Windows
Linux/MacOS

Azure DevOps コレクションにサインインし、プロジェクトに移動します。
[Artifacts] を選択し、[フィードに接続する] を選択します。
左側 npm を選択し、Project セットアップ の指示に従って構成ファイルを設定します。

.npmrc ファイルをプロジェクトのディレクトリの package.json ファイルと同じディレクトリに追加し、次のスニペットを貼り付けます。
```
registry=http://<SERVER_NAME>/<COLLECTION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/registry/

always-auth=true
```

資格情報のセットアップ

次のスニペットをコピーし、.npmrc ファイルユーザーレベルに貼り付けます。

コレクションスコープのフィード

; begin auth token
//<SERVER_NAME>/<COLLECTION_NAME>/_packaging/<FEED_NAME>/npm/registry/:username=DefaultCollection
//<SERVER_NAME>/<COLLECTION_NAME>/_packaging/<FEED_NAME>/npm/registry/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//<SERVER_NAME>/<COLLECTION_NAME>/_packaging/<FEED_NAME>/npm/registry/:email=npm requires email to be set but doesn't use the value
//<SERVER_NAME>/<COLLECTION_NAME>/_packaging/<FEED_NAME>/npm/:username=DefaultCollection
//<SERVER_NAME>/<COLLECTION_NAME>/_packaging/<FEED_NAME>/npm/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//<SERVER_NAME>/<COLLECTION_NAME>/_packaging/<FEED_NAME>/npm/:email=npm requires email to be set but doesn't use the value
; end auth token

プロジェクトスコープのフィード:

; begin auth token
//<SERVER_NAME>/<COLLECTION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/registry/:username=[ENTER_ANY_VALUE_BUT_NOT_AN_EMPTY_STRING]
//<SERVER_NAME>/<COLLECTION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/registry/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//<SERVER_NAME>/<COLLECTION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/registry/:email=npm requires email to be set but doesn't use the value
//<SERVER_NAME>/<COLLECTION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/:username=[ENTER_ANY_VALUE_BUT_NOT_AN_EMPTY_STRING]
//<SERVER_NAME>/<COLLECTION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//<SERVER_NAME>/<COLLECTION_NAME>/<PROJECT_NAME>/_packaging/<FEED_NAME>/npm/:email=npm requires email to be set but doesn't use the value
; end auth token

パッケージの読み取りおよび書き込みスコープで、個人アクセストークンを生成します。
コマンドプロンプトウィンドウで次のコマンドを実行し、メッセージが表示されたら個人用アクセストークンを貼り付けます。完了したら、生成された Base 64 でエンコードされた値をコピーします。
```
node -e "require('readline') .createInterface({input:process.stdin,output:process.stdout,historySize:0}) .question('PAT> ',p => { b64=Buffer.from(p.trim()).toString('base64');console.log(b64);process.exit(); })"
```
ユーザー .npmrc ファイルの [BASE64_ENCODED_PERSONAL_ACCESS_TOKEN] プレースホルダーを、前の手順で取得したエンコードされた個人用アクセストークンに置き換えます。

Azure DevOps コレクションにサインインし、プロジェクトに移動します。
[Artifacts] を選択し、[フィードに接続する] を選択します。
新しいウィンドウが表示されます。左側のナビゲーションウィンドウで、npm選択します。
指定された手順に従って、プロジェクトの と ユーザーの .npmrc ファイルを構成します。

アドバイス

.npmrc ファイルで複数のレジストリを使用することは、スコープおよびアップストリームソースでサポートされています。

パイプライン認証

パイプラインで認証するために、Azure Artifacts では、npm 認証タスクを使用することをお勧めします。

gulp や Grunt などのタスクランナーを使用する場合は、パイプラインの開始時に npm 認証タスク の設定を優先します。この手順により、資格情報がプロジェクトの .npmrc ファイルに挿入され、パイプラインの実行全体で保持され、以降の手順で構成ファイル内の資格情報にアクセスできるようになります。

クラシック
YAML

プロジェクトに移動し、[パイプライン]選択し、パイプライン定義を選択します。
編集を選択してパイプラインを変更します。
+ を選択して、新しいタスクをパイプラインに追加します。

プロジェクトに移動し、Pipelines>Buildを選択し、ビルド定義を選択します。
編集を選択して、ビルドパイプラインを変更します。
+ を選択して、新しいタスクをビルドパイプラインに追加します。

npm Authenticate タスクを見つけ、[追加] を選択します。
.npmrc ファイルを選択し、完了したら [保存 & キュー] を選択します。

- task: npmAuthenticate@0
  inputs:
    workingFile: .npmrc                ## Path to the npmrc file
    customEndpoint: #Optional          ## Comma-separated list of npm service connection names for registries from external organizations. For registries in your org, leave this blank

手記

パイプラインからフィードにアクセスするには、フィード設定>アクセス許可で、ビルドサービスロールが Feed and Upstream Reader (Contributor) に設定されていることを確認します。

フィード設定のビルドサービスロールを示すスクリーンショット。

手記

組織でファイアウォールまたはプロキシサーバーを使用している場合は、適切なドメイン URL を許可していることを確認します。詳細については、許可されている IP アドレスとドメイン URL を参照してください。

トラブルシューティング

vsts-npm-auth が認識されない

このエラーは、npm modules フォルダーがパスに追加されていないことを示します。 Node.js セットアップを再実行し、必ず Add to PATH オプションを選択します。または、コマンドプロンプトで %APPDATA%\npm するように PATH 変数を変更するか、PowerShell で $env:APPDATA\npm することで、npm モジュールフォルダーをパスに追加することもできます。

node.jsを設定する方法を示すスクリーンショット。

認証できない

エラー: コード E401 npm ERR!を認証できません: ->-F フラグを指定して vsts-npm-auth コマンドを実行して再認証します。
```
vsts-npm-auth -config .npmrc -F
```

vsts-npm-auth をリセットする

vsts-npm-auth 資格情報をリセットするには、次の手順に従います。

vsts-npm-auth をアンインストールします。
```
npm uninstall -g vsts-npm-auth
```
npm キャッシュをクリアします。
```
npm cache clean --force
```
.npmrc ファイルを削除します。

vsts-npm-auth を再インストールします。

npm install -g vsts-npm-auth --registry https://registry.npmjs.com --always-auth false

発行できない

403 エラーが発生した場合は、名前の競合を示している可能性があります。 Azure Artifacts では、パッケージは不変です。つまり、パッケージをフィードに発行すると、そのバージョン番号は永続的に予約されます。削除しても、同じバージョン番号の新しいパッケージを発行することはできません。この問題に対処するには、package.json ファイル内のパッケージバージョンを更新してから、もう一度やり直してください。

次の方法で共有

npm プロジェクトを Azure Artifacts に接続する

前提条件

フィードに接続する

資格情報のセットアップ

資格情報のセットアップ

資格情報のセットアップ

パイプライン認証

トラブルシューティング

vsts-npm-auth が認識されない

認証できない

vsts-npm-auth をリセットする

発行できない

フィードバック

その他のリソース

次の方法で共有

npm プロジェクトを Azure Artifacts に接続する

前提 条件

フィードに接続する

パイプライン認証

トラブルシューティング

vsts-npm-auth が認識されない

認証できない

vsts-npm-auth をリセットする

発行できない

関連記事

フィードバック

その他のリソース

前提条件