サンプルのコードを前回コンテナとして動かすところまで持っていきました。今回は、他の役割のアプリも作りたいと考えているため、階層を設定して管理するようにしていきます。
プロジェクトの整理
前回までのブログ記事で記載していたアプリを、今回は src/playwright のフォルダにコピーします。
.env ファイルの作成
このプロジェクトで利用する環境変数を一括で管理することができるように、.env ファイルを作成します。今回は以下のように設定しました。
COMPOSE_PROJECT_NAME=search-utility
PROJECT_VERSION=0.1.0
PLAYWRIGHT_IMAGE=mcr.microsoft.com/playwright:v1.38.1-jammy
PAGE_WIDTH=1280
PAGE_HEIGHT=800
PAGE_WAIT_TIME=2000上記に関して、値を設定していない .env.example も用意しておきましょう。
.gitignore の作成
以下のコードを記述したものを入れておきます。
dist
.envdocker-compose.yml の作成
コンテナのイメージ作成、起動に関しての部分をなるべく自動化したいので、このファイルを作成します。
services:
playwright:
image: ${COMPOSE_PROJECT_NAME}-playwright:${PROJECT_VERSION}
platform: linux/amd64
build:
context: ./src/playwright
args:
PARENT_IMAGE: ${PLAYWRIGHT_IMAGE}
environment:
PAGE_WIDTH: ${PAGE_WIDTH}
PAGE_HEIGHT: ${PAGE_HEIGHT}
PAGE_WAIT_TIME: ${PAGE_WAIT_TIME}
ports:
- "3000:3000"
networks:
- defaultここでは .env のファイルを参照して、プロジェクト名、バージョン、docker のイメージファイルの名前、また各種値を渡す形で定義をしています。
Docker ファイルの変更
.env ファイルに定義している環境設定の値、それを docker-compose.yml ファイルを通じて読み込むことができるように、以下のように書き換えます。
FROM ${PARENT_IMAGE}
WORKDIR /usr/app
COPY . /usr/app
ENV PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
RUN cd /usr/app \
&& npm install \
&& npm run build
CMD ["npm","run","start"]screenshot.ts ファイルの変更
このファイルでも環境変数を利用するために、以下のようにコードを書き換えます。まず、環境設定の値を参照できるように、以下のコードを追加します。
typescript const PAGE_WAIT_TIME = parseInt(process.env.PAGE_WAIT_TIME || "2000"); const PAGE_WIDTH = parseInt(process.env.PAGE_WIDTH || "1280"); const PAGE_HEIGHT = parseInt(process.env.PAGE_HEIGHT || "800");
実際のコードで以下のように利用するように変更をします。
typescript await page.setViewportSize({ width: PAGE_WIDTH, height: PAGE_HEIGHT }); await page.goto(urlParam); await page.waitForTimeout(PAGE_WAIT_TIME);
動作確認
上記の設定変更が終わったあと、docker compose build を実行します。
無事、イメージが作成されました。続いて docker compose up -d で実行します。
まとめ
Playwright を利用しているコンテナ以外のものをこれから準備するために、プロジェクト自体を整理しました。サンプルのコードは、以下のリポジトリのブランチに公開しています。