クライアントの npmrc を設定するSet up your client's npmrc

Azure DevOps Services |TFS 2018 |TFS 2017Azure DevOps Services | TFS 2018 | TFS 2017

Azure Artifacts は、さまざまな種類のパッケージを簡単に検出、インストール、および発行できるようにする Azure DevOps Services と Azure DevOps Server の拡張機能です。Azure Artifacts is an extension to Azure DevOps Services and Azure DevOps Server that makes it easy to discover, install, and publish different types of packages. 詳細については、 「Azure Artifacts の使用を開始する 」を参照してください。Check out Start using Azure Artifacts for more details.

すべての Azure Artifacts フィードは認証を必要とするため、パッケージをインストールまたは発行する前に、フィードの資格情報を保存する必要があります。All Azure Artifacts feeds require authentication, so you'll need to store credentials for the feed before you can install or publish packages. npm は、を使用して、フィードの Url と資格情報を格納するために、 npmrc 構成ファイル を使用します。npm uses .npmrc configuration files to store feed URLs and credentials.

Npmrc ファイルはどこにありますか。Where are my .npmrc files?

Azure DevOps Services は、次 の2つの npmrc ファイルを使用することをお勧めします。Azure DevOps Services recommends using two .npmrc files:

  1. 1 . npmrc は、のプロジェクトの package.js に隣接する git リポジトリのルートに存在する必要があります。One .npmrc should live at the root of your git repo adjacent to your project's package.json.

    1. [パッケージ] ページで、[フィードに接続] をクリックします。From your Packages page, click Connect to Feed

      Azure Artifacts Azure Devops の [フィードに接続] ボタンConnect to feed button in Azure Artifacts Azure Devops

      フィードへの接続 TFSConnect to feed TFS

    2. [ Npm] を選択します。Select npm.

    3. 右上隅にある [ ツールの取得 ] を選択します。Select Get the tools in the top-right corner.

    1. 手順 1 . と 2 . に従って、Node.js、npm、およびアーティファクト資格情報プロバイダーをダウンロードします。Follow steps 1 and 2 to download Node.js, npm, and the artifacts credential provider.

    2. プロジェクトの セットアップ セクションの指示に従って、プロジェクトを設定します。Follow the instructions under the Project setup section to set up your project. パッケージを発行または復元する場合は、[ パッケージの復元 ] および [ パッケージの発行 ] セクションを参照してください。See the Restore packages and Publish packages sections if you want to publish or restore your packages.

      フィード DevOps サービスへの接続Connect to feed DevOps services

    1. プロジェクトのセットアップ復元のパッケージ 」セクションの手順に従います。Follow the instructions in the Project setup and Restore packages sections.

      フィードサーバー2019および2020に接続するConnect to feed server 2019 and 2020

    1. 手順 1 . と 2 . に従って、Node.js、npm、およびアーティファクト資格情報プロバイダーをダウンロードします。Follow steps 1 and 2 to download Node.js, npm, and the artifacts credential provider.

    2. プロジェクトの セットアップ セクションの指示に従って、プロジェクトを設定します。Follow the instructions under the Project setup section to set up your project. パッケージを発行または復元する場合は、[ パッケージの復元 ] および [ パッケージの発行 ] セクションを参照してください。See the Restore packages and Publish packages sections if you want to publish or restore your packages.

      フィードへの接続 TFS プロジェクトのセットアップConnect to feed TFS project setup

  2. 開発用コンピューターでは、Linux または Mac システムまたは $env の $HOME に npmrc もあります。 Win システムのホーム。On your development machine, you will also have a .npmrc in $HOME for Linux or Mac systems or $env.HOME for win systems. この . npmrc には、接続する必要があるすべてのレジストリの資格情報が含まれている必要があります。This .npmrc should contain credentials for all of the registries that you need to connect to. NPM クライアントは、プロジェクトの npmrc を調べ、レジストリを検出し、$HOME/.npmrc または $env から一致する資格情報をフェッチします。HOME/. npmrc。The NPM client will look at your project's .npmrc, discover the registry, and fetch matching credentials from $HOME/.npmrc or $env.HOME/.npmrc. 資格情報の取得については、次のセクションで説明します。Credential acquisition will be discussed in the next section.

これにより、資格情報のセキュリティを維持したまま、プロジェクトの npmrc をチーム全体で共有できます。This enables you to share project's .npmrc with the whole team while keeping your credentials secure.

開発ボックスで認証を設定するSet up authentication on your dev box

"フィードに接続" ダイアログから検出されたフィードのレジストリ情報のみが含まれているプロジェクト固有のテンプレートが必要 です。You should have a project specific .npmrc containing only your feed's registry information that you discovered from the "Connects to Feed" dialog. このファイルには資格情報がなく、ファイル自体がのプロジェクトの package.js に隣接している必要があります。There should be no credentials in this file and the file itself is adjacent to your project's package.json.

重要

Npmrc には、"registry =" 行を1つだけ指定できます。There can only be a single "registry=" line in your .npmrc. アップストリームソースまたはスコープ(推奨されません) で複数のレジストリを使用できます。Multiple registries are possible with upstream sources, or by using scopes (not recommended).

WindowsWindows

Windows で開発している場合は、を使用して vsts-npm-auth 資格情報を取得し、それらを % USERPROFILE% \ . npmrc に定期的に挿入することをお勧めします。If you are developing on Windows, we recommend that you use vsts-npm-auth to fetch credentials and inject them into your %USERPROFILE%\.npmrc on a periodic basis. これを設定する最も簡単な方法は、 vsts-npm-auth グローバル (つまり) をインストールして、 npm install -g vsts-npm-auth プロジェクトの package.js に実行スクリプトを追加することです。The easiest way to set this up is to install vsts-npm-auth globally (i.e. npm install -g vsts-npm-auth) and then add a run script in your project's package.json.

"scripts": {
    "refreshVSToken" : "vsts-npm-auth -config .npmrc"
}

Linux または MacLinux or Mac

Linux または Mac で開発している場合、はサポートされて vsts-npm-auth いないため、 $HOME/.npmrc に対して次の方法でトークンを生成することをお勧めします。If you are developing on Linux or Mac, vsts-npm-auth is not supported and we recommend generating a token in the following manner for your $HOME/.npmrc

プロジェクトの設定Project setup

[ フィードに接続 ] ダイアログボックスでは、適切に書式設定されたトークンが生成されます。これは、npmrc ファイルに配置できます。The Connect to feed dialog box generates an appropriately formatted token that you can place into your .npmrc file. トークンの有効期間は90日です。The token has a lifespan of 90 days.

ヒント

90日を超えて継続するトークンを作成する場合は、既定の有効期限を変更するようにしてください。If you want to create a token that lasts longer than 90 days, make sure you change the default expiration date.

  1. Azure Artifacts で、[フィードに接続] を選択します。From Azure Artifacts, select Connect to feed.

  2. [ Npm] を選択します。Select npm.

  3. [プロジェクトのセットアップ] セクションで [その他] を選択します。Select Other in the Project setup section.

  4. ファイルの package.jsと同じディレクトリに、プロジェクトに npmrc ファイルを追加します。Add a .npmrc file to your project, in the same directory as your package.json file.

    registry=https://pkgs.dev.azure.com/<yourOrganization>/_packaging/<yourFeed>/npm/registry/
    
    always-auth=true
    

資格情報の設定Credentials setup

  1. 次のコードをユーザーの npmrc ファイルにコピーします。Copy the following code to your user .npmrc file.

    ; begin auth token
    //pkgs.dev.azure.com/<yourOrganization>/_packaging/<yourFeed>/npm/registry/:username=[ANY_VALUE_BUT_NOT_AN_EMPTY_STRING]
    //pkgs.dev.azure.com/<yourOrganization>/_packaging/<yourFeed>/npm/registry/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
    //pkgs.dev.azure.com/<yourOrganization>/_packaging/<yourFeed>/npm/registry/:email=npm requires email to be set but doesn't use the value
    //pkgs.dev.azure.com/<yourOrganization>/_packaging/<yourFeed>/npm/:username=[ANY_VALUE_BUT_NOT_AN_EMPTY_STRING]
    //pkgs.dev.azure.com/<yourOrganization>/_packaging/<yourFeed>/npm/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
    //pkgs.dev.azure.com/<yourOrganization>/_packaging/<yourFeed>/npm/:email=npm requires email to be set but doesn't use the value
    ; end auth token
    
  2. 読み取りスコープと書き込みスコープをパッケージ化して、 個人用アクセストークンを生成します。Generate a personal access token, with packaging read and write scopes.

  3. 前の手順で使用した個人用アクセストークンを Base64 でエンコードします。Base64 encode the personal access token from the previous step. 次に、個人用アクセストークンを安全にエンコードします。Then safely encode your personal access token:

    1. コマンドプロンプトで、次のコマンドを実行します。From a command prompt, run the following:

      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(); })"
      

      個人用アクセストークンを Base64 に変換するその他のオプション:Other options to convert your personal access token to Base64:

      Windows:Windows:

      [Convert]::ToBase64String([system.Text.Encoding]::UTF8.GetBytes("YOUR_PAT_GOES_HERE"))
      

      Linux/Mac:Linux/Mac:

      echo -n "YOUR_PAT_GOES_HERE" | base64
      
    2. 個人用アクセストークンの値を貼り付け、enter キーまたは Return キーを押します。Paste your personal access token value, and press Enter or Return.

    3. Base64 でエンコードされた値をコピーします。Copy the Base64 encoded value.

  4. ユーザーの両方 [BASE64_ENCODED_PERSONAL_ACCESS_TOKEN] の値を、前の手順で作成した Base64 でエンコードされた個人用アクセストークンに置き換えます。Replace both [BASE64_ENCODED_PERSONAL_ACCESS_TOKEN] values in your user .npmrc file with your Base64 encoded personal access token from the previous step. また yourOrganization 、とを置き換え、 yourFeed ユーザー名、個人用アクセストークン、および電子メールを入力する必要もあります。You should also replace yourOrganization and yourFeed, and fill in your username, your personal access token, and email.

  1. [ パッケージ] で [ フィードに接続] を選択します。From Packages, select Connect to feed.

  2. [ Npm] を選択します。Select npm.

  3. [ Npm 資格情報の生成] を選択します。Select Generate npm credentials. 資格情報をコピーしてユーザーに追加します。 npmrc ファイルを手動で作成します。Copy the credentials to add them to your user .npmrc file manually:

    Npm への接続フィードのスクリーンショット。Screenshot of the connect to npm feed.

vsts-npm-auth は、オンプレミスの TFS および Azure DevOps Server ではサポートされていません。vsts-npm-auth is not supported on on-premises TFS and Azure DevOps Server.

Azure Artifacts からパッケージを操作するには、このフィードを参照するようにプロジェクトを設定します。To work with packages from Azure Artifacts, set up your project to reference this feed. と同じディレクトリに新しいテキストファイルを作成 .npmrc し、 package.json 次のスニペットをコピーします。Create a new text file .npmrc in the same directory as your package.json and copy the snippet below:

@[YOUR_SCOPE]/registry=FabrikamBasic/_packaging/FabrikamFeed/npm/registry/

パッケージを復元するには、プロジェクトディレクトリで次のコマンドを実行します。To restore your packages, run the following command in your project directory:

npm install

ビルドタスクでの認証の設定Set up authentication in a build task

ビルドタスクで認証を設定するには、次の2つのオプションがあります。There are two options for setting up authentication in a build task:

タスクランナーを使用しない場合Without a Task Runner

タスクランナーを 使用せず にビルドタスクで npm 認証を設定するには、次の手順に従います。To set up npm authentication in a build task without a task runner, follow the directions below.

  1. [ Azure Pipelines] を選択すると、[ ビルド ] ページに自動的に移動します。Select Azure Pipelines, it should automatically take you to the Builds page.

    [ビルド] タブ (TFS) に移動します。navigate to builds tab TFS

  2. 新しいパイプラインを作成する。Create a new pipeline.

    新しいビルドパイプラインの作成create new build pipeline

  3. ソース プロジェクトリポジトリ既定のブランチ を選択し、[ 続行] を選択します。Choose your source Project, Repository, and Default branch and select Continue.

  4. 空のジョブ で開始します。Start with an Empty job.

  5. 左側で、プラス記号 (+) を選択して ジョブ 1 にタスクを追加します。On the left side, select the plus sign ( + ) to add a task to Job 1. 右側で、[ パッケージ ] カテゴリを選択し、一覧から npm タスクを選択して、[ 追加] を選択します。On the right side, select the Package category, select the npm task from the list, and then choose Add.

    [ビルド] タブジョブにタスクを追加するbuild tab add task to job

  6. Npm インストール タスクを選択し、次 の package.jsで作業フォルダー を参照して選択します。Select the npm install task, then browse to and select your Working folder with package.json:

    ビルドパイプラインに npm インストールタスクを追加するAdd npm install task to build pipeline

  7. [ カスタムレジストリと認証] を展開すると、いくつかのオプションが表示されます。Expand Custom registries and authentication, here you have a few options:

    • Npmrc のレジストリRegistries in my .npmrc

      npmrc ファイル内のレジストリregistries in the npmrc file

      注意

      サービス接続を設定することにより、現在の組織/コレクションの外部にあるサービスに対して認証するための資格情報を選択でき ます。You can choose credentials to authenticate to services outside of your current organization/collection by setting up service connections.

    • ここで選択するレジストリRegistry I select here

      使用するレジストリRegistries to use

      このオプションを選択すると、選択したレジストリの資格情報を使用して一時的な npmrc が作成され、プロジェクトの npmrc がオーバーライドされます。When you choose this option, the task will create a temporary .npmrc with credentials for the registry you've selected and it will override the project's .npmrc. これは、特定のフィードに発行する場合に便利です。This is useful when you want to publish to a specific feed.

  8. [保存してキューに登録] を選択し、 [保存] を選択します。Select Save & queue, and then select Save.

ヒント

NPM Install ビルドタスクがエラー403で失敗する場合は、ビルドサービスが共同作成者として設定されていることを確認してください。If your NPM Install build task is failing with Error 403, then make sure you set your build service as a contributor. これを行うには、> Azure Artifacts にアクセスし、フィード > 設定-> アクセス許可-> ビルドサービスロールを共同作成者に設定します。To do so, go to Azure Artifacts -> Select your feed -> Settings -> Permissions -> set your build service role to contributor.

ヒントスクリーンショットtip screenshot

  1. [ ビルドとリリース] を選択し、[ ビルド] を選択します。Select Build and Release, and then choose Builds.

    [ビルド] タブ (TFS 2018) に移動します。navigate to builds tab TFS 2018

  2. 新しいパイプラインを作成する。Create a new pipeline.

    新しいパイプラインの作成create new pipeline

  3. ソース プロジェクトリポジトリ既定のブランチ を選択し、[ 続行] を選択します。Choose your source Project, Repository, and Default branch and select Continue.

  4. 空のジョブ で開始します。Start with an Empty job.

  5. 左側で、プラス記号 (+) を選択して ジョブ 1 にタスクを追加します。On the left side, select the plus sign ( + ) to add a task to Job 1. 右側で、[ パッケージ ] カテゴリを選択し、一覧から npm タスクを選択して、[ 追加] を選択します。On the right side, select the Package category, select the npm task from the list, and then choose Add.

    [ビルド] タブ npm タスクをジョブに追加builds tab add npm task to job

  6. Npm インストール タスクを選択し、次 の package.jsで作業フォルダー を参照して選択します。Select the npm install task, then browse to and select your Working folder with package.json:

    Npm インストールタスクの追加Add npm install task

  7. [ カスタムレジストリと認証] を展開すると、いくつかのオプションが表示されます。Expand Custom registries and authentication, here you have a few options:

    • Npmrc のレジストリRegistries in my .npmrc

      npmrc のレジストリregistries in the npmrc

      注意

      サービス接続を設定することにより、現在の組織/コレクションの外部にあるサービスに対して認証するための資格情報を選択でき ます。You can choose credentials to authenticate to services outside of your current organization/collection by setting up service connections.

    • ここで選択するレジストリRegistry I select here

      [レジストリ] オプションを選択します。registry I select here option

      このオプションを選択すると、選択したレジストリの資格情報を使用して一時的な npmrc が作成され、プロジェクトの npmrc がオーバーライドされます。When you choose this option, the task will create a temporary .npmrc with credentials for the registry you've selected and it will override the project's .npmrc. これは、特定のフィードに発行する場合に便利です。This is useful when you want to publish to a specific feed.

  8. [保存してキューに登録] を選択し、 [保存] を選択します。Select Save & queue, and then select Save.

タスクランナーを使用する (例: gulp work)With a Task Runner (e.g. make gulp work)

タスクランナーを使用する場合は、ビルドパイプラインの先頭に npm 認証 ビルドタスクを追加する必要があります。When using a task runner, you'll need to add the npm Authenticate build task at the beginning of your build pipeline. これにより、資格情報がプロジェクトの npmrc に挿入され、ビルドの有効期間に保持されます。This will inject credentials into your project's .npmrc and persist them for the lifespan of the build. これにより、後続のビルドステップで、 . npmrc で資格情報を使用できるようになります。This allows subsequent build steps to use the credentials in the .npmrc.

  1. [ Azure Pipelines] を選択すると、[ ビルド ] ページに自動的に移動します。Select Azure Pipelines, it should automatically take you to the Builds page.

    [ビルド] タブ (TFS 2018 秒) に移動します。navigate to builds tab TFS 2018 second

  2. 新しいパイプラインを作成する。Create a new pipeline.

    新しいビルドパイプラインnew build pipeline

  3. ソース プロジェクトリポジトリ既定のブランチ を選択し、[ 続行] を選択します。Choose your source Project, Repository, and Default branch and select Continue.

  4. 空のジョブ で開始します。Start with an Empty job.

  5. 左側で、プラス記号 (+) を選択して ジョブ 1 にタスクを追加します。On the left side, select the plus sign ( + ) to add a task to Job 1. 右側で、[ パッケージ ] カテゴリを選択し、一覧から npm 認証 タスクを選択して、[ 追加] を選択します。On the right side, select the Package category, select the npm Authenticate task from the list, and then choose Add.

    [ビルド] タブ npm タスクの追加builds tab add npm task

  6. フェーズ 1npm 認証 タスクを選択します。Select the npm Authenticate task underneath Phase 1:

    npm 認証タスクフェーズnpm auth task phase

  7. 認証する npmrc ファイル を参照して選択します。Browse to and select your .npmrc file to authenticate:

    npm 認証タスクnpm auth task

    注意

    サービス接続を設定することにより、現在の組織/コレクションの外部にあるサービスに対して認証するための資格情報を選択でき ます。You can choose credentials to authenticate to services outside of your current organization/collection by setting up service connections.

  8. Npm 認証 タスクを設定したら、 Gulp などのタスクランナーに他のビルドタスクを追加できます。After setting up your npm Authenticate task, you can add other build task(s) for your task runner like Gulp.

  1. [ ビルドとリリース] を選択し、[ ビルド] を選択します。Select Build and Release, and then choose Builds.

    [ビルド] タブの [team foundation services] に移動します。navigate to builds tab team foundation services

  2. 新しいパイプラインを作成する。Create a new pipeline.

    新しいビルドパイプラインボタンnew build pipeline button

  3. ソース プロジェクトリポジトリ既定のブランチ を選択し、[ 続行] を選択します。Choose your source Project, Repository, and Default branch and select Continue.

  4. 空のジョブ で開始します。Start with an Empty job.

  5. 左側で、プラス記号 (+) を選択して ジョブ 1 にタスクを追加します。On the left side, select the plus sign ( + ) to add a task to Job 1. 右側で、[ パッケージ ] カテゴリを選択し、一覧から npm 認証 タスクを選択して、[ 追加] を選択します。On the right side, select the Package category, select the npm Authenticate task from the list, and then choose Add.

    ビルド-タブ-ジョブの追加builds-tab-add-task-to-job

  6. フェーズ 1npm 認証 タスクを選択します。Select the npm Authenticate task underneath Phase 1:

    1 npm 認証のフェーズphase one npm auth

  7. 認証する npmrc ファイル を参照して選択します。Browse to and select your npmrc file to authenticate:

    認証する npmrc ファイルnpmrc file to authenticate

    注意

    サービス接続を設定することにより、現在の組織/コレクションの外部にあるサービスに対して認証するための資格情報を選択でき ます。You can choose credentials to authenticate to services outside of your current organization/collection by setting up service connections.

  8. Npm 認証 タスクを設定したら、 Gulp などのタスクランナーに他のビルドタスクを追加できます。After setting up your npm Authenticate task, you can add other build task(s) for your task runner like Gulp.

vsts-npm-auth のトラブルシューティングTroubleshooting vsts-npm-auth

次のようなエラーが表示されます。If you receive an error like:

  • コマンドプロンプト: 'vsts-npm-auth' is not recognized as an internal or external command, operable program or batch file.Command Prompt: 'vsts-npm-auth' is not recognized as an internal or external command, operable program or batch file.
  • PowerShell: vsts-npm-auth : The term 'vsts-npm-auth' is not recognized as the name of a cmdlet, function, script file, or operable program.PowerShell: vsts-npm-auth : The term 'vsts-npm-auth' is not recognized as the name of a cmdlet, function, script file, or operable program.

そのため、npm modules フォルダーがパスに含まれていない可能性があります。then it's likely that the npm modules folder is not in your path.

この問題を解決するには Node.js セットアップを再実行し、 Add to PATH オプションとその子オプションがインストール用に選択されていることを確認します。To fix this issue, rerun Node.js setup and ensure the Add to PATH option and its child options are selected for installation.

Node.js セットアップの [PATH に追加] インストールオプションAdd to PATH install option in Node.js setup

または、[パス] 変数を編集して、 %APPDATA%\npm (コマンドプロンプト) または (PowerShell) を追加することもでき $env:APPDATA\npm ます。Alternatively, you can edit the PATH variable to add %APPDATA%\npm (Command Prompt) or $env:APPDATA\npm (PowerShell).

次のステップNext steps