Docker拡張でローカルCI環境を再現する方法

Docker拡張でローカルCI環境を再現する方法

〜VSCodeとDockerを活用した、CI/CDの事前検証〜

1. はじめに

CI（継続的インテグレーション）をクラウド上で回すのは今や常識ですが、
「毎回PushしないとCIが動かない」「GitHub Actionsの失敗が怖い」と感じたことはありませんか？

そんなとき便利なのが、Dockerを活用した“ローカルCI環境”の再現です。
本記事では、VSCodeのDocker拡張機能とDocker Composeを使って、ローカルでもGitHub Actions風CIを安全・高速に実行する方法を解説します。

---

2. 想定読者と前提知識

✅ 対象読者

• CI/CDを日常的に使っている開発者
• VSCode＋Dockerでの開発に慣れている中級者以上
• GitHub Actionsを用いているが、ローカルで事前検証したい人

✅ 必要な環境

• Docker（Desktop）
• VSCode + Docker拡張（ms-azuretools.vscode-docker）
• Node.js（サンプル用）
• GitHub Actionsに触れた経験（望ましい）

---

3. なぜローカルCIを再現するのか？

課題	解決策
PushするたびにCIが走る	ローカルでテスト→通ったらPush
Actionsの環境が手元と異なる	Dockerで同じイメージを再現可能
CIに時間がかかる（Queueや環境差）	ローカルで即時に確認
複数バージョン（Node/Pythonなど）の検証	複数コンテナで同時検証

---

4. ローカルCIを構成する要素

📁 project-root/
├── .github/workflows/test.yml （CI定義：参考用）
├── docker-compose.yml        （ローカルCI定義）
├── Dockerfile                （CI環境と一致させる）
├── .devcontainer/            （VSCode Dev Container用）
└── tests/, src/              （プロジェクトコード）

---

5. DockerfileとComposeの用意

Dockerfile（Node.js + テスト環境）

FROM node:20

WORKDIR /app
COPY package*.json ./
RUN npm install

COPY . .

CMD ["npm", "test"]

docker-compose.yml

version: '3.8'
services:
  ci-runner:
    build: .
    volumes:
      - .:/app
    working_dir: /app
    command: npm test

---

6. VSCode Docker拡張の活用

拡張機能導入

• Docker - Microsoft
• コンテナ一覧・ログ表示・ビルド・起動・デバッグがGUI操作可能

ローカルCIの流れ

1. VSCodeの「Docker」サイドバーからci-runnerをビルド
2. コンテナを起動してテストを実行
3. ログやコンソールで失敗を即確認
4. 成功後にGitへコミット→CIへPush

---

7. GitHub Actionsとの差異と注意点

項目	ローカルCI(Docker)	GitHub Actions
実行速度	◎（即時）	△（Queue待ちが発生）
安定性	◎（自分のマシン）	◎
セキュリティ	◎（非公開）	◯（Publicだと制限あり）
マトリクス実行	◯（手動でスクリプト）	◎（Matrix機能）
コスト	無料（手元PC）	無料（時間制限あり）

---

8. 応用例

💡 複数バージョンのNode.jsでテスト

services:
  node18:
    image: node:18
    volumes:
      - .:/app
    command: npm test

  node20:
    image: node:20
    volumes:
      - .:/app
    command: npm test

💡 DevContainerで統合

.devcontainer/devcontainer.json

{
  "name": "ci-dev",
  "dockerFile": "../Dockerfile",
  "context": "..",
  "settings": {},
  "extensions": [
    "ms-azuretools.vscode-docker",
    "esbenp.prettier-vscode"
  ]
}

→ DevContainer起動 → ローカルCIに即参加できる開発環境をチーム全員で共有！

---

9. まとめ

• Docker × VSCode でCI環境を完全に再現できる
• CIトラブルをPush前に防げる「安全網」
• DevContainerと連携すればチーム全員が同じ環境を保てる

CIは「クラウドで自動」だけでなく、「ローカルで再現」することが品質とスピードを大きく向上させます。
ローカルCIを取り入れて、失敗しないCI/CD運用を始めましょう！

---