1. Buzzword111

    Posted

    Buzzword111
Changes in title
+M1 Macでpuppeteerをインストール方法(2020年12月21日時点)
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,100 @@
+
+# 動作環境
+Mac Book Air 2020 M1
+macOS Big Sur 11.0
+
+# エラー内容
+[ヘッドレス Chrome Node API 「Puppeteer」 - Qiita](https://qiita.com/bezeklik/items/c6448d50ff0efb45829e)を参考にpuppeteerを動かしてみようとした時に下記コマンドが arm64ではエラーが出たのでその対処方法を書きます。
+
+```zsh
+yarn add puppeteer
+```
+
+```zsh
+buzzword111@buzzword111-MacBook-Air Puppeteer % yarn add puppeteer
+yarn add v1.22.10
+info No lockfile found.
+[1/4] 🔍 Resolving packages...
+[2/4] 🚚 Fetching packages...
+[3/4] 🔗 Linking dependencies...
+[4/4] 🔨 Building fresh packages...
+error /.../Puppeteer/node_modules/puppeteer: Command failed.
+Exit code: 1
+Command: node install.js
+Arguments:
+Directory: /.../Puppeteer/node_modules/puppeteer
+Output:
+The chromium binary is not available for arm64:
+If you are on Ubuntu, you can install with:
+
+ apt-get install chromium-browser
+
+/.../Puppeteer/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js:112
+ throw new Error();
+ ^
+
+Error
+ at /.../Puppeteer/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js:112:19
+ at FSReqCallback.oncomplete (node:fs:199:21)
+info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
+
+```
+
+# インストール方法
+## 1.ARM64版のGoogle Chromeをインストールする。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136617/a8054144-9b8b-2450-370f-76c0e7471a74.png)
+インストールするGoogle Chromeの実行ファイルは下記に配置されます。
+```/Applications/Google Chrome.app/Contents/MacOS/Google Chrome```
+
+## 2.```puppeteer```の代わりに```puppeteer-core```をyarn addする。
+
+```zsh
+yarn add puppeteer-core
+```
+
+```
+buzzword111@buzzword111-MacBook-Air Puppeteer % yarn add puppeteer-core
+yarn add v1.22.10
+info No lockfile found.
+[1/4] 🔍 Resolving packages...
+[2/4] 🚚 Fetching packages...
+[3/4] 🔗 Linking dependencies...
+[4/4] 🔨 Building fresh packages...
+
+success Saved lockfile.
+success Saved 51 new dependencies.
+...
+```
+
+## 3.puppeter 5.5.0時点ではまだM1 Macに対応していないのでパッチを手動であてる。
+```javascript
+// node_modules/puppeteer-core/lib/cjs/puppeteer/node/Launcher.js L:73
+if (os.arch() === 'arm64' && false) { // ← && falseを追記
+ chromeExecutable = '/usr/bin/chromium-browser';
+}
+```
+
+> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136617/f5963cd4-371e-7e01-ab47-a20eedf9bd12.png)
+> https://github.com/puppeteer/puppeteer/issues/6641#issuecomment-748965065
+
+***このパッチを適用しないと、Google Chromeの実行パス(executablePath)が固定で ```/usr/bin/chromium-browser```で上書きされてしまう。***
+
+
+## 4.動作確認
+```javascript
+const puppeteer = require('puppeteer-core');
+
+(async () => {
+ const browser = await puppeteer.launch({
+ executablePath:
+ '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+ })
+ const page = await browser.newPage()
+ await page.goto('https://example.com')
+ await page.screenshot({ path: 'example.png' })
+
+ await browser.close()
+})()
+```
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136617/a4e7a09a-edf3-31f9-94aa-9dda7c950c6e.png)