【Nuxt.js】GitHubからセキュリティアラートが届いたときの対応【package.json】

はじめに

GitHubでソース管理を行っているプロジェクトにpackage.jsonのセキュリティアラートが届いたときの対応を記載します。

今回はNuxt.jsで作成したプロジェクトでの対応記録のため、タイトルなどに「Nuxt.js」と記載していますが、npm/yarnでパッケージ管理を行っているプロジェクトであれば適用可能です。

また、Nuxt.jsではnpm/yarnのどちらでもパッケージ管理が行えるため、両方の手順を記載します。

package.jsonのバージョン指定方法

まず前提知識として、package.jsonのバージョン指定方法を理解しておく必要があります。

以下の記事が大変よくまとまっているため参照してください。

npm

npm update

以下のコマンドでパッケージのアップデートが行えます。

$ npm update

このコマンドは、package.jsonで指定した範囲のバージョンで更新があればアップデートを行います。

つまり、package.jsonで指定しているバージョンが最新バージョンの範囲外であれば、このコマンドを実行しても最新バージョンにはアップデートされないことになります。

例えば、以下のようがpackage.jsonがあるとします。

{
  "dependencies": {
    "foo": "^1.0.0"
  }
}

このバージョン指定方法は、「1.0.0以上2.0.0未満のバージョン」という意味になります。

fooパッケージの最新バージョンが2.0.0以上の場合、npm updateを行っても最新バージョンにはアップデートされません。

このような場合、package.jsonのバージョン指定方法を変更してからnpm updateを行えば最新バージョンにアップデートできますが、多くのパッケージに対してバージョン指定のメンテナンスを行っていくのは大変な作業です。

npm-check-updates

npm-check-updatesを使用すれば、packge.jsonのバージョン指定を最新バージョンにしてくれます。

npm-check-updatesをインストールするには以下のコマンドを実行します。

$ npm install -g npm-check-updates

インストールできたら、package.jsonのあるディレクトリで以下のコマンドを実行します。

$ npm-check-updates -u
# or
$ ncu -u

あとは以下のコマンドでパッケージのアップデートを行うだけです。

$ npm update

npm-check-updatesは無条件にすべてのパッケージを最新バージョンに変更します。その結果メジャーバージョンにアップデートされ、思わぬ挙動が起こる可能性もあるので注意してください。

yarn

yarn upgrade

以下のコマンドでパッケージのアップデートが行えます。

$ yarn upgrade

このコマンドは、package.jsonで指定した範囲のバージョンで更新があればアップデートを行います。

npm update同様、最新バージョンが指定の範囲外の場合、最新バージョンにはアップデートされません。

yarn upgrade --latest

package.jsonで指定した範囲外のバージョンまでアップデートしたい場合、以下のコマンドを実行します。

$ yarn upgrade --latest

package.jsonのバージョン指定を最新に変更し、アップデートも行います。

無条件にすべてのパッケージを最新バージョンに変更します。その結果メジャーバージョンにアップデートされ、思わぬ挙動が起こる可能性もあるので注意してください。

関連記事

【Nuxt.js+Firebase】core-js関連のエラーが大量に出力される事象の原因と対処
# はじめに Nuxt.jsプロジェクトでFirebaseを使っていると、テストサーバー起動時やデプロイ時にcore-js関連のエラーが大量に出力されることがあります。 なぜエラーが出力されるのか、どうすれば解消できるのかをまとめました。 [...]
2020年6月9日 10:30
【カテゴリ別】Nuxt.js関連の記事まとめ
# はじめに Nuxt.js関連の記事が増えてきたので、この記事でカテゴリ別にまとめたいと思います。 # 最初の一歩 - [Nuxt\.jsプロジェクトの作成から動作確認までの手順](https://www.autovice.jp/art [...]
2020年3月17日 10:40
Nuxt.jsプロジェクトでFirebase AuthenticationのGoogle認証でログインし、認証情報をLocal Storageに保存する
# はじめに この記事ではFirebase AuthenticationのGoogle認証を利用してログイン機能を作成し、そのログイン情報をブラウザのLocal Storageに保存する方法を解説します。 この記事で作成したNuxt.jsプ [...]
2020年3月17日 10:21
Nuxt.jsプロジェクトでFirebase Storageにアップロードした画像を変更/削除する
# はじめに 数回に分けてNuxt.jsプロジェクトでデータの永続化を行う方法を解説しています。これらの記事は上から順番に読んでいくことを想定しています。 - [Nuxt\.jsプロジェクトでFirestoreを利用したデータの永続化/取り [...]
2020年3月16日 16:52
Nuxt.jsプロジェクトでFirebase Storageに画像ファイルをアップロードする
# はじめに 数回に分けてNuxt.jsプロジェクトでデータの永続化を行う方法を解説しています。これらの記事は上から順番に読んでいくことを想定しています。 - [Nuxt\.jsプロジェクトでFirestoreを利用したデータの永続化/取り [...]
2020年3月16日 15:06
Nuxt.jsプロジェクトでFirestoreのデータを変更/削除する
# はじめに 数回に分けてNuxt.jsプロジェクトでデータの永続化を行う方法を解説しています。これらの記事は上から順番に読んでいくことを想定しています。 - [Nuxt\.jsプロジェクトでFirestoreを利用したデータの永続化/取り [...]
2020年3月16日 1:18
Nuxt.jsプロジェクトでいろいろな条件を指定してFirestoreからデータを取得する
# はじめに 数回に分けてNuxt.jsプロジェクトでデータの永続化を行う方法を解説しています。これらの記事は上から順番に読んでいくことを想定しています。 - [Nuxt\.jsプロジェクトでFirestoreを利用したデータの永続化/取り [...]
2020年3月15日 18:40
Nuxt.jsプロジェクトでFirestoreを利用したデータの永続化/取り出しの実装方法
# はじめに 数回に分けてNuxt.jsプロジェクトでデータの永続化を行う方法を解説しています。これらの記事は上から順番に読んでいくことを想定しています。 - Nuxt\.jsプロジェクトでFirestoreを利用したデータの永続化/取り出 [...]
2020年3月15日 14:04