1. Buzzword111

    No comment

    Buzzword111
Changes in title
-M1 Macでpuppeteerをインストール方法(2020年12月21日時点)
+M1 Macでpuppeteerを動かす方法(2020年12月21日時点)
Changes in body
Source | HTML | Preview
@@ -1,100 +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.
```
-# インストール方法
+# puppeteerを動かす方法
## 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)