Renovateでnpmパッケージのバージョン管理をしよう
どうも、フロントエンドエンジニアのおいなりです。
今日、フロントエンドの開発において業務でも個人制作でも、npmパッケージを使わないという選択肢はほぼないと思います。
npmはめちゃめちゃ便利ですが、バージョン管理はかなり手間ですよね。
GitHubでリポジトリ管理をしていると、少し古くなると下記のような注意文言（アラート）が表示されます。
こういう表示をしてくれるのは悪いことではなく、むしろ良いことなのですが。
「アップデートしなきゃ」って意識するし、アップデートって腰が重いし、気にし続けてしまうのは精神衛生上いいものではありません。
そこでおすすめしたいのがnpmパッケージ（モジュール）のバージョン管理をしてくれるツールのRenovateです。
Renovate
Renovateとは、package.jsonを見て古くなっているものがあれば、自動的にそのパッケージのアップデートのプルリクエストを作ってくれるものです。
設定によっては、パッチ・マイナーアップデートはプルリクエストをまとめたり、プルリクエストを作ってくれるスケジュールを指定できたり、プルリクエストのターゲットブランチを指定できたりします。
その説明は後ほどするとして、基本的な使い方を見てみましょう。
使い方としては、GitHubやGitLabなどと連携させて使います。今回は例としてGitHubと連携させます。
GitHubと連携させよう
まず、下記のURLにアクセスします。
今回はnpmパッケージのバージョン管理のために使いますが、上記URLのページに「Multi-language Dependency Automation」とあるように、Java/PHP/Rubyなどでも利用可能です。
ページ下部にある、下記画像部分の「Install it for free」をクリックします。
個人利用の場合は、パブリックリポジトリであれプライベートリポジトリであれ、無料で利用可能です。
※ 無料ではなくなる可能性もあるのでそれは自己責任でお願いします。
下記のようなページが表示されます。
「Complete order and begin installation」をクリックします。
下記のようなページに遷移します。
「All repositories」もしくは「Only select repositories」のどちらかを選択します。
ここは個人の裁量で問題ないです。
選択したら、「Install」をクリックします。
これで設定は完了です。
作成された初プルリクエストを見てみよう
先程の設定から少々時間がかかるので、小1時間ほど気長に待ちましょう。
実際のプルリクエストを確認していきます。
設定がちゃんとできていれば、記念すべき1つ目のプルリクエストが作成されます。
この1つ目のプルリクエストでは、「Configure Renovate」というタイトルになっています。
そのタイトル通り今後Renovateを使っていく上での初期設定のようなもので、Renovateの設定ファイルである「renovate.json」を追加するプルリクエストです。
この設定ファイルの「renovate.json」に追記して、カスタマイズしてきます。
2つ目以降のプルリクエスト
Renovateを導入して、1つ目のプルリクエストは「renovate.json」を追加するものですが、2つ目以降は実際のバージョン管理のためのプルリクエストになります。
例として、いくつか見てみましょう。
npm i <パッケージ名>でインストールすることがほとんどだと思いますが、これでインストールすると「package.json」のバージョン記載は^9.4.7のように固定されていないものになります。
Renovateを使う場合には、バージョンの記載を固定にしないといけないようで。
2つ目のプルリクエストはバージョンの記載を固定にするものになります。
Pin dependencies
1つ目2つ目のプルリクエストが取り込まれると、対象のパッケージごとのプルリクエストが作られるようになります。
Update dependency webpack-cli to v3.3.10
プルリクエストを確認してマージしよう
わかっているとは思いますが、プルリクエストが作られたからと言って、全てマージしていいわけではありません。
マイナーアップデートは無意識的にマージしてしまってもおそらく問題ないかなと思いますが、どういうアップデートがされているかくらいは確認したほうが得策でしょう。
プロジェクト内のコードに含まれるパッケージなら尚更です。
メジャーアップデートに関しては、破壊的変更も大いに有り得るので絶対確認しましょう。
どこで確認すればいいのかというと、下記プルリクエストの画像の中に「Release Notes」というものがあり、対象パッケージのアップデート内容がまとまっているのでそれで確認が可能です。
「Release Notes」で確認が済んだら、次は開発環境を立ち上げて確認しましょう。
目視で挙動を確認するのは必須です。
どちらも済んだらマージしましょう。
設定ファイル「renovate.json」をカスタマイズしよう
1つ目のプルリクエストで作られた「renovate.json」の内容は、最低限の設定しか書かれていません。
なので、プルリクエストのターゲットとなるブランチはmasterになっているし、パッケージごとに無尽蔵にプルリクエストが作られていきます。
こうなると結局、最初に述べた下記のような意識になってしまいます。
「アップデートしなきゃ」って意識するし、アップデートって腰が重いし、気にし続けてしまうのは精神衛生上いいものではありません。
設定に関しては、下記にすべて書かれているので、こちらを参考にしてください。
Configuration Options | Renovate Docs
設定ファイルを更新すると、それまでに作られた更新後の設定ファイルにそぐわないプルリクエストは勝手にクローズしてくれるので、一旦放置でもいいと思います。
僕の設定ファイル
僕は個人的なリポジトリにしか利用していないので、そこまで凝った設定はしていませんが下記のような「renovate.json」にしています。
上から、
-
ターゲットとするブランチを「develop」
- マージしてバグがおきても、masterには影響がない。
-
プルリクエストを作るのは「毎週末」
- 作業は平日の業後もしくは週末なので、日々更新されなくてもいい。
-
minorアップデートはグループ化、グループ名は「all dependencies」
- パッチ・マイナーアップデートは「Update all dependencies」という1つのプルリクエストにまとめてくれる。
{
"baseBranches": ["develop"],
"schedule": "every weekend",
"minor": {
"groupName": "all dependencies"
},
"extends": [
"config:base"
]
}まとめ
アップデートはしなきゃなと思いつつ、下記のような手順で更新するのはやはり腰が重く。
npm outdatedコマンドでアップデートできるパッケージの確認- それぞれのパッケージの公式アップデート情報を確認
- 問題なければアップデート
- 開発環境で確認
開発環境で確認することはRenovateを導入しても必須ですが、だいぶパッケージのアップデート作業が楽になりました。
公式ページ・ドキュメントにここに書いてあることはすべて書いてあるので、参考にしてください。