プライベート npm パッケージを CI でインストールできるようにする方法

2022/12/21

はじめに

【全部俺】 Web フロントエンドエンジニアのメモ Advent Calendar 2022 21 日目の記事です。

npm private packages や GitHub Packages などのプライベート npm パッケージをインストールする場合の CI/CD の設定方法を解説します。

背景

デザインシステムを構築した際、プライベート npm パッケージを GitHub Packages 経由で配信することにしたのですが、CI/CD での依存関係インストールに苦戦したので、各プラットフォームでの設定方法を解説します。 (2022年12月15日現在)

ローカル開発環境

意外と忘れてしまうので、まずはローカル環境での設定について。

package.json と同じディレクトリに .npmrc ファイルを追加し、下記のような設定を行います。

忘れずに .gitignore に .npmrc を追加しましょう！

# @octo-org/ の場合は GitHub Packages を参照するように設定
@octo-org:registry=https://npm.pkg.github.com/
# トークンを設定 (GitHub の場合は read:packages 権限の付いた PAT を使用)
//npm.pkg.github.com/:_authToken=accessToken

参考

npmrc | npm Docs

https://docs.npmjs.com/cli/v9/configuring-npm/npmrc

GitHub Actions

actions/setup-node アクションで、 registry-url と scope を設定します。

npm ci や yarn install する際には NODE_AUTH_TOKEN を環境変数として渡します。

環境変数を渡す際は GitHub の Environment Secret を使用するようにしましょう。

steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
  with:
    registry-url: "https://npm.pkg.github.com"
    scope: "@octo-org"
- run: npm ci
  env:
    NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}

参考

setup-node/advanced-usage.md at main · actions/setup-node

https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#use-private-packages

暗号化されたシークレット - GitHub Docs

https://docs.github.com/ja/actions/security-guides/encrypted-secrets

CircleCI

.npmrc を作成することで設定します。

インストール後に不要になったら .npmrc を削除する処理を設定したほうが良いかもしれません。

steps:
  - checkout
  - run:
      name: Set npm config
      command: |
        npm config set "@octo-org:registry" "https://npm.pkg.github.com/"
        echo "//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}" >> ~/.npmrc

参考

Publishing npm Packages Using CircleCI

https://circleci.com/blog/publishing-npm-packages-using-circleci-2-0/

CodeBuild (Docker)

通常の変数を使用してしまうとコンテナに保持され docker history などを用いることでアクセストークンが漏洩する可能性があるので危険です。

代わりに secret 引数を使用します。

Dockerfile

RUN --mount=type=secret,id=npmrc,dst=.npmrc npm ci

version: 0.2
env:
  variables:
    DOCKER_BUILDKIT: 1
phases:
  pre_build:
    commands:
      - echo "@octo-otg:registry=https://npm.pkg.github.com/" > .npmrc && echo "//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}" >> .npmrc
  build:
    commands:
      - docker build -t $REPOSITORY_URI:$ENV_NAME --secret id=npmrc,src=.npmrc .

参考

Dockerfile reference | Docker Documentation

https://docs.docker.com/engine/reference/builder/#run---mounttypesecret

まとめ

プライベート npm パッケージを CI/CD でインストールできるようにする方法について解説しました。

マイクロフロントエンドやデザインシステムの文脈から必要な機会が増えてきそうです。

日々ベストプラクティスは変わっていくと思うので 1 年に一回くらい見直すタスクを用意しても良さそうですね。