LoginSignup
11
5

More than 3 years have passed since last update.

Apple Silicon(M1)搭載MacでGatsbyJSをビルドする

Posted at

経緯

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
11
5
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
11
5