DockerでWordPress環境を構築し、Node.jsでSassコンパイルしながらBrowserSyncで自動でリロード

概要

Dockerを使ってWordPressの開発環境を構築し、Node.jsを活用して以下の機能を実装します。

DockerでローカルにWordPress構築
Sassのコンパイルを自動化
BrowserSyncによる自動ブラウザリロード

本記事では、ディレクトリ構造や必要な設定ファイルについて詳しく解説します。

ディレクトリ構造

project-root/
├── docker-compose.yml
├── package.json
├── sql/                   # MySQLのデータ格納用（初回は自動で作成される）
├── public_html/           # WordPressのルートディレクトリ（初回は自動で作成される）
│   ├── wp-content/
│   │   ├── themes/
│   │   │   ├── your-theme/   # テーマディレクトリ（テーマは自分で用意）
│   │   │   │   ├── assets/
│   │   │   │   │   ├── css/  # Sassコンパイル先
│   │   │   │   │   ├── scss/ # Sassファイル格納場所

docker-compose.yml の設定

以下の内容で docker-compose.yml を作成します。

version: '3.8'
services:
  wordpress:
    image: wordpress:php7.4
    ports:
      - "8080:80"
    volumes:
      - ./public_html:/var/www/html
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: wpuser
      WORDPRESS_DB_PASSWORD: wppass
      WORDPRESS_DB_NAME: wordpress
    depends_on:
      - db

  db:
    image: mysql:8.0
    restart: always
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wpuser
      MYSQL_PASSWORD: wppass
      MYSQL_ROOT_PASSWORD: rootpassword
    volumes:
      - ./sql:/var/lib/mysql
  
  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    restart: always
    environment:
      PMA_HOST: db
      MYSQL_ROOT_PASSWORD: rootpassword
    ports:
      - "0:80"
    depends_on:
      - db

package.json の設定

SassのコンパイルとBrowserSyncの自動リロードを設定します。

{
    "name": "your-project-name",
    "version": "1.0.0",
    "scripts": {
        "sass:watch": "sass --watch --style=compressed --quiet public_html/wp-content/themes/your-theme/assets/scss:public_html/wp-content/themes/your-theme/assets/css",
        "serve": "browser-sync start --proxy localhost:8080 --files 'public_html/wp-content/themes/your-theme/**/*'",
        "docker:up": "docker-compose up -d",
        "docker:down": "docker-compose down",
        "docker:allstop": "docker stop $(docker ps -a -q)",
        "start": "npm-run-all docker:up --parallel sass:watch serve"
    },
    "devDependencies": {
        "browser-sync": "^3.0.3",
        "sass": "^1.85.1"
    },
    "dependencies": {
        "npm-run-all": "^4.1.5"
    }
}

スクリプトの説明

sass:watch : scss フォルダ内のSassファイルを監視し、css にコンパイル
serve : BrowserSync を起動し、WordPressの変更をリアルタイムで反映
docker:up : Dockerコンテナを起動
docker:down : Dockerコンテナを停止
docker:allstop : すべてのDockerコンテナを停止
start : docker:up してから sass:watch、serve を並行実行

環境のセットアップ

1. 必要なパッケージのインストール

docker-compose up -d
npm install

2. WordPressのセットアップ

ブラウザで http://localhost:8080/ にアクセスし、以下の情報を入力してWordPressをセットアップします。

データベース名: wordpress
ユーザー名: wpuser
パスワード: wppass
データベースホスト: db

3. Docker起動→SassコンパイルとBrowserSyncで自動でリロード

npm start

このコマンドを実行すると、Dockerコンテナが起動し、Sassの監視とBrowserSyncによる自動リロードが同時に開始されます。ブラウザが自動で開き、http://localhost:3000/ でサイトを確認できます。

まとめ

DockerでWordPress環境を構築し、Node.jsを活用して開発効率を向上させる方法を紹介しました。npm start で一括管理できるため、開発がスムーズになります。

概要