はじめに
Nodejsの自作モジュールなどをプライベートのNexusなどにデプロイする手順の備忘メモです。
バックエンド(Java)が専門でMavenやGradleなどはよく利用してきましたが最近Vue.jsについて触る事になりました。
npmでモジュールのデプロイは初めてだったので、忘れないようにまとめた次第です。
npmモジュールのデプロイ手順
独自のnpmモジュールをNexusとGitLab Package Registryのレジストリにデプロイ(Publish)する場合の手順です。
Nexusの場合
パッケージ管理ツールとしてNexusを利用する場合の手順です。
今回の手順ではローカルに立てたNexusを利用します。
1. npm Repositoryの作成
NexusのAdministration権限を持つユーザでログインし設定画面からリポジトリを作成します。
リポジトリタイプは npm (hosted) を選択します。
2. package.jsonの編集
npmプロジェクトのルートにあるpackage.jsonにモジュールを登録するNexusのリポジトリ情報を設定します。
また、privateフィールドをfalseに設定します。
{
"name": "vue-sample-app",
"version": "1.0.0",
"private": false,
省略
"publishConfig":{
"registry":"http://localhost:8081/repository/npm-sample-repo/"
}
}
3. 認証情報の登録
loginコマンドでNexusの認証情報を登録します。
レジストリへのモジュール登録権限を持たせたNexusユーザ(ユーザIDはtest)でログインします。
$ npm login --registry=http://localhost:8081/repository/npm-sample-repo/
npm notice Log in on http://localhost:8081/repository/npm-sample-repo/
Username: test
Password:
Email: (this IS public) test@test.com
Logged in as test on http://localhost:8081/repository/npm-sample-repo/.
ログインできると.npmrcに下記の認証情報が設定されます。
//localhost:8081/repository/npm-sample-repo/:_authToken=<トークン>
4. モジュールのPublish
publishコマンドを実行することでNexusにモジュールをデプロイします。
$ npm publish
npm notice
npm notice vue-sample-app@1.0.0
npm notice === Tarball Contents ==
省略
npm notice === Tarball Details ===
npm notice name: vue-sample-app
npm notice version: 1.0.0
npm notice filename: vue-sample-app-1.0.0.tgz
npm notice package size: 9.6 kB
npm notice unpacked size: 26.9 kB
npm notice shasum: 8fb8fe04c487a111daf0d52c2210d385567060be
npm notice integrity: sha512-UILaD9SLSKO0t[...]rJpZQ3Mv7RmGw==
npm notice total files: 32
npm notice
npm notice Publishing to http://localhost:8929/api/v4/projects/2/packages/npm/
+ vue-sample-app@1.0.0
Nexusを確認するとデプロイしたモジュールが正常に登録できていることが確認できました。
GitLab Package Registry
NexusだけでなくGitLab Package Registryにも同じモジュールをデプロイできるようにします。
こちらもローカルに立てたGitLabを利用して検証します。
1. デプロイトークンの作成
GitLabのモジュール管理対象リポジトリ画面の「Settings」から「Repository Settings」を開きます。
「Deploy tokens」を選択し、トークンを生成作成します。
トークン作成時にはScopeの「write_package_registory」をチェックする必要があります。
2. 認証情報の登録
.npmrcにGitLabのレジストリURLと作成したトークンを認証情報として追加で設定します。
# Nexusの認証情報
//localhost:8081/repository/npm-sample-repo/:_authToken=<Nexusトークン>
# GitLab Package Registryの認証情報
//localhost:8929/api/v4/projects/2/packages/npm/:_authToken=<GitLabトークン>
3. モジュールのpublish
NexusとGitLab Package Registryの両方をデプロイ先とする場合は下記の2通りの方法を利用します。
-
publishコマンド実行時にregistryを指定する。 -
.npmrcにregistryを設定する。
方法1：publishコマンド実行時にregistryを指定する方法
publishコマンドは実行時に登録先レジストリを指定できます。
こちらの方法を利用する場合、package.jsonのpublishConfigの設定は削除する必要があります。
publishConfigに設定が入っている場合、--registryオプションで指定してもpublishConfigのレジストリが優先されるためです。
デプロイコマンド例は下記のとおりです。
# Nexusへのデプロイ
$ npm publish --registry http://localhost:8081/repository/npm-sample-repo/
# GitLab Package Registryへのデプロイ
$ npm publish --registry http://localhost:8929/api/v4/projects/2/packages/npm/
publishConfigに複数レジストリを設定した場合の挙動
publishConfigに2つのレジストリを設定した場合、2番目（GitLab）のレジストリにモジュールがデプロイされ、Nexusのリポジトリにはデプロイされません。
========== NG例 ==========
"publishConfig":{
"registry":"http://localhost:8081/repository/npm-sample-repo/",
"registry":"http://localhost:8929/api/v4/projects/2/packages/npm/"
}
方法2：.npmrcにregistryを設定する方法
.npmrcにregistryを設定することでもデプロイ先を切り替えることができます。
こちらの方法を利用する場合は、package.jsonのpublishConfigにデフォルト登録先レジストリが設定可能です。
下記のようにpackage.jsonにNexusをデフォルト登録先レジストリとして設定します。
"publishConfig":{
"registry":"http://localhost:8081/repository/npm-sample-repo/"
}
また、.npmrcには@gitlab:registryでGitLab Package Registryを追加します。
//localhost:8081/repository/npm-sample-repo/:_authToken=NpmToken.245bb345-7f9c-3575-83db-3a4314dac77e
# GitLab Package Registryの認証情報
//localhost:8929/api/v4/projects/2/packages/npm/:_authToken=5NEWHiJrutdwzE-mJUyQ
# GitLab Package RegistryのURL
@gitlab:registry=http://localhost:8929/api/v4/projects/2/packages/npm/
レジストリ設定の完了後、publishコマンドを実行します。
# Nexusへのデプロイ
$ npm publish
# GitLab Package Registryへのデプロイ
$ npm publish scope=gitlab
オプションを付けずにpublishコマンドを実行するとデフォルトのNexusにモジュールが登録されます。
一方でpublishコマンドにオプションとしてscope=gitlabをつけた場合、登録先はGitLab Package Registryに切り替わります。
npmモジュールの参照手順
Nexusにデプロイしたモジュールを他のnpmプロジェクトから参照する手順です。
ついでにその他のモジュールもNexus経由で取得します。
1. Nexusリポジトリの作成
NexusにnpmのProxyリポジトリとGroupリポジトリを追加します。
リポジトリ構成は下記のイメージです。
Proxyの参照先リポジトリは https://registry.npmjs.org です。
2. registryの設定
.npmrcにモジュールの取得元URL設定を追加します。
例だとNexusのGroupリポジトリを指定し、認証情報も追加します。
トークンはデプロイの時に利用したトークンを利用します。
//localhost:8081/repository/npm-group/:_authToken=<Nexusトークン>
registry=http://localhost:8081/repository/npm-group/
4. モジュールのインストール
npm installコマンドを利用し取得対象のモジュール名を指定します。
下記例ではvue-sample-modというモジュールをインストールします。
$ npm install vue-sample-mod@1.0.0
インストールが正常に完了するとnode_modulesにモジュールが配置され、package.jsonにモジュールが追加されます。
{
省略
"dependencies": {
"pinia": "^2.1.7",
"vue": "^3.3.11",
"vue-router": "^4.2.5",
"vue-sample-mod": "^1.0.0"
},
省略
}