完全版！DockerでWordPress開発環境を構築する方法：Mac向け

SHARE

WordPressの開発環境構築には、主に3つの選択肢があります。

従来のMAMP、使いやすいLocal、そして柔軟なDocker。今回は特に、DockerによるWordPress開発環境の構築方法を詳しく解説していきます。

WordPress開発環境の選択肢

目次

1. MAMP（従来のよく利用される方法）

  • メリット
    • シンプルな操作性
    • GUIで直感的に操作可能
  • デメリット
    • 環境の完全な再現が難しい
    • プロジェクトごとの切り替えが面倒
    • チーム開発での環境統一が困難

2. Local by Flywheel

  • メリット
    • 直感的なGUIで簡単セットアップ
    • WordPressに特化した機能
    • SSL対応やメール機能が標準搭載
    • サイト切り替えが容易
  • デメリット
    • カスタマイズ性に制限あり
    • 特殊な環境設定が難しい
    • チーム開発での共有がやや困難

3. Docker

  • メリット
    • 環境の完全な一致
    • 高度なカスタマイズが可能
    • チーム開発に最適
    • バージョン管理が容易
  • デメリット
    • 学習曲線がやや急
    • コマンドラインの知識が必要

なぜDockerを選ぶのか？

yaml
# docker-compose.ymlの例
version: '3'
services:
  wordpress:
    image: wordpress:latest
    ports:
      - "8080:80"
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress

完全な環境の再現性

  • 開発環境と本番環境の一致
  • チームメンバー全員が同じ環境で開発可能
  • バージョン管理システムとの相性が良い

柔軟な環境設定

  • PHPのバージョン変更が容易
  • データベース設定のカスタマイズ
  • 追加サービス（Redis等）の導入が簡単

効率的なリソース管理

bash
# プロジェクトの起動
docker-compose up -d

# プロジェクトの停止（リソース解放）
docker-compose down

開発環境の比較表

WordPress開発環境の比較

機能MAMPLocalDocker
セットアップの簡単さ○◎△
環境の再現性△○◎
カスタマイズ性△○◎
チーム開発への適性×○◎
バージョン管理との相性△○◎
学習コスト低低中〜高
リソース効率△○◎
GUIの使いやすさ○◎△
WordPressとの相性○◎○
PHP/MySQLバージョン変更△○◎
SSL対応△◎○
メール送信テスト×◎△
データベース管理○◎○
バックアップ作成△◎○
複数サイト管理△◎○

◎：非常に優れている　○：優れている　△：やや劣る　×：対応していない

補足説明

MAMP

  • 従来型の開発環境
  • シンプルな操作性が特徴
  • プロジェクト切り替えに手間がかかる

Local

  • WordPressに特化した開発環境
  • 直感的なGUI操作
  • プロジェクト管理が容易
  • 基本機能が充実

Docker

  • 高度なカスタマイズが可能
  • チーム開発に最適
  • コマンドライン操作が必要
  • 学習コストはやや高め

この比較表は一般的な使用例に基づいています。実際の選択は、プロジェクトの要件や開発チームのスキルレベルに応じて検討することをお勧めします。

最適な選択のために

  • Local推奨のケース
    • 個人での開発
    • WordPress標準的な開発
    • GUI操作を好む
    • 迅速な環境構築が必要
  • Docker推奨のケース
    • チームでの開発
    • カスタマイズ要件が多い
    • 本番環境との一致が重要
    • 複数プロジェクトの並行開発

これから、macOSでのDocker環境構築の具体的な手順を見ていきます。最初は少し難しく感じるかもしれませんが、基本的な概念を理解してしまえば、その便利さを実感していただけるはずです。

次のセクションでは、実際のインストール手順と基本的な設定方法について詳しく説明していきます。

macへのDockerインストール

macOSでDocker環境を構築するための準備と手順を詳しく解説していきます。

システム要件の確認

macでDockerを使用するために必要な要件は以下の通りです：

  • macOSのバージョン
    • macOS Monterey 12以降
    • Apple Silicon（M1/M2）または Intel プロセッサ
  • ハードウェア要件
    • メモリ：最小8GB（推奨16GB以上）
    • 空き容量：最小10GB以上

Docker Desktop for Macのインストール

1.ダウンロード

  • Docker公式サイトにアクセス
  • 「Download for Mac」をクリック
  • お使いのMacのチップに合わせて（Apple Silicon/Intel）インストーラーを選択

2.インストール手順

HTML
# インストール確認コマンド
docker --version
docker-compose --version

3.初期設定

  • Docker Desktopを起動
  • リソース設定の確認（CPU、メモリ、ディスク）
  • 必要に応じてリソースを調整

動作確認

1.基本的な確認

bash
# Dockerデーモンの起動確認
docker info

# テストコンテナの実行
docker run hello-world

2.WordPressコンテナのテスト

bash
# WordPress用のテストコンテナ起動
docker run --name test-wordpress -p 8080:80 -d wordpress

Docker Desktopの基本設定

1. リソース設定

  • CPUの割り当て
    • 推奨：利用可能なCPUコアの半分
    • 重い処理を行う場合は増加
  • メモリの割り当て
    • 最小：4GB
    • 推奨：8GB以上
    • 複数コンテナを実行する場合は増加

2. ネットワーク設定

yaml
# docker-compose.ymlでのポート設定例
services:
  wordpress:
    ports:
      - "8080:80"  # ホスト:コンテナ

トラブルシューティング

よくある初期設定時の問題と解決方法：

1.起動時のエラー

  • Docker Desktopの再起動
  • システム環境設定の確認
  • セキュリティ設定の確認

2.パフォーマンスの問題

bash
# キャッシュのクリア
docker system prune -a

3.ポート競合

bash
# 使用中のポートの確認
sudo lsof -i :8080

開発効率を上げるTips

1.エイリアスの設定

bash
# ~/.zshrcまたは~/.bash_profileに追加
alias dc='docker-compose'
alias dcu='docker-compose up -d'
alias dcd='docker-compose down'

2.Docker Desktopの便利な機能

  • コンテナの視覚的管理
  • ログの簡単な確認
  • ボリュームの管理

インストールが完了したら、次のセクションで実際のWordPress開発環境の構築に進みます。

初期設定で躓いた場合は、エラーメッセージを確認しながら、一つずつ解決していくことをお勧めします。

開発環境の構築手順

WordPressのDocker開発環境を、ステップバイステップで構築していきましょう。

プロジェクトの作成

1.プロジェクトフォルダの作成

bash
# プロジェクトフォルダの作成と移動
mkdir my-wordpress
cd my-wordpress

# 必要なサブディレクトリの作成
mkdir wp-content

2.docker-compose.ymlの作成

bash
version: '3'

services:
  # WordPressコンテナ
  wordpress:
    image: wordpress:latest
    ports:
      - "8080:80"
    volumes:
      - ./wp-content:/var/www/html/wp-content
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: wp_user
      WORDPRESS_DB_PASSWORD: wp_password
      WORDPRESS_DEBUG: 1
    depends_on:
      - db

  # MySQLコンテナ
  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wp_user
      MYSQL_PASSWORD: wp_password

  # phpMyAdminコンテナ
  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    ports:
      - "8081:80"
    environment:
      PMA_HOST: db
    depends_on:
      - db

volumes:
  db_data: {}

設定の説明

1. WordPressコンテナの設定

  • ポート設定：8080番ポートでアクセス可能
  • ボリュームマウント：テーマやプラグインの開発用
  • 環境変数：データベース接続情報とデバッグモード

2. MySQLコンテナの設定

  • バージョン：5.7を使用（安定版）
  • データの永続化：named volumeでデータを保持
  • 環境変数：データベースの認証情報

3. phpMyAdminの設定

  • ポート設定：8081番ポートでアクセス
  • データベース接続：自動的にMySQLに接続

環境の起動

bash
# コンテナの起動
docker-compose up -d

# 状態確認
docker-compose ps

# ログの確認
docker-compose logs

アクセス方法

  1. WordPress
  2. phpMyAdmin

ディレクトリ構造

plaintext
my-wordpress/
├── docker-compose.yml
├── wp-content/
│   ├── themes/
│   ├── plugins/
│   └── uploads/
└── .gitignore  # 必要に応じて作成

.gitignoreの設定（推奨）

plaintext
# .gitignore
wp-content/uploads/
wp-content/upgrade/
wp-content/cache/
.DS_Store

開発時の注意点

1.パーミッションの設定

bash
# wp-contentディレクトリの権限設定
chmod -R 777 wp-content

2.データベースのバックアップ

bash
# バックアップの作成
docker-compose exec db mysqldump -u wp_user -pwp_password wordpress > backup.sql

3.コンテナの再構築

bash
# 設定変更時の再構築
docker-compose down
docker-compose up -d --build

次のセクションでは、WordPressの初期設定と具体的な開発の進め方について説明していきます。

ここまでの設定で問題が発生した場合は、エラーメッセージを確認しながら一つずつ解決していきましょう。

WordPressの設定と起動

Docker環境でのWordPress設定と起動について、実践的な手順を説明していきます。

1. コンテナの起動

bash
# 開発環境の起動
docker-compose up -d

# コンテナの状態確認
docker-compose ps

# 起動ログの確認
docker-compose logs wordpress

2. WordPressの初期設定

アクセス方法

  1. ブラウザで http://localhost:8080 にアクセス
  2. 言語選択画面が表示される
  3. 以下の初期設定を行う：
markdown
- サイトのタイトル：任意（後で変更可能）
- ユーザー名：admin（変更推奨）
- パスワード：自動生成されたものを使用するか、強力なパスワードを設定
- メールアドレス：開発用のメールアドレス
- 検索エンジンでの表示：開発環境なので「非表示」を推奨

3. 開発環境の最適化設定

wp-config.phpの追加設定

PHP
// デバッグモードの有効化
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

// 自動更新の無効化
define('AUTOMATIC_UPDATER_DISABLED', true);

// 投稿のリビジョン数制限
define('WP_POST_REVISIONS', 5);

// メモリ制限の引き上げ
define('WP_MEMORY_LIMIT', '256M');

4. phpMyAdminの利用

1.アクセス方法

  • ブラウザで http://localhost:8081 にアクセス
  • ログイン情報：ユーザー名：wp_user
  • ログイン情報：パスワード：wp_password

2.主な用途

  • データベース構造の確認
  • SQLクエリのテスト
  • データのバックアップ/リストア

5. 動作確認とテスト

基本的な動作確認

bash
# WordPressコンテナの状態確認
docker-compose exec wordpress wp core version

# データベース接続テスト
docker-compose exec wordpress wp db check

HTTPSの設定（オプション）

bash
// wp-config.phpに追加
define('FORCE_SSL_ADMIN', true);
define('WP_HOME', 'https://localhost:8080');
define('WP_SITEURL', 'https://localhost:8080');

6. よく使う開発コマンド

bash
# WordPressコンテナに入る
docker-compose exec wordpress bash

# データベースコンテナに入る
docker-compose exec db bash

# WordPress CLIの使用
docker-compose exec wordpress wp --info

# テーマの有効化
docker-compose exec wordpress wp theme activate your-theme-name

# プラグインのインストール
docker-compose exec wordpress wp plugin install debug-bar --activate

7. 開発時の注意点

パフォーマンス最適化

PHP
// wp-config.phpに追加
// キャッシュの無効化（開発時）
define('WP_CACHE', false);

// 自動保存の間隔を延長
define('AUTOSAVE_INTERVAL', 300);

セキュリティ設定

PHP
// 開発環境用のセキュリティ設定
define('DISALLOW_FILE_EDIT', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

次のセクションでは、Mac固有の便利な使い方やツールの活用方法について説明していきます。

ここまでの設定で不明な点やエラーが発生した場合は、ログを確認しながら対処していきましょう。

Mac向けの便利な使い方

macOSでのDocker開発環境をより効率的に使うための、実践的なテクニックとツールの活用方法を紹介します。

VS Code拡張機能

1. 必須の拡張機能

  • Docker（ms-azuretools.vscode-docker）
  • PHP Intelephense
  • WordPress Snippets
  • ESLint
  • Prettier

VS Code拡張機能

1. 必須の拡張機能

  • Docker（ms-azuretools.vscode-docker）
  • PHP Intelephense
  • WordPress Snippets
  • ESLint
  • Prettier

2. VS Codeの設定

json
{
  "editor.formatOnSave": true,
  "php.validate.executablePath": "/usr/local/bin/php",
  "php.suggest.basic": false,
  "files.associations": {
    "*.php": "php"
  }
}

ショートカットと効率化

1. Docker操作のショートカット

bash
# プロジェクト初期化スクリプト
function wp-init() {
  dcup
  echo "Waiting for WordPress..."
  sleep 10
  dcexec wordpress wp core install \
    --url=localhost:8080 \
    --title="開発環境" \
    --admin_user=admin \
    --admin_password=password \
    --admin_email=admin@example.com
}

2. 開発効率化スクリプト

bash
# テーマ開発用スクリプト
function theme-dev() {
  cd wp-content/themes/your-theme
  npm run watch
}

# デバッグログ確認
function wp-log() {
  tail -f wp-content/debug.log
}

便利なmacOSアプリケーション

1. Sequel Pro / TablePlus

  • データベース管理
  • SQL操作の効率化

2. iTerm2の活用

  • 分割ウィンドウでの作業
  • プロファイル設定
  • ショートカットキーの活用

開発フローの最適化

1. 作業開始時

bash
# 朝一の作業開始スクリプト
function start-dev() {
  dcup
  code .
  open http://localhost:8080
  open http://localhost:8081
}

2. 作業終了時

bash
# 終業時のクリーンアップスクリプト
function end-dev() {
  dcdown
  docker system prune -f
}

これらのツールと設定を活用することで、macOSでの WordPress開発がより効率的になります。

次のセクションでは、ローカル開発環境のカスタマイズについて詳しく説明していきます。

ローカル開発環境のカスタマイズ

WordPressのローカル開発環境をより開発しやすくカスタマイズする方法を説明します。

テーマ開発やプラグイン開発に必要な設定を詳しく見ていきましょう。

テーマ開発の設定

1. テーマ開発用のディレクトリ構造

plaintext
wp-content/themes/your-theme/
├── assets/
│   ├── js/
│   ├── css/
│   └── images/
├── inc/
│   ├── customizer.php
│   └── template-functions.php
├── template-parts/
│   ├── content.php
│   └── header/
├── functions.php
├── style.css
└── package.json

2. 開発環境の設定

json
// package.json
{
  "name": "your-theme",
  "version": "1.0.0",
  "scripts": {
    "start": "npm run watch",
    "watch": "mix watch",
    "build": "mix --production"
  },
  "devDependencies": {
    "laravel-mix": "^6.0.0",
    "sass": "^1.45.0",
    "sass-loader": "^12.4.0"
  }
}

プラグイン開発の設定

1. 基本構造

PHP
// プラグインのメインファイル
<?php
/**
 * Plugin Name: Your Plugin Name
 * Plugin URI: https://example.com/
 * Description: プラグインの説明
 * Version: 1.0.0
 * Author: Your Name
 * License: GPL v2 or later
 */

if (!defined('ABSPATH')) exit;

// プラグインのクラス定義
class YourPlugin {
    public function __construct() {
        add_action('init', array($this, 'init'));
    }

    public function init() {
        // 初期化処理
    }
}

new YourPlugin();

PHP設定のカスタマイズ

1. php.iniの設定

dockerfile
# Dockerfile
FROM wordpress:php8.1-apache

# PHPの設定をカスタマイズ
RUN echo "upload_max_filesize = 64M" > /usr/local/etc/php/conf.d/custom.ini \
    && echo "post_max_size = 64M" >> /usr/local/etc/php/conf.d/custom.ini \
    && echo "memory_limit = 256M" >> /usr/local/etc/php/conf.d/custom.ini \
    && echo "max_execution_time = 300" >> /usr/local/etc/php/conf.d/custom.ini

デバッグ環境の構築

1. Xdebugの設定

yaml
# docker-compose.yml
services:
  wordpress:
    build: 
      context: .
      dockerfile: Dockerfile
    environment:
      XDEBUG_CONFIG: client_host=host.docker.internal
      XDEBUG_MODE: debug

2. VS Codeでのデバッグ設定

json
// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for Xdebug",
      "type": "php",
      "request": "launch",
      "port": 9003,
      "pathMappings": {
        "/var/www/html": "${workspaceFolder}"
      }
    }
  ]
}

ログの設定

PHP
// wp-config.phpに追加
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);
define('SCRIPT_DEBUG', true);

// エラーログの出力先指定
ini_set('error_log', '/var/www/html/wp-content/debug.log');

開発用の便利な設定

1. コード品質管理

json
// .eslintrc
{
  "extends": [
    "eslint:recommended",
    "wordpress"
  ],
  "env": {
    "browser": true,
    "jquery": true
  }
}

2. Git管理の設定

gitignore
# .gitignore
wp-content/*
!wp-content/themes/
!wp-content/plugins/
wp-content/themes/*
!wp-content/themes/your-theme/
wp-content/plugins/*
!wp-content/plugins/your-plugin/
.DS_Store
node_modules/
debug.log

データの管理と移行

WordPressのローカル開発環境でのデータ管理と、環境間での移行方法について解説します。

データベースのバックアップ

1. MySQLダンプの作成

bash
# 基本的なバックアップ
docker-compose exec db mysqldump -u wp_user -pwp_password wordpress > backup.sql

# 圧縮バックアップ
docker-compose exec db mysqldump -u wp_user -pwp_password wordpress | gzip > backup.sql.gz

# タイムスタンプ付きバックアップ
docker-compose exec db mysqldump -u wp_user -pwp_password wordpress > backup_$(date +%Y%m%d_%H%M%S).sql

2. バックアップスクリプトの作成

bash
# ~/bin/wp-backup.sh
#!/bin/bash

BACKUP_DIR="./backups"
BACKUP_FILE="${BACKUP_DIR}/backup_$(date +%Y%m%d_%H%M%S).sql"

# バックアップディレクトリの作成
mkdir -p ${BACKUP_DIR}

# データベースのバックアップ
docker-compose exec -T db mysqldump -u wp_user -pwp_password wordpress > ${BACKUP_FILE}

# 古いバックアップの削除（30日以上前のファイル）
find ${BACKUP_DIR} -name "backup_*.sql" -mtime +30 -delete

echo "Backup completed: ${BACKUP_FILE}"

コンテナ間のデータ移行

1. データベースのリストア

bash
# SQLファイルからリストア
docker-compose exec -T db mysql -u wp_user -pwp_password wordpress < backup.sql

# 圧縮ファイルからリストア
gunzip < backup.sql.gz | docker-compose exec -T db mysql -u wp_user -pwp_password wordpress

2. wp-contentの移行

bash
# アップロードディレクトリのバックアップ
tar -czf wp-content-backup.tar.gz wp-content/

# 別環境への移行スクリプト
function wp-migrate() {
    local src_dir="$1"
    local dest_dir="$2"
    
    # wp-contentのコピー
    rsync -av --exclude='*.log' \
              --exclude='cache/' \
              --exclude='upgrade/' \
              ${src_dir}/wp-content/ ${dest_dir}/wp-content/
}

バージョン管理との連携

1. .gitignore設定

gitignore
# WordPress core files
wp-admin/
wp-includes/
wp-content/upgrade/
wp-content/uploads/
wp-content/cache/

# Configuration files
wp-config.php
.env

# Database backups
*.sql
*.sql.gz

# Development files
node_modules/
.DS_Store
debug.log

# Docker volumes
db_data/

2. データベースのバージョン管理

bash
# データベースの構造のみエクスポート
docker-compose exec db mysqldump -u wp_user -pwp_password --no-data wordpress > schema.sql

# 開発用データのエクスポート
docker-compose exec db mysqldump -u wp_user -pwp_password \
    --no-create-info \
    --complete-insert \
    wordpress wp_options wp_posts > dev-data.sql

本番環境への移行準備

1. 本番環境用の設定調整

PHP
// wp-config.phpの環境別設定
if (file_exists(dirname(__FILE__) . '/.env')) {
    require_once dirname(__FILE__) . '/wp-config.local.php';
} else {
    // 本番環境の設定
    define('DB_NAME', 'production_db');
    define('DB_USER', 'production_user');
    define('DB_PASSWORD', 'production_password');
    define('DB_HOST', 'production_host');
    
    // デバッグ設定
    define('WP_DEBUG', false);
    define('WP_DEBUG_LOG', false);
    define('WP_DEBUG_DISPLAY', false);
}

2. 移行チェックリスト

markdown
## 本番環境移行前チェックリスト

1. データベース
   - [ ] 重要データのバックアップ
   - [ ] 開発用データの削除
   - [ ] パフォーマンス最適化

2. ファイル
   - [ ] 不要なプラグインの削除
   - [ ] テーマファイルの最適化
   - [ ] アップロードファイルの整理

3. 設定
   - [ ] SSL設定の確認
   - [ ] パーマリンク設定の確認
   - [ ] キャッシュ設定の調整

4. セキュリティ
   - [ ] 管理者アカウントの見直し
   - [ ] ファイルパーミッションの確認
   - [ ] セキュリティプラグインの設定

このような体系的なデータ管理により、安全で効率的な開発環境の運用が可能になります。

次のセクションでは、トラブルシューティングについて説明していきます。

トラブルシューティング

macOSでのDocker環境構築でよく遭遇する問題と、その解決方法について説明します。

macOSでよくある問題と解決方法

1. ポート番号の競合

bash
# エラーメッセージ例
Error starting userland proxy: Bind for 0.0.0.0:8080: unexpected error Permission denied

# 解決方法
# 使用中のポートを確認
sudo lsof -i :8080

# docker-compose.ymlでポート番号を変更
ports:
  - "8081:80"  # 8080から8081に変更

2. パーミッションエラー

bash
# エラーメッセージ例
Error: EACCES: permission denied

# 解決方法
# wp-contentディレクトリの権限を修正
chmod -R 777 wp-content

# もしくはより安全な設定
sudo chown -R $(whoami):staff wp-content
chmod -R 755 wp-content

3. メモリ使用量の最適化

bash
# Docker Desktopの設定で以下を調整
Resources:
  - Memory: 4GB以上を推奨
  - Swap: 1GB以上を推奨

# または docker-compose.ymlで制限を設定
services:
  wordpress:
    mem_limit: 1g
    memswap_limit: 2g

4. データベース接続エラー

bash
# エラーメッセージ例
Error establishing a database connection

# 解決方法1: 環境変数の確認
# docker-compose.ymlの設定
services:
  wordpress:
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress

# 解決方法2: データベースコンテナの状態確認
docker-compose ps
docker-compose logs db

よくあるエラーと対処法

1. コンテナの起動に失敗する

bash
# 診断手順
# 1. ログの確認
docker-compose logs

# 2. コンテナの状態確認
docker-compose ps

# 3. 全コンテナの再起動
docker-compose down
docker-compose up -d

# 4. Docker自体の再起動
osascript -e 'quit app "Docker"'
open -a Docker

2. ファイルの同期が遅い

yaml
# docker-compose.ymlでキャッシュを使用
volumes:
  - ./wp-content:/var/www/html/wp-content:cached

3. PHPのエラー

ini
# php.iniの設定を変更する場合
# カスタムphp.iniファイルを作成
upload_max_filesize = 64M
post_max_size = 64M
memory_limit = 256M
max_execution_time = 300

# docker-compose.ymlに追加
volumes:
  - ./php.ini:/usr/local/etc/php/conf.d/custom.ini

デバッグ方法

1. ログの確認

bash
# 全てのログを確認
docker-compose logs

# 特定のサービスのログを確認
docker-compose logs wordpress
docker-compose logs db

# リアルタイムでログを表示
docker-compose logs -f

2. コンテナ内の確認

bash
# WordPressコンテナに入る
docker-compose exec wordpress bash

# データベースコンテナに入る
docker-compose exec db bash

# MySQLに直接接続
docker-compose exec db mysql -uwordpress -pwordpress

クリーンアップ方法

bash
# キャッシュのクリア
docker-compose down
docker system prune -a

# ボリュームの削除（データも削除されるので注意）
docker-compose down -v

# 完全なリセット用スクリプト
#!/bin/bash
echo "Stopping containers..."
docker-compose down
echo "Removing all containers and volumes..."
docker system prune -af
docker volume prune -f
echo "Recreating environment..."
docker-compose up -d

予防的対策

1.定期的なバックアップ

bash
# バックアップスクリプト
#!/bin/bash
DATE=$(date +%Y%m%d_%H%M%S)
docker-compose exec -T db mysqldump -uwordpress -pwordpress wordpress > backup_$DATE.sql
tar -czf wp-content_$DATE.tar.gz wp-content/

2. 監視設定

bash
# リソース使用状況の確認
docker stats

# ディスク使用量の確認
docker system df

これらの問題に遭遇した場合は、まずログを確認し、段階的に問題解決を進めることをお勧めします。

また、開発環境を新規に構築する際は、この文書を参考にしながら、予防的な措置を講じることで、多くの問題を回避できます。

次のセクションでは、開発効率を上げるためのTipsについて説明していきます。

開発効率を上げるTips

WordPressのDocker開発環境をより効率的に活用するためのテクニックを紹介します。

1. VS Codeの設定

推奨する拡張機能

json
// settings.json
{
    "recommendations": [
        "ms-azuretools.vscode-docker",     // Docker支援
        "bmewburn.vscode-intelephense-client", // PHP開発
        "dbaeumer.vscode-eslint",          // JavaScript
        "esbenp.prettier-vscode",          // コードフォーマット
        "formulahendry.auto-rename-tag"    // HTML編集
    ]
}

便利なワークスペース設定

json
// .vscode/settings.json
{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "php.validate.executablePath": "/usr/local/bin/php",
    "files.associations": {
        "*.php": "php"
    },
    "search.exclude": {
        "**/node_modules": true,
        "**/vendor": true
    }
}

2. 開発用シェルスクリプト

プロジェクト初期化スクリプト

bash
#!/bin/bash
# init-project.sh

# 必要なディレクトリ作成
mkdir -p wp-content/{themes,plugins,uploads}

# 環境設定ファイルの作成
cat > .env << EOL
WORDPRESS_DB_NAME=wordpress
WORDPRESS_DB_USER=wp_user
WORDPRESS_DB_PASSWORD=wp_password
MYSQL_ROOT_PASSWORD=somewordpress
EOL

# Dockerの起動
docker-compose up -d

echo "WordPress開発環境を初期化しました"

開発支援スクリプト

bash
#!/bin/bash
# dev-utils.sh

# データベースバックアップ
backup_db() {
    docker-compose exec -T db mysqldump -u"$WORDPRESS_DB_USER" -p"$WORDPRESS_DB_PASSWORD" wordpress > backup_$(date +%Y%m%d_%H%M%S).sql
}

# WP-CLIの実行
wp_cli() {
    docker-compose exec wordpress wp "$@"
}

# テーマのwatch
watch_theme() {
    cd wp-content/themes/your-theme && npm run watch
}

3. 便利なエイリアス設定

HTML
# ~/.zshrcまたは~/.bash_profileに追加
alias dcup='docker-compose up -d'
alias dcdown='docker-compose down'
alias dclog='docker-compose logs -f'
alias dcexec='docker-compose exec'
alias wp='docker-compose exec wordpress wp'
alias wpbash='docker-compose exec wordpress bash'

4. 自動化スクリプト

テーマ開発の自動化

JS
// package.json
{
  "scripts": {
    "start": "docker-compose up -d && npm run watch",
    "watch": "vite",
    "build": "vite build",
    "lint": "eslint src --ext .js,.jsx",
    "format": "prettier --write \"src/**/*.{js,jsx,css,scss}\""
  }
}

データベース操作の自動化

bash
#!/bin/bash
# db-operations.sh

# 開発用データのインポート
import_dev_data() {
    docker-compose exec -T db mysql -u"$WORDPRESS_DB_USER" -p"$WORDPRESS_DB_PASSWORD" wordpress < dev_data.sql
}

# テスト用データのリセット
reset_test_data() {
    docker-compose exec -T db mysql -u"$WORDPRESS_DB_USER" -p"$WORDPRESS_DB_PASSWORD" wordpress < test_data.sql
}

5. デバッグ環境の整備

Xdebugの設定

ini
# xdebug.ini
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_host=host.docker.internal
xdebug.client_port=9003

VS Codeでのデバッグ設定

json
// launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "pathMappings": {
                "/var/www/html": "${workspaceFolder}"
            }
        }
    ]
}

まとめ

WordPressのDocker開発環境を構築することで、効率的な開発が可能になります。

この記事で説明した内容を整理し、今後の学習の方向性についても触れていきましょう。

Docker環境構築のベストプラクティス

1. 基本構成を守る

yaml
# docker-compose.ymlの基本構成
services:
  wordpress:
    image: wordpress:latest
    volumes:
      - ./wp-content:/var/www/html/wp-content
  
  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
  
  phpmyadmin:
    image: phpmyadmin/phpmyadmin

2. セキュリティを考慮

bash
# 環境変数は.envファイルで管理
touch .env
echo "MYSQL_ROOT_PASSWORD=secure_password" >> .env
echo "WORDPRESS_DB_PASSWORD=secure_password" >> .env

開発環境の使いこなし方

1. 効率的な開発サイクル

bash
# 1. 環境の起動
docker-compose up -d

# 2. 開発作業
code .

# 3. 変更の確認
docker-compose logs -f

# 4. 環境の停止
docker-compose down

2. バックアップの習慣化

bash
# データベースのバックアップ
docker-compose exec db mysqldump -u root -p wordpress > backup.sql

# wp-contentのバックアップ
tar -czf wp-content-backup.tar.gz wp-content/

最後に

Docker環境でのWordPress開発は、最初は少し難しく感じるかもしれません。

しかし、基本的な概念を理解し、実際に使い始めると、その便利さを実感できるはずです。

特に以下の点を意識して開発を進めることをお勧めします：

  1. 自動化を心がける
    • 繰り返し作業はスクリプト化
    • デプロイ手順の文書化
  2. セキュリティを意識
    • 環境変数の適切な管理
    • バックアップの定期的な実施
  3. チーム開発を意識
    • コードの可読性
    • ドキュメントの整備
    • 共有しやすい環境設定

この記事で紹介した内容を基に、自分の開発スタイルに合った環境をカスタマイズし、効率的な開発を進めていってください。

何か問題が発生した際は、トラブルシューティングのセクションを参考に、一つずつ解決していくことをお勧めします。

Docker環境でのWordPress開発は、現代の開発者にとって必須のスキルとなっています。

ぜひ、この機会に習得して、より良い開発環境を構築してください。

前の記事

プログラミングの3つの考え方：手続き型、関数型、オブジェクト指…

次の記事

Flutter入門：環境構築からHello Worldまで【初…