Gatsbyで画像をあつかうためのプラグインインストールでgyp ERR!になった

# 概要

Gatsbyで`gatsby-transformer-sharp`および`gatsby-plugin-sharp`をインストールするときにエラーになりました。

画像を加工するときのモジュールをビルドするためのコードが足りないみたい。
以下の2つを実行したら、インストールできました。

```bash
sudo apt install -y build-essential
sudo apt install libvips-dev
```


# 環境

- Win10
- WSL Ubuntu20.04
- yarnインストール済

# コマンド実行

```bash
$ yarn add gatsby-transformer-sharp gatsby-plugin-sharp
yarn add v1.22.4
[1/4] Resolving packages...
warning gatsby-plugin-sharp > probe-image-size > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "linux" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "gatsby > @pmmmwh/react-refresh-webpack-plugin@0.3.3" has incorrect peer dependency "react-refresh@^0.8.2".
warning "gatsby > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] Building fresh packages...
[-/12] ⠄ waiting...
[9/12] ⠄ sharp
[-/12] ⠄ waiting...
[-/12] ⠄ waiting...
error /mnt/e/<~~~>/mysite/node_modules/sharp: Command failed.
Exit code: 1
Command: (node install/libvips && node install/dll-copy && prebuild-install --runtime=napi) || (node-gyp rebuild && node install/dll-copy)
Arguments:
Directory: /mnt/e/<~~~>/mysite/node_modules/sharp
Output:
ERR! sharp ENOENT: no such file or directory, mkdir 'C:\Users\Soichiro\AppData\Roaming/npm-cache'
info sharp Attempting to build from source via node-gyp but this may fail due to the above error
info sharp Please see https://sharp.pixelplumbing.com/install for required dependencies
gyp info it worked if it ends with ok
gyp info using node-gyp@5.1.0
gyp info using node@12.18.2 | linux | x64
gyp info find Python using Python version 3.8.2 found at "/usr/bin/python3"
gyp info spawn /usr/bin/python3
gyp info spawn args [
gyp info spawn args   '/home/<username>/.nvm/versions/node/v12.18.2/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/mnt/<~~~>/mysite/node_modules/sharp/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/home/<username>/.nvm/versions/node/v12.18.2/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/home/<username>/.cache/node-gyp/12.18.2/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/home/<username>/.cache/node-gyp/12.18.2',
gyp info spawn args   '-Dnode_gyp_dir=/home/<username>/.nvm/versions/node/v12.18.2/lib/node_modules/npm/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/home/<username>/.cache/node-gyp/12.18.2/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/mnt/e/<~~~>/mysite/node_modules/sharp',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.'
gyp info spawn args ]
gyp ERR! build error
gyp ERR! stack Error: not found: make
gyp ERR! stack     at getNotFoundError (/home/<username>/.nvm/versions/node/v12.18.2/lib/node_modules/npm/node_modules/which/which.js:13:12)
gyp ERR! stack     at F (/home/<username>/.nvm/versions/node/v12.18.2/lib/node_modules/npm/node_modules/which/which.js:68:19)
gyp ERR! stack     at E (/home/<username>/.nvm/versions/node/v12.18.2/lib/node_modules/npm/node_modules/which/which.js:80:29)
gyp ERR! stack     at /home/<username>/.nvm/versions/node/v12.18.2/lib/node_modules/npm/node_modules/which/which.js:89:16
gyp ERR! stack     at /home/<username>/.nvm/versions/node/v12.18.2/lib/node_modules/npm/node_modules/isexe/index.js:42:5
gyp ERR! stack     at /home/<username>/.nvm/versions/node/v12.18.2/lib/node_modules/npm/node_modules/isexe/mode.js:8:5
gyp ERR! stack     at FSReqCallback.oncomplete (fs.js:167:21)
gyp ERR! System Linux 4.4.0-18362-Microsoft
gyp ERR! command "/home/<username>/.nvm/versions/node/v12.18.2/bin/node" "/home/<username>/.nvm/versions/node/v12.18.2/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /mnt/e/<~~~>/mysite/node_modules/sharp
gyp ERR! node -v v12.18.2
```

# 解決策

[Gatsbyの公式サイト](https://www.gatsbyjs.org/docs/gatsby-on-linux/#windows-subsystem-linux-wsl)を参考にコマンドを実行。
結果はだめだった。

```bash
sudo apt install -y build-essential
```

[GitHubのissue](sudo apt install libvips-dev)を参考に。
これを実行したあと、再度インストールを実行したらうまくいった。

```bash
sudo apt install libvips-dev
```

`gyp ERR!`はnpm installしたときにちょくちょく発生した気がしたけれど、ビルドが必要なモジュールをビルドするためのプログラムが足りないせいだったとおもう。（それなら`build-essential`だけで足りるはずなのに）
今回もおそらくそのせいだと思うが確証はない。
あと、上記のコマンドの両方が必要なのか、実は2つ目だけで足りるのかはわからなかった。

# 参考文献

- https://www.gatsbyjs.org/docs/gatsby-on-linux/#windows-subsystem-linux-wsl
- https://github.com/lovell/sharp/issues/1882

（アドベントカレンダーに投稿しそびれた...）