はじめに
VSCodeのDevContainer機能を使うことで、Dockerを活用した開発環境を簡単に構築でき、プロジェクトごとに異なる環境を手軽に管理できます。この記事では、VSCodeのDevContainerでWordPressを使用するための手順を解説します。
前提条件
- VSCodeがインストール済みであること
- Dockerがインストール済みで動作していること
- VSCode拡張機能「Remote – Containers」がインストール済みであること
詳しいインストール方法などは以下の記事で紹介しています。
プロジェクトディレクトリの準備
まず、WordPressプロジェクト用のディレクトリを作成します。例えば、my-wordpress-project という名前のディレクトリを作成します。
mkdir my-wordpress-project
cd my-wordpress-project
DevContainerの設定ファイルを作成
プロジェクトディレクトリに .devcontainer フォルダーを作成し、その中に devcontainer.json ファイルと Dockerfile を作成します。
devcontainer.jsonの設定
このファイルは、コンテナ環境をVSCodeでどのように設定するかを定義します。
{
  "name": "WordPress DevContainer",
  "dockerComposeFile": "docker-compose.yml",
  "service": "wordpress",
  "workspaceFolder": "/var/www/html",
  "settings": {
    "terminal.integrated.shell.linux": "/bin/bash"
  },
  "extensions": [
    "ms-azuretools.vscode-docker",
    "wordpress.wordpress-snippet"
  ]
}
Dockerfileの設定
Dockerfileは、コンテナのベースイメージを定義し、必要なパッケージを追加インストールするために使用します。
FROM wordpress:latest
RUN apt-get update && apt-get install -y vim
Docker Composeファイルの作成
プロジェクトディレクトリのルートに docker-compose.yml ファイルを作成します。このファイルでは、WordPressとデータベース(MySQL)を連携させるためのサービスを定義します。
version: '3.1'
services:
  wordpress:
    image: wordpress:latest
    ports:
      - "8000:80"
    volumes:
      - ./wordpress:/var/www/html
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: user
      WORDPRESS_DB_PASSWORD: password
  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: root_password
      MYSQL_DATABASE: wordpress
      MYSQL_USER: user
      MYSQL_PASSWORD: password
volumes:
  db_data:
DevContainerのビルドと起動
VSCodeでプロジェクトフォルダーを開き、コマンドパレット (Ctrl+Shift+P または Cmd+Shift+P) を使用して「Remote-Containers: Reopen in Container」を選択します。これにより、VSCodeがDockerコンテナ内でプロジェクトを開きます。
WordPressのセットアップ
コンテナが起動したら、ブラウザで http://localhost:8000 にアクセスし、WordPressのセットアップを行います。通常通り、サイトのタイトルや管理者アカウントを設定すれば、開発環境が整います。
トラブルシューティング
もし http://localhost:8000 でアクセスできない場合は、以下を確認してください:
- コンテナが正しく起動しているか起動時にログを開いて確認する
  
- ポート8000が他のプロセスで使用されていないか確認する(別ポートに変えてみる)
起動に時間がかかることもあるので、しばらく待つとうまくいくこともあります。
以上で、VSCodeのDevContainerを使ってWordPressの開発環境を構築する手順が完了しました。DevContainerを利用することで、複雑な依存関係や環境設定を簡単に管理でき、開発がスムーズに進むようになります。
WordPressのプラグイン開発やテーマカスタマイズを行う際にも、この環境は非常に便利です。ぜひ試してみてください!
DB操作に便利なphpadminを導入したい場合は、以下の記事でやり方を紹介しています。

 
  
  
  
  


