はじめに
Dockerの学習中に、「以前作ったアプリに適用できるのでは？」と思いDocker化に挑戦してみました。
小規模なプロジェクトですが、実際に作成してみると、想定外に詰まった箇所がたくさんあったため、学んだことを備忘録としてまとめます。
Docker化するにあたってのゴール
-
フロントエンドのコンテナ化
バックエンドはSupabaseを使用したため、フロントエンドのみをコンテナ化 -
バッチ処理のコンテナ化
Puppeteerを使用したスクレイピング処理をコンテナ化 -
docker-composeで一元管理
1, 2のコンテナをdocker-composeで管理できるようにする
コンテナ化のメリット
- 環境の統一：Node.jsのバージョンを固定できる
- Puppeteerの依存関係管理が楽：Chromiumのインストールで悩まなくて済む
-
コマンドを一元管理できる :
docker-compose upだけで起動できる
正直、小さいプロジェクトなのでコンテナ化しなくても困らないとも考えましたが、学習の一環として導入しました。
適用するプロジェクト
以前作ってみたお酒の添加物検索アプリです。
プロジェクト構成
- フロントエンド：Vite + React
- データベース：Supabase
- バッチ処理：Puppeteer
下図の紫枠部分をDocker化しました。
作成したファイル
1. Dockerfile（フロントエンド）
Dockerfile
FROM node:20-alpine
WORKDIR /app
COPY . .
RUN npm install
EXPOSE 5173
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
Node.js 20のAlpineイメージをベースに、Viteの開発サーバーを起動します。
--host 0.0.0.0 でコンテナ外からアクセスできるようにしています。
2. Dockerfile（バッチ処理)
./batch/Dockerfile
FROM ghcr.io/puppeteer/puppeteer:24.10.2
USER root
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
ENTRYPOINT []
CMD ["npx", "tsx", "./batch/autoInsertData.ts"]
Puppeteerの公式のimageを使用しました。
Puppeteerのimageはデフォルトでpptruserという権限で動作するため、WORKDIR /appで権限問題が発生しました。
そのため、USER rootで権限を変更しています。
また、ENTRYPOINT []を追記しないと、image内のデフォルト処理でnpm run devが実行されるため、
空にして上書きしました。
3. コンポーネントファイル
docker-compose.yml
version: "3.8"
services:
app:
build:
context: .
dockerfile: Dockerfile
container_name: alcohol-app
ports:
- "5173:5173"
volumes:
- .:/app
- /app/node_modules
env_file:
- .env
environment:
- NODE_ENV=development
batch:
build:
context: .
dockerfile: batch/Dockerfile
container_name: alcohol-batch
env_file:
- .env
profiles:
- tools
profiles: -toolsを使用することで、バッチコンテナは必要な時だけ起動することができます。
env_file:で環境変数定義を設定しました。
おわりに
既存アプリをDocker化してみて、環境の再現が容易にできるありがたみを実感しました。
今回は、フロントエンドとバッチ処理のみだったため、次はバックエンド・フロントエンドのコンテナ一元管理も挑戦したいと思います。
参考資料