経緯

Apple SiliconのMac上でGatsbyJSのプロジェクトをビルド&開発サーバの起動をしようとしたところ、以下のようなエラーが表示されて失敗した。

コマンド

cd gatsby-project
yarn develop

エラー

error /Users/{current directory}/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: /Users/{current directory}/node_modules/sharp
Output:
info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.9.1/libvips-8.9.1-darwin-arm64v8.tar.gz
ERR! sharp Prebuilt libvips 8.9.1 binaries are not yet available for darwin-arm64v8

画像処理に利用されているライブラリ"libvips"のインストールに失敗しているようだったので、以下のリンクの通り実行してビルドに成功した。
https://github.com/lovell/sharp/issues/2460

手順

1. 最新版(Apple Silicon対応)homebrewのインストール

Rosetta2を有効にせずターミナルを開き、以下のリンクの通りインストールコマンドを実行する。
(ホームディレクトリに".zshrc"が存在しない場合エラーが出るので用意しておく。/opt/への書き込み権限エラーが出る場合もあるので対応する。)
https://docs.brew.sh/Installation

cd /opt/
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

成功すると、".zshrc"にnvm関連のコマンドが追記される。
ターミナルを再起動する。

2. node.jsのインストール

以下のコマンドでlts版のnode.jsをソースからコンパイル&インストールする。

nvm install -s --lts

以下のコマンドでバージョンを確認する。
(本記事執筆時はバージョンv15.3.0)

nvm ls

3. パッケージのインストール

いくつかのパッケージをインストールする。

brew install pkg-config glib zlib
brew install libjpeg-turbo libpng webp

pkg-configのパスを.zshrcに追記し、ターミナルを再起動する。

# .zshrc

...
export PKG_CONFIG_PATH="/opt/homebrew/opt/zlib/lib/pkgconfig"
...

4. libvipsのインストール

以下のリンクから最新版のlibvips(執筆時はvips-8.10.4.tar.gz)をダウンロードする。
https://github.com/libvips/libvips/releases

tarを解凍する。

tar -zxvf vips-8.10.4.tar.gz

libvipsをビルドし、インストールする。

cd vips-8.10.4
./configure
make
sudo make install

5. GatsbyJS開発サーバ起動

GatsbyJSのプロジェクトディレクトリ上で開発サーバを起動する。

cd {your-gatsby-project-path}
npm run clean
npm install
npm run develop