M1のMacにおけるx86_64アーキテクチャのcanvas系パッケージインストールのためのx86_64版brewのインストール

## モチベーション
普段はFlutterを中心にコードを書いてますが、案件によってはライブラリの関係上React.jsを利用したWeb開発を行なったりしています。開発機としては最近登場したM1（arm64）のMacを使用していますが、npmライブラリの中ではまだarm64に対応していなライブラリもあり代表的なものが`canvas`を利用したパッケージだと思います。
今回の記事は開発の中で以前インストールした`canvas`を利用したパッケージをアップグレードしようとするとHomeBrewでのライブラリインストールが必要になり、その際にx86_64版HomeBrewを利用する事に気づくのに手間取ったので備忘録も兼ねて記述したいと思います。

この記事では`canvas`をインストールする事を例に進めます。

## 環境
- M1 MacbookPro
- Mac OS Moterey
- node v16.15.0
- "canvas": "^2.10.2"
- "react": "^18.2.0"

## 症状
`yarn add canvas`を実行した際に以下のようなログが出て`node-pre-gyp`時に失敗した場合の例です（一部ログ省略）
```zsh
% arch -arch x86_64 zsh ## x86_64アーキテクチャ実行のzshに切り替え
% uname -m  # 確認
x86_64
% yarn add canvas
yarn upgrade v1.22.18
warning ../package.json: No license field
~~~省力~~~
error /Users/alpha/work/metaprint/node_modules/canvas: Command failed.
Exit code: 1
Command: node-pre-gyp install --fallback-to-build --update-binary
Arguments: 
Directory: /Users/alpha/work/metaprint/node_modules/canvas
Output:
node-pre-gyp info it worked if it ends with ok
node-pre-gyp info using node-pre-gyp@1.0.10

~~~省略~~~

node-pre-gyp ERR! install response status 404 Not Found on 
Package pixman-1 was not found in the pkg-config search path.
Perhaps you should add the directory containing `pixman-1.pc'
to the PKG_CONFIG_PATH environment variable
No package 'pixman-1' found
gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/alpha/work/metaprint/node_modules/node-gyp/lib/configure.js:259:16)
gyp ERR! stack     at ChildProcess.emit (node:events:527:28)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
gyp ERR! System Darwin 21.6.0
gyp ERR! command "/usr/local/bin/node" 
```
以下のように特定のパッケージが無いエラーが発生してインストールが失敗します。この場合はHomeBrewで特定のライブラリをインストール必要があります。[引用](https://github.com/Automattic/node-canvas/issues/1733#issuecomment-763578822)

```zsh
No package 'pixman-1' found
```

通常に`brew install`で必要なライブラリをインストールします。今回の場合は


```zsh
% brew install pkg-config cairo pango libpng jpeg giflib librsvg
```

しかし上記のように通常にインストールしてもエラーは治りません。またこの症状は`canvas`を持ちいるパッケージ入れると必ず発生しました。

## 原因
今回の行った`brew install`はarm64版HomeBrewのコマンドであるため、x86用のライブラリをインストールすることができなかった事が原因でした。x86_64版HomeBrewを別途インストールして対応する必要があります

## 対処
x86_64版HomeBrewをインストールして必要なライブラリを揃えます
前提としてはRosettaの[インストール](https://support.apple.com/ja-jp/HT211861)が必要です。

### x86_64版HomeBrewのインストール
x86_64のzshに切り替えてインストールshを実行します

```zsh
% arch -arch x86_64 zsh ## x86_64アーキテクチャ実行のzshに切り替え
% uname -m  # 確認
x86_64
% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
[参考](https://zenn.dev/omakazu/scraps/b3a4be96741a22)

x86_64ではarm64版と違いインストール先が以下のように異なるので注意です。そのため同じ`brew`コマンドででもパスを意識する必要があります。

- x86_64: `/usr/local/bin/brew`
- arm64: `/opt/homebrew/bin/brew`

### x86_64のライブラリをHomeBrewでインストール
`canvas`に必要なx86_64のライブラリをHomeBrewでインストールします

```zsh
% uname -m  # 確認
x86_64
% /usr/local/bin/brew install pkg-config cairo pango libpng jpeg giflib librsvg
```
### canvasのインストール
最後にcanvasパッケージをyarn addでインストールします

```zsh
% uname -m  # 確認
x86_64
% yarn add canvas
yarn add v1.22.18
warning ../package.json: No license field
~~省略~~
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ canvas@2.10.2
info All dependencies
└─ canvas@2.10.2
✨  Done in 7.27s.
```
以上でインストール完了です

## 通常利用について
`canvas`パッケージを利用したプログラム開発において`yarn build`や`yarn start`する際に、いちいちx86_64に切り替える必要はありません。一度インストールしてしまえばarm64で実行可能です。以下は例です

```zsh
% uname -m  # 確認
arm64
% yarn start
~~問題なく実行可能~~
```

注意としては`yarn upgrade`等した際に同様のエラーがでた時にはx86_64に切り替えて作業する必要があります。

## 最後に
今回はcanvasでしたがcanvasを使用するパッケージは多くありインストール時には必ず上記問題が発生するこたが間えます。またHomeBrewをarm64/x86_64環境に応じて実行ぱすを変えることも可能で、[こちら](https://zenn.dev/omakazu/scraps/b3a4be96741a22)が参考になると思います。