VSCode devcontainerでWordPress開発環境を構築する方法

ブログ

はじめに

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 でアクセスできない場合は、以下を確認してください:

  • コンテナが正しく起動しているか起動時にログを開いて確認する
    log
  • ポート8000が他のプロセスで使用されていないか確認する(別ポートに変えてみる)

起動に時間がかかることもあるので、しばらく待つとうまくいくこともあります。

以上で、VSCodeのDevContainerを使ってWordPressの開発環境を構築する手順が完了しました。DevContainerを利用することで、複雑な依存関係や環境設定を簡単に管理でき、開発がスムーズに進むようになります。

WordPressのプラグイン開発やテーマカスタマイズを行う際にも、この環境は非常に便利です。ぜひ試してみてください!

DB操作に便利なphpadminを導入したい場合は、以下の記事でやり方を紹介しています。

タイトルとURLをコピーしました