Tailwind Logo

Playwright のアプリを含めたプロジェクトとして変更する

関連技術Docker

公開日: 2023-10-20

サンプルのコードを前回コンテナとして動かすところまで持っていきました。今回は、他の役割のアプリも作りたいと考えているため、階層を設定して管理するようにしていきます。

プロジェクトの整理

前回までのブログ記事で記載していたアプリを、今回は src/playwright のフォルダにコピーします。

.env ファイルの作成

このプロジェクトで利用する環境変数を一括で管理することができるように、.env ファイルを作成します。今回は以下のように設定しました。

Plain Text
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 の作成

以下のコードを記述したものを入れておきます。

Plain Text
node_modules
dist

.env

docker-compose.yml の作成

コンテナのイメージ作成、起動に関しての部分をなるべく自動化したいので、このファイルを作成します。

YAML
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 ファイルを通じて読み込むことができるように、以下のように書き換えます。

Dockerfile
ARG PARENT_IMAGE

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 を実行します。

playwright10.png

無事、イメージが作成されました。続いて docker compose up -d で実行します。

playwright11.png

まとめ

Playwright を利用しているコンテナ以外のものをこれから準備するために、プロジェクト自体を整理しました。サンプルのコードは、以下のリポジトリのブランチに公開しています。

関連タグ