非公開パッケージをインストールする

Cloudflare Pages はカスタムパッケージレジストリに対応しており、アプリケーションに非公開の依存関係を含められます。この手順は Node のパッケージマネージャー兼レジストリである npm ↗ を対象にしますが、同じ方法は他のレジストリツールにも適用できます。

Pages プロジェクトの Settings で 環境変数 を調整します。既存のサイトはいつでも変更できます。新しいプロジェクトでも、これらの設定を最初から指定できます。いずれの場合も、プロジェクト設定の変更は次のデプロイまで反映されません。

どのパッケージレジストリにも、新しいアクセストークンを発行する手段があります。他の CI/CD プラットフォームと同様に、Pages 専用のトークンを新しく作成することをおすすめします。

npm では、Web サイトでトークンを作成・確認 ↗ するか、npm CLI を使えます。CLI をローカルにセットアップして認証済みであれば、ターミナルで次のコマンドを実行します。

# Verify the current npm user is correct
npm whoami

# Create a readonly token
npm token create --read-only
#-> Enter password, if prompted
#-> Enter 2FA code, if configured

UUID 文字列のような読み取り専用トークンが生成されます。この値は後の手順で使うので保存してください。

このセクションは、npm レジストリの非公開モジュールだけを使っているアプリケーション向けです。

Pages プロジェクトの Settings > Environment variables で、Production と Preview の各環境に NPM_TOKEN という 環境変数 を追加し、作成した読み取り専用トークン を値として貼り付けます。

デフォルトでは、npm は NPM_TOKEN という環境変数を探します。カスタムレジストリエンドポイント を定義していないため、npm レジストリが使われます。自分とチームメイトが、非公開パッケージへのアクセス権がある npm アカウントで認証されていれば（npm whoami と npm login を参照）、ローカル開発はこれまでどおり動作します。

複数のレジストリを使う場合、プロジェクトのルートに .npmrc ↗ 設定ファイルを定義する必要があります。.npmrc の例は次のとおりです。

@foobar:registry=https://npm.pkg.github.com
//registry.npmjs.org/:_authToken=${TOKEN_FOR_NPM}
//npm.pkg.github.com/:_authToken=${TOKEN_FOR_GITHUB}

ここでは、@foobar スコープのすべてのパッケージが GitHub Packages レジストリに向けられます。各レジストリには、それぞれの環境変数名でアクセストークンが割り当てられます。

Pages プロジェクトでは、すべての環境に対応する 環境変数 を定義する必要があります。この例では、TOKEN_FOR_NPM に 読み取り専用の npm トークン の値を、TOKEN_FOR_GITHUB に personal access token ↗ を設定します。

新しい .npmrc ファイルでローカル開発が動かなくなった場合は、次の追加変更が必要です。