Azure DevOpsで作ったnpmリポジトリからyarn installできなかった問題

前置き

プロジェクトでAzure Artifacts（gradle、npmなどのパッケージのリポジトリ）を使うことになり、yarn installでnpmパッケージをインストールしようとした際、公式の方法ではうまく動作しなかったので、その解決方法について、記述します。

Azure公式の方法

公式の方法によると、.npmrcへ以下内容を記述したうえで、パッケージをインストールすればよいことになっています。
次の二つの項目は、自動生成された設定に実際の内容が記述されます。

• [Organazation Name] Azureで作成した組織名
• [User Name] Azureのユーザー名

.npmrc

registry=https://pkgs.dev.azure.com/[Organazation Name]/_packaging/internal%40Local/npm/registry/
always-auth=true

; begin auth token
//pkgs.dev.azure.com/[Organazation Name]/_packaging/internal%40Local/npm/registry/:username=[Organazation Name]
//pkgs.dev.azure.com/[Organazation Name]/_packaging/internal%40Local/npm/registry/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//pkgs.dev.azure.com/[Organazation Name]/_packaging/internal%40Local/npm/registry/:email=npm requires email to be set but doesn't use the value
//pkgs.dev.azure.com/[Organazation Name]/_packaging/internal%40Local/npm/:username=[User name]
//pkgs.dev.azure.com/[Organazation Name]/_packaging/internal%40Local/npm/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//pkgs.dev.azure.com/[Organazation Name]/_packaging/internal%40Local/npm/:email=npm requires email to be set but doesn't use the value
; end auth token

しかし、上記の方法ではnpm installは行えますが、yarn installすることができません。
yarn install時に出力されるエラーログは次のようになります。

$ yarn install

yarn-error.log

Trace:
  Error: https://pkgs.dev.azure.com/[Organazation Name]/_packaging/internal@Local/npm/registry/@[Organazation Name]/[Package]/-/[Package]-0.0.1.tgz: Request failed "401 Unauthorized"
      at ResponseError.ExtendableBuiltin (/opt/yarn-v1.22.4/lib/cli.js:696:66)
      at new ResponseError (/opt/yarn-v1.22.4/lib/cli.js:802:124)
      at Request.<anonymous> (/opt/yarn-v1.22.4/lib/cli.js:67057:16)
      at Request.emit (events.js:314:20)
      at Request.module.exports.Request.onRequestResponse (/opt/yarn-v1.22.4/lib/cli.js:141625:10)
      at ClientRequest.emit (events.js:314:20)
      at HTTPParser.parserOnIncomingClient (_http_client.js:640:27)
      at HTTPParser.parserOnHeadersComplete (_http_common.js:119:17)
      at TLSSocket.socketOnData (_http_client.js:509:22)
      at TLSSocket.emit (events.js:314:20)

原因

1. .npmrc内でリポジトリと認証方式のスコープを指定していなかった。
2. Azure公式の方法では、@を%40とURLエンコードしているが、これをyarnがデコードしていなかった。

解決方法

.npmrcを以下の点を修正して、yarn installを行う。¹

1. スコープを指定する。
2. %40となっている箇所を@に変える。

修正後の.npmrc

@[Organaization Name]:registry=https://pkgs.dev.azure.com/[Organazation Name]/_packaging/internal@Local/npm/registry/　# スコープ（@[Organization Name]）を付ける。%40となっている箇所を@へ変更、以下も同様にする。
@[Organaization Name]:always-auth=true　# スコープ（@[Organization Name]を付ける）

; begin auth token
//pkgs.dev.azure.com/[Organazation Name]/_packaging/internal@Local/npm/registry/:username=[Organazation Name]　#
//pkgs.dev.azure.com/[Organazation Name]/_packaging/internal@Local/npm/registry/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//pkgs.dev.azure.com/[Organazation Name]/_packaging/internal@Local/npm/registry/:email=npm requires email to be set but doesn't use the value
//pkgs.dev.azure.com/[Organazation Name]/_packaging/internal@Local/npm/:username=[User name]
//pkgs.dev.azure.com/[Organazation Name]/_packaging/internal@Local/npm/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//pkgs.dev.azure.com/[Organazation Name]/_packaging/internal@Local/npm/:email=npm requires email to be set but doesn't use the value
; end auth token

1. 修正後の.npmrcであってもnpm installは行えます。 ↩