メインコンテンツまでスキップ

第22章：Compose Watchで編集→自動反映を作る👀✨

この章では、ファイル保存したらコンテナに自動で反映される開発ループを作ります💨 「毎回ビルドして起動し直す地獄」から卒業しよう〜！🎉

1) Compose Watchって何が嬉しいの？🤔💡​

Compose Watchは、ローカルのファイル変更を見張って👀 必要に応じて…

  • 📦 変更ファイルをコンテナに同期（sync）
  • 🔁 依存更新などがあったら再ビルド（rebuild）
  • ♻️ 設定変更などは同期して再起動（sync+restart）
  • 🧰 必要なら同期してコマンド実行（sync+exec）

…みたいに“いい感じに”更新してくれる仕組みです。 しかも Nodeの node_modules/ を同期しない運用がしやすいのが大きい✨（Windows ⇄ Linux コンテナでネイティブ依存が混ざると壊れがち）(Docker Documentation)

使うには Docker Compose 2.22.0+ が必要です。(Docker Documentation)

2) まずは最短の動く形（結論）🏁✨​

基本は compose.yaml の各サービスに develop: watch: を書いて、 起動を docker compose up --watch（または docker compose watch）に変えるだけです。(Docker Documentation)

3) ハンズオン：Node/TS APIを「保存→即反映」にする🧑‍💻🔥​

ここでは「TSのソースは同期」「依存が変わったら再ビルド」を作ります👍

3-1. ざっくり構成📁​

  • src/：TypeScriptのソース
  • package.json / lock：依存関係
  • compose.yaml
  • Dockerfile

3-2. Dockerfile（例）🐳​

ポイントは👇

  • Watch が使うために、イメージ内に stat / mkdir / rmdir が必要（多くのLinuxベースなら普通に入ってるけど、超ミニマルだと無いことがある）(Docker Documentation)
  • さらに、同期先（target）に書き込めるユーザーであることが必要(Docker Documentation)
## Dockerfile（例）
FROM node:22-bookworm-slim AS dev
WORKDIR /app

## 依存だけ先に入れる（キャッシュ効く）
COPY package*.json ./
RUN npm ci

## ソースをコピー（watchの初期状態にもなる）
COPY . .

EXPOSE 3000
CMD ["npm", "run", "dev"]

3-3. compose.yaml（例）🧩​

services:
  api:
    build:
      context: .
      target: dev
    ports:
      - "3000:3000"
    command: npm run dev

    develop:
      watch:
        # ✅ TSソースは同期（コンテナは作り直さない）
        - action: sync
          path: ./src
          target: /app/src
          initial_sync: true
          ignore:
            - node_modules/
            - dist/

        # ✅ 依存が変わったら再ビルド（npm ciが走る）
        - action: rebuild
          path: package.json
        - action: rebuild
          path: package-lock.json

ここでの重要ポイント👇

  • path: はプロジェクト相対でOK。ディレクトリは再帰的に監視されます。(Docker Documentation)
  • ignore: は path からの相対で効きます（ここ超ハマりどころ！）(Docker Documentation)
  • initial_sync: true にすると、既存コンテナがあるとき開始時にズレを直してくれます🧹(Docker Documentation)
  • .dockerignore のルールが watch にも影響します（暗黙の ignore として読み込まれる）(Docker Documentation)

3-4. 起動コマンド🚀​

  • ふつうにログも見たい：

    docker compose up --watch

    （公式でもこの流れで説明されています）(Docker Documentation)

  • watchの出力だけ見たい（ログが混ざるのがイヤ）：

    docker compose watch

    さらに watch には --no-up（起動せずwatchだけ）などもあります。(Docker Documentation)

3-5. 動作確認✅​

  1. src/ のTSを1行変えて保存💾

  2. ターミナルに「syncしたよ」的なログが出る👀

  3. アプリ側（npm run dev のwatch）が反応してホットリロード/再起動✨

    • もしアプリ側watchが無いなら、次の「sync+restart」を使うのが楽！

4) “熱い”実戦パターン集🔥（どれ使う？）​

A. ふだんはこれ：sync（ソースだけ反映）✍️​

  • TS/JS、テンプレ、静的ファイルなど
  • コンテナ作り直さないので速い💨(Docker Documentation)

B. 依存が変わったら：rebuild 📦​

  • package.json / lock
  • Prismaの生成物やビルド手順が変わるとき
  • 変更後にイメージを再ビルドしてコンテナ作り直します(Docker Documentation)

C. 設定変更を反映したい：sync+restart ♻️​

例：nginx.conf、一部設定ファイル

  • 同期してから再起動してくれるので手動restartが消える✨(Docker Documentation)

D. “再起動じゃなくてコマンド叩きたい”：sync+exec 🧰​

例えば「設定を同期したら reload コマンドを打つ」みたいな用途。 sync+exec は Compose 2.32+ で使えます。(Docker Documentation)

5) Windowsでハマりやすいポイント集🪟🧯​

✅ 監視が重い / CPUが回る😵‍💫​

  • watch対象を絞る（path をデカいリポジトリ直下にしない）
  • ignore で node_modules/ や dist/ を切る（超重要）(Docker Documentation)

✅ 反映されない（保存しても動かない）🙃​

チェック順はこれ👇

  1. サービスが build: で作られてる？ image: だけのサービスは watch で変更追えません。(Docker Documentation)

  2. 同期先（target）に書き込める？ コンテナの USER が書き込めないと失敗します。必要なら COPY --chown も検討。(Docker Documentation)

  3. イメージに stat/mkdir/rmdir が入ってる？ これが無いと watch が期待通り動かないことがあります。(Docker Documentation)

  4. .dockerignore が強すぎない？ .dockerignore のパターンが watch にも影響します。(Docker Documentation) （* で全部無視してる系は特に注意⚠️）

6) ちょい演習💪😺​

  1. src/hello.ts を編集 → syncが走るのを確認👀
  2. package.json に依存を1つ追加 → rebuildが走るのを確認📦
  3. config/ を作って設定ファイルを置く → sync+restart にして 設定変更で再起動を体験♻️

7) この章のまとめ🎁✨​

  • Compose Watchは 「保存したら勝手に反映」 を Compose 側で支える仕組み👀(Docker Documentation)
  • コツは「ソースはsync」「依存はrebuild」「設定はsync+restart」💡(Docker Documentation)
  • Windowsでは node_modulesを同期しないのが安定ルート🪟✨(Docker Documentation)

次の章（第23章）は、docker compose run を使って **migrate / seed / test / lint を“一回だけ実行”**できるようにして、手順をもっと短くしていくよ〜！🗡️🧴