Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@yudwig

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

経緯

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
5
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
yudwig

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
5
Help us understand the problem. What is going on with this article?