Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@zukka

npm installとnpm ciの使い分け

Posted at

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の場合は更新されない。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?