🤢

Github Packagesを使ってリポジトリをnpmパッケージ化するまで

2023/02/12に公開

GithubPackagesを使用して、npmパッケージ化し、ソースコードを管理したかったので、その紹介をします。

上記の要件の背景としては、マイクロサービス化したソースコード間で一部のソースコードを共有する必要があり、上記の方法を採用することにしました。

最近は、マイクロサービス化した複数のソースコードを一つのリポジトリにまとめて管理するモノレポという手法を割と採用されている方が多いように感じますので、その辺はプロジェクトのコストパフォーマンスを考慮しながら決定すると良いと思います。

ソースコード

下記に完成品のソースコードが載せてあります。
https://github.com/m-ishioka/npm-github-packages

作成方法

パーソナルアクセストークンの作成

https://github.com/settings/tokens
上記のページにアクセスしnpmパッケージ登録用のパーソナルアクセストークンを作成します。
権限は、githubpackagesを操作するため 「write:packages」を選択してください。

トークンを発行したら控えておきます。(あとで使用します。)

リポジトリの作成 & クローン

まずgithubPackagesでソースコードをnpmパッケージとして公開するためには、リポジトリの作成が必要になりますので、リポジトリを作成し、ローカルへクローンします。

package.jsonの作成

以下の様なpackage.jsonを作成します。

package.json
{
  "version": "1.0.0",
	"name": "@m-ishioka/npm-github-packages",
	"repository": {
		"type": "git",
		"url": "https://github.com/m-ishioka/npm-github-packages.git"
	},
  "publishConfig": {
		"registry": "https://npm.pkg.github.com"
	}
}

それぞれのプロパティの説明は、公式のdocsを引用させていただきます。

version

If you plan to publish your package, the most important things in your package.json are the name and version fields as they will be required. The name and version together form an identifier that is assumed to be completely unique. Changes to the package should come along with changes to the version. If you don't plan to publish your package, the name and version fields are optional.

Version must be parseable by node-semver, which is bundled with npm as a dependency. (npm install semver to use it yourself.)

パッケージをバージョン管理し、現在のパッケージの状態を一意に識別するための情報になります。
初回に作成する場合は、「1.0.0」がデフォルトになっています。

name

If you plan to publish your package, the most important things in your package.json are the name and version fields as they will be required. The name and version together form an identifier that is assumed to be completely unique. Changes to the package should come along with changes to the version. If you don't plan to publish your package, the name and version fields are optional.

パッケージの名称になります。公式に詳しい設定のルールが乗っているので気になる方はご覧になってみてください。
このnameプロパティとversionプロパティを含むことによってnpmは、パッケージを一意と識別するようです。

repogitory

Specify the place where your code lives. This is helpful for people who want to contribute. If the git repo is on GitHub, then the npm docs command will be able to find you.

リポジトリの置き場を示します。
本記事では、githubにリポジトリを配置していますので、以下のような記述になります。

package.json
{
	"repository": {
		"type": "git",
		"url": "<リポジトリのURL>"
	},
}

pablishConfig

This is a set of config values that will be used at publish-time. It's especially handy if you want to set the tag, registry or access, so that you can ensure that a given package is not tagged with "latest", published to the global public registry or that a scoped module is private by default.

See config to see the list of config options that can be overridden.

公開時の構成を記載するプロパティになります。
今回は、GithubPackagesをパッケージレジストリとして利用しますので、以下のようにします。

package.json
{
  "publishConfig": {
		"registry": "https://npm.pkg.github.com"
	}
}

packageをpublicに公開する場合は、別途ライセンスなどの情報も必要になってくるかとは思いますが、一旦内部で使用するパッケージで最低限必要な情報は以上ですので、気になる方は[公式doc](https://docs.npmjs.com/cli/v9/configuring-npm/package-json)を参考にされてみてください。

.npmrcファイルの作成

.npmrcとは、npmコマンドを実行する時の設定ファイルになります。
基本は、npmをインストールしたときにルートに作成されますが、プロジェクト毎など特定の場所で振る舞いを変えたい場合などは、プロジェクト毎に配置して設定をオーバーライドすることも可能です。

本記事では、パッケージレジストリにアクセスする際の設定情報を記載するため、配置します。

.npmrc
//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}

書き方は、//<レジストリのドメイン>/:_authToken=<トークン>の様な形式です。

トークンは、リポジトリの情報として管理したくないため環境変数で読み込む形をとります。

npm パッケージを公開

先ほどまでに作成した、package.jsonと.npmrcがあるディレクトリのルートでターミナルを起動し、以下のコマンドを実行しnpmパッケージを公開します。
ここでのトークンは、先ほど作成したgithubpackages操作用のパーソナルアクセストークンになります。

NODE_AUTH_TOKEN=<トークン> npm publish

以下の様な出力が確認できたら公開完了です。

githubにアクセスしpackagesタブを開きパッケージが公開されていることを確認してみましょう。

作成したパッケージのインストール方法

公開したパッケージを利用するには、公開する際に使用した同等の権限のパーソナルアクセストークンとレジストリの設定が必要になります。

.npmrc
//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}
@m-ishioka:registry=https://npm.pkg.github.com/

インストールする場合は、トークンの設定に加えインストールする際のレジストリの指定も必要になるので、2行目の指定を加えます。
<名前空間(今回の場合は、自身のgithubアカウント名か組織名になる)>:registry=<レジストリのURL>

設定したらローカルにて普段パッケージをインストールしているのと同じようにインストールが可能になります。


次項では、githubActionsによるパッケージ公開のパイプライン構築を紹介できたらと思います。

参考

https://docs.github.com/ja/packages
https://docs.npmjs.com/cli/v9/configuring-npm/package-json

Discussion

ログインするとコメントできます