npm リポジトリを verdaccio で構築する / 桃缶食べたい。

npm リポジトリを verdaccio で構築する

verdaccio をインストールする

npm リポジトリにパッケージを publish する

npm リポジトリの npm モジュールを利用する

Apache 経由で verdaccio にアクセスする

前回 npm パッケージを作ってみましたが、npm でパッケージを作っていくとそれをリポジトリに公開したくなってきます。NodeJs には https://www.npmjs.com/ という公式リポジトリが存在しますが、一般公開したくない npm モジュールを置きたいとか、npm リポジトリ自体も自分で構築したいという要望もあるでしょう。
自前の npm リポジトリサーバーはいくつか存在するのですが、今回は構築の簡単な verdaccio を使ってみようと思います。

npm リポジトリ用のサーバーにログインし、verdaccio をインストールします。
npm モジュールとして提供されているので、npm コマンドでインストールできます。

# npm install --global verdaccio

verdaccio をインストールしたマシンをそのままサーバーとして使うので、--global を指定してグローバル環境にインストールします。
私の環境では /usr/lib/node_modules/verdaccio/ 配下にインストールされました。

続いて verdaccio を起動します。

$ verdaccio &

verdaccio は root 権限がいらないそうなので、一般ユーザーで起動します。

これで verdaccio の npm リポジトリにアクセスできるようになっています。
verdaccio を動かしているマシンの DNS を verdaccio.example.com とした場合、アクセス URL は http://verdaccio.example.com:4873 です。

このままでも利用できますが、4873 ポートを指定するのが面倒なので 80 ポートでアクセスできるように Apache を前に立ててみます。
ここでは Apache のバーチャルホストを利用し、以下のような設定ファイルを用意します。

$ cat /etc/httpd/conf.d/virtualhost/verdaccio.example.com.conf
<VirtualHost *:80>
  ServerName verdaccio.example.com
  ProxyPass  / http://localhost:4873/
</VirtualHost>

利用には事前にバーチャルホストと mod_proxy の有効化が必要になります。
設定後は apache の再起動も忘れずに。

verdaccio で作った npm リポジトリに npm パッケージをアップロードし、公開してみます。
試しに前回作った dotall を publish してみたいと思います。

ここからは手元の開発環境側での作業です。
npm パッケージのディレクトリ内で、まずは npm リポジトリのユーザーを設定します。
npm adduser コマンドの引数 --registry 値に、先程構築した npm リポジトリのサーバーを指定して実行します。

$ npm adduser --registry http://verdaccio.example.com
Username: momokan
Password:
Email: (this IS public) momokan@verdaccio.example.com
Logged in as momokan on http://verdaccio.example.com/.

公式の npm リポジトリである www.npmjs.com を利用する場合には、あらかじめ npm リポジトリの WEB サイトでアカウントを作っておく必要があります。しかし verdaccio を利用する場合には、publish する側で npm adduser した際に npm リポジトリにアカウントが作成されるので、事前に登録する必要はありません。

ホームディレクトリに作成される .npmrc の中を見てみると、指定した npm リポジトリへのアクセス用トークンが追記されていました。

$ cat ~/.npmrc
//verdaccio.example.com/:_authToken="aSN/p7CYdyXXXMetjH3jYA=="

あとは npm publish コマンドを実行すれば、npm リポジトリに npm パッケージがアップロードされます。
引数 --registry 値には同じく公開先 npm リポジトリのサーバーを指定します。

$ npm publish --registry http://verdaccio.example.com

<<2024, 11>>

構築した npm リポジトリに自作の npm パッケージを登録できたので、今度は別の npm パッケージから npm モジュールとして利用してみます。

前回の npm パッケージの作成手順そのままに、新しい npm パッケージとして dotall-user を作ります。

$ mkdir dotall-user
$ cd dotall-user

$ npm init

npm パッケージのエントリーポイントはデフォルトのまま index.js としました。

続いて npm リポジトリとして構築した http://verdaccio.example.com を追加します。

$ npm config set registry http://verdaccio.example.com

と実行すると npm リポジトリを追加できるのですが、こうするとグローバルな設定として npm リポジトリが追加されてしまいます。
現在開発中の npm パッケージでのみ有効な npm リポジトリとして参照したほうが安全なので、今回はこの npm パッケージ内でのみ有効な npm リポジトリとして設定したいと思います。
npm パッケージ内に .npmrc というファイルを作成し、以下のように設定を記載します。

$ echo "registry=http://verdaccio.example.com" > .npmrc

それでは設定した npm パッケージから、publish した npm モジュールの dotall をインストールします。

$ npm install dotall --save

package.json を確認してみると、dependencies として dotall が追加されているのがわかります。
node_modules ディレクトリ内にはインストールした dotall が実際に配置されています。

ここまでくれば前回 jquery を npm モジュールとして使ったように、dotall を npm モジュールとして使うことができます。
新しく作っている dotall-user のエントリーポイントである index.js を以下のように実装してみました。

require('dotall');

var dotall = new Dotall();

dotall.load(
    {
        "colors": [
            "rgb(255, 255, 255)",
            "rgb(230, 190, 190)",
            "rgb(210, 170, 170)"
        ],
        "images": [
            {
                "pixels": [
                    " 2222222 ",
                    "200000002",
                    "210101012",
                    "200000002",
                    " 2121212 ",
                    "  2 2 2  "
                ]
            },
            {
                "pixels": [
                    "  22222  ",
                    " 2000002 ",
                    "201000102",
                    " 2000002 ",
                    "  20202  ",
                    " 212 212 "
                ]
            },
            {
                "pixels": [
                    "  21212  ",
                    " 2000202 ",
                    "201010102",
                    " 2020002 ",
                    "  21212  "
                ]
            }
        ]
    }
);

今回も HTML から読み込んでみたいと思います。
index.html として以下のコードを用意しました。

$ cat index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
</head>
<body style="background: #E0E0E0;">

<script src="dotall-user-1.0.0.js"></script>

</body>
</html>

読み込んでいるのは browserify でビルドした dotall-user-1.0.0.js という JavaScript ファイルです。

browserify をインストールしてビルドしてみます。

$ npm install browserify --save-dev
$ $(npm bin)/browserify index.js -o dotall-user-$(node -p "require('./package.json').version").js

あとは index.html をブラウザで表示すれば、この dotall-user のロジックから dotall の機能を利用出来ているのがわかると思います。

$ firefox index.html

前回とは少し違った色の何かが画面内を這い回っていれば完了です。
browserify する際には dotall が依存している jquery もしっかりまとめてビルドされていますね。このあたりがパッケージの依存性管理による恩恵になります。
WEB 技術, JavaScript コメント (0) 2018/04/12 20:06:02