概要
今回も備忘録です。
.npmrcってなんのために使うんぞ？ってなっていたのですが、実際に業務で必要になる場面があったので、その時を思い出しながら書いてみます。
本記事でのゴール
タイトルの通りではありますが、.npmrcと呼ばれるファイルを作り、自分が所属している組織が所有し、かつ外部に公開されていないようなパッケージを利用できるように設定することをゴールとします。
今回の記事では、GitHub Packagesに公開され、npmに関連付けられたパッケージを対象とします。
こちらのパッケージ設定については、公式にドキュメントがありましたので、興味があればご覧ください。
.npmrcって？
npm（もしくはyarn）を利用する際の設定ファイルとなります。
npmは、.npmrcに設定された設定や環境変数を読み込んで利用することが可能です。
（僕の主観でしかないですが）基本的には.npmrcは書かなくてもOKで、npmにデフォルトで設定されているコマンドや設定を利用すればOKだと思います。何かしら手を加えたくなった際に.npmrcで設定を上書きする感じですね。
今回の狙いはPrivate Packageを読み込む設定を行うことなので、詳細な設定などは省きます。気になる方はこちらをご覧ください。
Private Packageって？
文字通り、外部には公開されていないパッケージのことです。
例えば、
社内エンジニア「自社でテンプレートとして使うUIライブラリが完成したで！」
社内エンジニア「でも、外部には公開せずに関係者だけで使いたいなぁ...」
なんて場面で作られると思います。
自社のものでなかったとしても、
お客様「これから一緒に開発よろしくやで！」
お客様「ウチらのサービスは全部このUIライブラリ使ってるから」
お客様「今回の開発もこのライブラリを使ってもらうやで」
お客様「あ、Privateなパッケージだから認証設定しといてな！」
こんな場面もありそうですよね。
このようなときに、
ぼく「パッケージがインストールできない！？」
ぼく「パッケージが見つからないのだが...」
なんてことが起きないよう、認証の設定を行えるようにしておきましょう。
認証に必要なもの
認証には「GitHub Access Token」を使います。
Private RepositoryをCloneしたり、変更をPushする際に必要となって生成した方もいるかもしれません。今回も似たような感じです。
トークンの生成はこちらから行ってください。
トークンの設定・有効期限はお好みですが、Private Packageの読み込みが目的なので、必ずread:packagesにチェックを入れておきましょう。
認証のための.npmrcの書き方
下記のように記載します。
//npm.pkg.github.com/:_authToken=XXX
@OWNER:registry=https://npm.pkg.github.com
authToken=XXXには、GitHubで生成したアクセストークンを設定します。
@OWNERには、取得したいパッケージの所有者名（ユーザーもしくはOrganization）を設定します。
この部分の意味合いとしては、
ぼく「この団体が登録しているパッケージが欲しいんすけど...」
npm「このパッケージの所有元に所属しとるんならええで」
ぼく「所属してます〜。これが認証用のアクセストークンです。」
npm「拝見するやで。...ちゃんと所属しとるみたいやな！ヨシ！」
といった感じです。基本的にはOrganization名を入れる形になるかと。
この部分の設定が上手くできていれば、Privateなパッケージも使えるようになってるかと思います。
ちょいと一工夫
パッケージの取得はできるようになりましたが、ちょっとした問題があります。
今回設定した.npmrcには、GitHubで作成したアクセストークンの情報が入っています。アクセストークンは、トークンの持ち主を認証し、権限を確認するための重要のものですので、そういった情報が.npmrcに存在する場合は、.gitignoreで.npmrcを無視するようにして、情報をリポジトリ上に残さないようにするのがベターです。
こういった場合、チームでの開発となると、開発を行う人たち全員が.npmrcの設定を行う必要があり、やや面倒です。
そこで、.envファイルに環境変数としてアクセストークンを設定し、パッケージを追加する際に自動的に.npmrcを生成できるように工夫してみます。
.envファイルは.npmrcと比べて知名度（？）も高いでしょうし、
先輩「認証必要だから、トークン作ってここに記載しといてや！」
という説明だけでOKなら、それに越したことはないと思います。
ファイルのパスなどは、ご自身の環境に合わせて修正していただければと思います。
.npmrcテンプレートファイル
生成用のテンプレートファイルを作成しておきます。
@OWNERの部分は取得したいパッケージの所有者名に置き換えてください。
//npm.pkg.github.com/:_authToken=
@OWNER:registry=https://npm.pkg.github.com
環境変数設定
.envは必ず.gitignoreに設定し、リポジトリ上に公開するためのサンプルファイルを代わりに作成しておきましょう。（アクセストークンをリポジトリ上に残さないため）
#github access tokenの設定
GITHUB_ACCESS_TOKEN=TESTTOKEN
#github access tokenの設定
GITHUB_ACCESS_TOKEN=XXXXXX
.npmrc生成用スクリプト
このスクリプトでは、
-
.envに記載した環境変数の読み込み - テンプレートファイルから
.npmrcを生成 - 生成した
.npmrcに環境変数の値を設定
を行なっています。
source ./.env
\cp -r ./.npmrc.sample ./.npmrc
sed -ie "s/_authToken=/_authToken=$GITHUB_ACCESS_TOKEN/" ./.npmrc
パッケージインストール時にスクリプトを実行
package.jsonに以下のスクリプトを追加します。
"scripts": {
"preinstall": "bash ./scripts/generate-npmrc.sh",
},
npmスクリプトには、preプレフィックスをコマンド前につけることで、特定のコマンド前に自動的に実行するコマンドを設定できるという、非常に便利な機能があります。
今回の設定例では、npm installを実行する直前に、先ほど作成した.npmrc作成用のスクリプトを自動的に実行してくれるようにしています。
ここまで設定すれば、パッケージを追加する際に自動的に.npmrcが生成されるようになっているかと思います。
今回の設定例では、以下のような.npmrcが生成されます。
//npm.pkg.github.com/:_authToken=TESTTOKEN
@OWNER:registry=https://npm.pkg.github.com
おわりに
タイトルに〇〇編と書いてますが、続編の予定はございません。
以上です。👼