UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供するN’s Creates (エヌズクリエイツ) 株式会社の西山です。

「devcontainer」で開発環境を統一！Next.js + Laravel + MySQL構成の作り方

「新メンバーの環境構築に1日かかってしまった」「自分のPCだと動くのに、他の人だとエラーが出る」… チーム開発でこんな経験はありませんか？ これらの環境差異に起因する問題は、開発の生産性を大きく低下させます。

この問題を解決する強力なソリューションが、devcontainer（Development Container）です。devcontainerを使えば、プロジェクトに必要なツールや拡張機能、サービス（DBなど）をすべてコンテナに詰め込み、誰でも瞬時に同じ開発環境を再現できます。

この記事では、devcontainerの基本的な概念から、具体的な設定ファイルの書き方までを、フロントエンドにNext.js、バックエンドにLaravel、データベースにMySQL、そしてAWS連携を想定した実践的な構成例を交えて解説します。

devcontainerとは？ 開発環境の革命

devcontainerとは、Dockerコンテナを開発環境として直接利用するための仕組みです。VS Codeの拡張機能「Dev Containers」をインストールすることで利用できます。

プロジェクトのルートディレクトリに .devcontainer というフォルダを作成し、その中に設定ファイル（devcontainer.json や Dockerfile）を配置します。VS Codeがこれを認識すると、「コンテナで再度開く」という選択肢が表示され、選択するだけで定義された通りの開発環境が自動で構築されます。

主なメリット

• 環境構築の完全自動化: 新しい開発者はリポジトリをクローンするだけで、数分で開発を開始できます。
• 環境の一貫性保証: チーム全員が全く同じバージョンの言語、ツール、DBを使うため、「環境差異によるバグ」を撲滅できます。
• ローカルPCのクリーン化: 自分のPCに直接PHPやNode.js、MySQLなどをインストールする必要がありません。プロジェクトが終わればコンテナを削除するだけです。

実践！Next.js + Laravel + MySQL環境の構築

ここでは、フロントエンド（Next.js）、バックエンド（Laravel）、データベース（MySQL）がそれぞれ別のコンテナとして連携する、より実践的な構成を作ります。Docker Composeを利用してこれらの複数コンテナを管理します。

ディレクトリ構造

まず、プロジェクトのルートに以下のような .devcontainer フォルダを作成します。

.
├── .devcontainer/
│   ├── devcontainer.json  // devcontainerのメイン設定ファイル
│   ├── docker-compose.yml // 複数コンテナの定義
│   └── docker/
│       ├── app/Dockerfile     // Laravel用コンテナの定義
│       └── web/Dockerfile     // Next.js用コンテナの定義
├── backend/  (Laravelプロジェクト)
└── frontend/ (Next.jsプロジェクト)

1. docker-compose.yml の設定

各サービス（Laravel, Next.js, MySQL）をコンテナとして定義します。

# .devcontainer/docker-compose.yml

version: '3.8'
services:
  # バックエンド: Laravel
  app:
    build:
      context: .
      dockerfile: ./docker/app/Dockerfile
    volumes:
      - ../backend:/var/www/html
    ports:
      - "9000:9000"
    environment:
      - "DB_CONNECTION=mysql"
      - "DB_HOST=db"
      - "DB_PORT=3306"
      - "DB_DATABASE=laravel_db"
      - "DB_USERNAME=user"
      - "DB_PASSWORD=password"
    depends_on:
      - db

  # フロントエンド: Next.js
  web:
    build:
      context: .
      dockerfile: ./docker/web/Dockerfile
    volumes:
      - ../frontend:/usr/src/app
    ports:
      - "3000:3000"
    tty: true # ターミナルを起動したままにする

  # データベース: MySQL
  db:
    image: mysql:8.0
    ports:
      - "3306:3306"
    environment:
      - "MYSQL_DATABASE=laravel_db"
      - "MYSQL_USER=user"
      - "MYSQL_PASSWORD=password"
      - "MYSQL_ROOT_PASSWORD=rootpassword"
    volumes:
      - mysql-data:/var/lib/mysql

volumes:
  mysql-data:

2. Dockerfile の設定

各サービスのコンテナイメージを定義します。

Laravel用 Dockerfile

# .devcontainer/docker/app/Dockerfile

FROM php:8.2-fpm

# 必要なライブラリのインストール
RUN apt-get update && apt-get install -y \
    git \
    zip \
    unzip \
    libzip-dev \
    libpng-dev \
    libjpeg-dev \
    libfreetype6-dev \
    && docker-php-ext-configure gd --with-freetype --with-jpeg \
    && docker-php-ext-install pdo_mysql zip gd

# Composerのインストール
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

# AWS CLIのインストール
RUN apt-get install -y awscli

WORKDIR /var/www/html

Next.js用 Dockerfile

# .devcontainer/docker/web/Dockerfile

FROM node:20

# AWS CLIのインストール
RUN apt-get update && apt-get install -y awscli

WORKDIR /usr/src/app

3. devcontainer.json の設定（最重要）

これがdevcontainerの心臓部です。VS Codeの動作、拡張機能、接続先サービスなどを定義します。

// .devcontainer/devcontainer.json
{
    "name": "Next.js + Laravel Dev Env",
    // Docker Composeファイルへのパスを指定
    "dockerComposeFile": "docker-compose.yml",
    // VS Codeが接続するメインのサービスを指定（今回はLaravelコンテナ）
    "service": "app",
    // このワークスペースで開くフォルダを指定
    "workspaceFolder": "/var/www/html",
    // --- VS CodeのUIカスタマイズ ---
    "customizations": {
        "vscode": {
            // インストールしたい拡張機能のID
            "extensions": [
                // PHP / Laravel
                "bmewburn.vscode-intelephense-client",
                "onecentlin.laravel-blade",
                "EditorConfig.EditorConfig",
                // JavaScript / Next.js
                "dbaeumer.vscode-eslint",
                "esbenp.prettier-vscode",
                // その他便利な拡張機能
                "GitHub.copilot",
                "ms-azuretools.vscode-docker",
                "mhutchie.git-graph"
            ],
            // VS Codeの設定
            "settings": {
                "terminal.integrated.defaultProfile.linux": "bash",
                "php.validate.executablePath": "/usr/local/bin/php",
                "[php]": {
                    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
                },
                "[javascript]": {
                    "editor.defaultFormatter": "esbenp.prettier-vscode"
                }
            }
        }
    },
    // --- ポートフォワーディング ---
    // コンテナ内のポートをローカルPCに公開する設定
    "forwardPorts": [
        3000, // Next.js
        9000, // PHP-FPM
        3306  // MySQL
    ],
    // --- ライフサイクルスクリプト ---
    // コンテナ作成後に一度だけ実行されるコマンド
    "postCreateCommand": "composer install && php artisan key:generate",
    // VS Codeのアタッチ後に毎回実行されるコマンド
    "postAttachCommand": "php artisan migrate"
}

この devcontainer.json ファイルでは、Laravel/Next.js開発に便利なVS Code拡張機能が自動でインストールされ、必要な設定が適用されます。さらに、postCreateCommand でコンテナ初回起動時に `composer install` が走るため、手動でコマンドを打つ手間さえありません。

使い方

1. VS Codeで「Dev Containers」拡張機能をインストールします。
2. このプロジェクトフォルダをVS Codeで開きます。
3. 左下に表示されるポップアップ「Reopen in Container」をクリックします。（表示されない場合は F1 > Dev Containers: Reopen in Container を選択）
4. コンテナのビルドが始まり、完了するとVS Codeが自動で再起動します。

これで完了です！あなたのVS CodeはLaravelコンテナに接続されており、ターミナルを開けば `php artisan` コマンドが、ファイルを開けば定義した拡張機能が有効な状態で開発を始められます。

まとめ

devcontainerは、一度設定ファイルを作ってしまえば、その恩恵は計り知れません。環境構築の時間をゼロにし、チーム全員が快適に開発に集中できる環境は、プロジェクトの成功に不可欠です。

今回紹介した設定は、多くのWebアプリケーション開発に応用できるはずです。ぜひあなたのプロジェクトにもdevcontainerを導入し、未来の開発スタイルを体験してみてください。

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！