npm インストールについてなんとなくnpm installを実行していたが、たまにpackage-lock.jsonが更新されてしまうことがあった。

登場人物

npm

Node.jsのパッケージを管理するシステム

install

npmが使えるインストールコマンド

ci

npmが使えるインストールコマンド

package.json

インストールするパッケージが記載している

package-lock.json

インストールされているパッケージが記載している

組み合わせ

npm install

package.jsonとpackage-lock.jsonを見て依存関係を解決してインストール
node_modulesフォルダ作成 npm x install = package-lock.json

環境構築時や追加インストール時に利用。

npm ci

package.json の依存関係の解決を行わない。
package-lock.json を見て依存パッケージをダウンロードし node_modules の洗い替えを行う。

CI実行、git clone後にはこちらを使った方が良い。

事例

開発環境を複製

Aさんが構築した開発環境のdockerの関連ファイルが共有されている。
ソースコードはgit管理されている。

Bさんが開発環境を構築する為、gitのソースコードをローカル環境にCloneしました。
そのあと、Bさんの環境にdocker関連ファイルを配置して、dockerを起動。
コンテナ起動後にnpm installを実施して、node_modulesフォルダ作成しました。
この時に、package-lock.jsonが更新されていました。
更新されたpackage-lock.jsonをgitにマージ。
マージしたブランチをサーバーにデプロイするとエラーが発生しました。

デプロイ時のエラー

found 96 vulnerabilities (2 low, 83 moderate, 9 high, 2 critical)
  run `npm audit fix` to fix them, or `npm audit` for details
-----npmビルドの開始------

> app@0.1.0 dev /var/www/frontend/releases/xxxxxxxxxx
> vue-cli-service build --mode development


-  Building for development...
 ERROR  Failed to compile with 1 error5:26:11 PM

 error  in src/main.ts:13:1

TS2769: No overload matches this call.
  Overload 1 of 2, '(plugin: Plugin<[opts: InstallOptions]>, opts: InstallOptions): App<Element>', gave the following error.
    Argument of type '{ locale: { name: string; el: { colorpicker: { confirm: string; clear: string; }; datepicker: { now: string; today: string; cancel: string; clear: string; confirm: string; selectDate: string; selectTime: string; ... 22 more ...; months: { ...; }; }; ... 10 more ...; popconfirm: { ...; }; }; }; }' is not assignable to parameter of type 'InstallOptions'.
      Type '{ locale: { name: string; el: { colorpicker: { confirm: string; clear: string; }; datepicker: { now: string; today: string; cancel: string; clear: string; confirm: string; selectDate: string; selectTime: string; ... 22 more ...; months: { ...; }; }; ... 10 more ...; popconfirm: { ...; }; }; }; }' is missing the following properties from type 'InstallOptions': size, zIndex
  Overload 2 of 2, '(plugin: Plugin<[opts: InstallOptions]>, options: [opts: InstallOptions]): App<Element>', gave the following error.
    Argument of type '{ locale: { name: string; el: { colorpicker: { confirm: string; clear: string; }; datepicker: { now: string; today: string; cancel: string; clear: string; confirm: string; selectDate: string; selectTime: string; ... 22 more ...; months: { ...; }; }; ... 10 more ...; popconfirm: { ...; }; }; }; }' is not assignable to parameter of type '[opts: InstallOptions]'.
      Object literal may only specify known properties, and 'locale' does not exist in type '[opts: InstallOptions]'.
    11 | const app = createApp(App)
    12 | app.use(router)
  > 13 | app.use(ElementPlus, { locale })
       | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    14 | app.use(VuePapaParse)
    15 | app.mount('#app')
    16 |

 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! app@0.1.0 dev: `vue-cli-service build --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the app@0.1.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ec2user/.npm/_logs/2024-01-01T08_16_11_120Z-debug.log

デバッグログファイルのの中身

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/home/ec2user/.nvm/versions/node/v14.21.3/bin/node',
1 verbose cli   '/home/ec2user/.nvm/versions/node/v14.21.3/bin/npm',
1 verbose cli   'run',
1 verbose cli   'dev'
1 verbose cli ]
2 info using npm@6.14.18
3 info using node@v14.21.3
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle app@0.1.0~predev: app@0.1.0
6 info lifecycle app@0.1.0~dev: app@0.1.0
7 verbose lifecycle app@0.1.0~dev: unsafe-perm in lifecycle true
8 verbose lifecycle app@0.1.0~dev: PATH: /home/ec2user/.nvm/versions/node/v14.21.3/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/var/www/frontend/releases/xxxxxxxxxx/node_modules/.bin:/home/ec2user/.nvm/versions/node/
v14.21.3/bin:/usr/local/bin:/usr/bin
9 verbose lifecycle app@0.1.0~dev: CWD: /var/www/frontend/releases/xxxxxxxxxx
10 silly lifecycle app@0.1.0~dev: Args: [ '-c', 'vue-cli-service build --mode development' ]
11 silly lifecycle app@0.1.0~dev: Returned: code: 1  signal: null
12 info lifecycle app@0.1.0~dev: Failed to exec dev script
13 verbose stack Error: app@0.1.0 dev: `vue-cli-service build --mode development`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/home/ec2user/.nvm/versions/node/v14.21.3/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:400:28)
13 verbose stack     at ChildProcess.<anonymous> (/home/ec2user/.nvm/versions/node/v14.21.3/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:400:28)
13 verbose stack     at maybeClose (internal/child_process.js:1088:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:296:5)
14 verbose pkgid app@0.1.0
15 verbose cwd /var/www/frontend/releases/xxxxxxxxxx
16 verbose Linux 4.14.281-212.502.amzn2.x86_64
17 verbose argv "/home/ec2user/.nvm/versions/node/v14.21.3/bin/node" "/home/ec2user/.nvm/versions/node/v14.21.3/bin/npm" "run" "dev"
18 verbose node v14.21.3
19 verbose npm  v6.14.18
20 error code ELIFECYCLE
21 error errno 1
22 error app@0.1.0 dev: `vue-cli-service build --mode development`
22 error Exit status 1
23 error Failed at the app@0.1.0 dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

検証

開発環境構築時（git clone後）にnpm installとnpm ciを比較

npm install

npm install

% git status
On branch master
Your branch is up to date with 'origin/master'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
	modified:   package-lock.json

package-lock.jsonが更新されている。

npm ci

npm ci

% git staus
git: 'staus' is not a git command. See 'git --help'.

The most similar command is
	status

更新なし

結果

npm installを実行するとpackage-lock.jsonが更新されて、
npm ciの場合は更新されない。