Puppeteer の利用には Chrome を入れる必要があり、そのへんを手動で環境構築するのは大変そうなので Docker でポンして開発環境も vscode Dev Container でできるようにする。
Docker は以下の本で学んだ。
本記事の GitHub レポジトリ。
https://github.com/starhoshi/puppeteer-dockergithub.com
必要なソフトウェア
Docker Desktop
Docker が利用できる環境が必要。Mac の場合は Docker Desktop をインストールする。
インストール後 Use Rosetta for x86/amd64 emulation on Apple Silicon を有効にする。
(Rosetta 2 を有効にしないとうまく動作せず、そこにたどり着くまでが大変だった https://github.com/puppeteer/puppeteer/issues/10855 )
Rosetta 2
Rosetta 2 を有効にする。
$ softwareupdate --install-rosetta --agree-to-license
- 参考
vscode
Dev Container の利用に必要。
プロジェクトの作成
TypeScript で Puppeteer を実行するプロジェクトを作成する。
この GitHub にサンプルをあげておきました https://github.com/starhoshi/puppeteer-docker
Puppeteer を実行するコードを作成
index.ts
に puppeteer を使うシンプルなコードを用意する。
import puppeteer from "puppeteer"; const main = async () => { const browser = await puppeteer.launch({ headless: "new" }); const page = await browser.newPage(); await page.goto("https://example.com", { waitUntil: "networkidle0" }); console.log(`title: ${await page.title()}`); await browser.close(); }; main();
とりあえずこの index.ts を実行すると title: Example Domain
が表示される。
$ npm install ... $ npm run start > puppeteer-docker@1.0.0 start > npx ts-node index.ts title: Example Domain
Docker を準備する
Dockerfile
Puppeteer 公式で Docker image を用意してくれているのでこれを利用すると便利 Docker | Puppeteer. 開発環境では vim を使いたいので本番を継承した dev も用意する。
FROM ghcr.io/puppeteer/puppeteer:21.7.0 as build WORKDIR /app USER root COPY . . RUN chown -Rh pptruser:pptruser /app USER pptruser RUN npm install FROM build as dev USER root RUN apt-get update \ && apt-get install -y vim USER pptruser
docker-compose.yml
普通に Docker から実行しても良いが、引数をまとめるために docker compose を用意する。
version: '3.8' services: app: build: context: . target: build platform: linux/amd64 cap_add: - SYS_ADMIN command: > npm run start
(Docker 初心者なので npm install するタイミングは Dockerfile の時点でやった方がいいのか、 docker-compose.yml の command でやった方がいいのかわからない)
実行する
$ docker-compose run --rm app [+] Creating 1/0 ✔ Network puppeteer-docker_default Created 0.0s [+] Building 5.2s (10/10) FINISHED docker:desktop-linux => [app internal] load .dockerignore 0.0s => => transferring context: 2B 0.0s => [app internal] load build definition from Dockerfile 0.0s => => transferring dockerfile: 257B 0.0s => [app internal] load metadata for ghcr.io/puppeteer/puppeteer:21.7.0 0.5s => [app build 1/5] FROM ghcr.io/puppeteer/puppeteer:21.7.0@sha256:035977d02b83ea0b287fcca7a2f7577a5f5f178f8b4f6b79d15ce053c7999c32 0.0s => [app internal] load build context 0.1s => => transferring context: 278.16kB 0.1s => CACHED [app build 2/5] WORKDIR /app 0.0s => [app build 3/5] COPY . . 0.5s => [app build 4/5] RUN chown -Rh pptruser:pptruser /app 2.6s => [app build 5/5] RUN npm install 1.3s => [app] exporting to image 0.2s => => exporting layers 0.2s => => writing image sha256:3282bc45bfed43cfe4a82acb7853a10812552bf88397ad4311cb331f98ee8934 0.0s => => naming to docker.io/library/puppeteer-docker-app 0.0s > puppeteer-docker@1.0.0 start > npx ts-node index.ts title: Example Domain
これで環境構築から実行まで一発でいける、バッチとして実行しているので --rm をつけている。
Dev Container で開発環境構築
.devcontainer/devcontainer.json
を作成する。target を dev にしているので開発環境のコマンドラインで vim が利用できる。
{ "name": "Puppeteer Sample", "build": { "dockerfile": "../Dockerfile", "target": "dev" } }
これを vscode の devcontainer で開くと環境構築をセットアップしてその中で開発ができる。
devcontainer 内のコマンドラインで npm run start
で動作確認もできる。
終わり!