DockerとNPM scripts(Browsersync)でWordPressコーディング環境を作る

普段、静的ページ作成はnpm-scripts(EJS、SCSS、JavaScript)を使用しているのですが、今回はDockerを使用したWordPress構築環境と合体させる為に調べた参考ページと手順を残します。

Docker Desktopのダウンロード&インストール

Docker公式

※macOSの場合、IntelチップとAppleチップはアプリが別なので注意

1. 起動に必要なファイルの作成

docker-compose.ymlを作成

docker-compose.yml

version: '3'

services:

  db:
    # platform: linux/x86_64 # Appleシリコンに対応する場合
    image: mysql:5.7
    command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci # MySQLの文字コードをUTF-8に指定
    volumes:
      - db_data:/var/lib/mysql
    ports:
      - "3306:3306"
    restart: always
    environment:
      TZ: 'Asia/Tokyo'
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

  wordpress:
    depends_on:
      - db
    image: wordpress:php7.4
    volumes:
      - ./wp:/var/www/html
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_TABLE_PREFIX: wp_ # データベースの接頭辞
      WORDPRESS_DEBUG: 1 # WordPressのデバックモードON

  phpmyadmin:
    image: phpmyadmin:5.2.0
    volumes: # phpMyAdminの設定ファイル読み込み
      - ./phpmyadmin-misc.ini:/usr/local/etc/php/conf.d/phpmyadmin-misc.ini
    restart: always
    ports:
      - "8888:80"
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=db
      - PMA_USER=wordpress
      - PMA_PASSWORD=wordpress

volumes:
    db_data: # データベースの永続化

各ソフトウェアバージョンの変更方法

各ソフトフェアのDocker Hubページからタグを探し、docker-compose.yml内のimage部分を変更します。

wordpress Tags | Docker Hub
mysql Tags | Docker Hub
phpmyadmin Tags | Docker Hub

例

image: wordpress:php7.4
image: wordpress:latest
image: wordpress:php8.1-apache

参考

クィックスタート: Compose と WordPress — Docker-docs-ja 20.10 ドキュメント
【docker】wordpressをローカルに構築
DockerでWordPressの開発環境を作成する（M1 Mac）
Dockerで立ち上げたMySQLにログインすると日本語が文字化け

phpmyadmin-misc.iniを作成

phpMyAdminの初期設定(データベースのインポートが最大2MBまでとなっている等)を変更する為、phpmyadmin-misc.iniを作成し、設定を書きます。

phpmyadmin-misc.ini

allow_url_fopen = Off
max_execution_time = 600
memory_limit = 64M
post_max_size = 64M
upload_max_filesize = 64M

参考

docker-compose phpmyadmin アップロード制限緩和設定 | 優技録

2. Dockerコンテナ起動／終了方法&WordPressインストール

起動方法

Docker Desktopを起動した状態で、

docker-compose up

初回はWordPressのダウンロード完了後、下記のようなメッセージがターミナルに表示されたら、localhostにアクセス可能です。

Complete! WordPress has been successfully copied to /var/www/html

2回目以降は下記のようなメッセージが表示された時点で、アクセス可能です。(Complete!...は表示されません)

Version: '5.7.40'  socket: '/var/run/mysqld/mysqld.sock'  port: 3306  MySQL Community Server (GPL)

WordPressのアドレス & 初回インストール

http://localhost:8000/

WordPress管理画面アドレス

http://localhost:8000/wp-login.php

phpMyAdminのアドレス

http://localhost:8888/

終了方法

Ctrl + C (これでphpMyAdmin停止)
↓
docker-compose down

3. Browsersyncのインストールと起動

package.jsonの作成

npm init -y

Browsersyncのインストール

npm i -D browser-sync

bs-config.js(Browsersyncの設定ファイル)を作成

npx browser-sync init

例

bs-config.js

module.exports = {
	"ui": {
		"port": 3001
	},
	"files": [
		"wp/**/*" // 監視したいフォルダに変更
	],
	"watchEvents": [
		"change"
	],
	"watch": false,
	"ignore": [],
	"single": false,
	"watchOptions": {
		"ignoreInitial": true
	},
	"server": false,
	"proxy": 'localhost:8000', // Dockerコンテナ起動時に使えるようになるlocalhostを指定
	"port": 3000,
	"middleware": false,
	"serveStatic": [],
	"ghostMode": {
		"clicks": true,
		"scroll": true,
		"location": true,
		"forms": {
			"submit": true,
			"inputs": true,
			"toggles": true
		}
	},
	"logLevel": "info",
	"logPrefix": "Browsersync",
	"logConnections": false,
	"logFileChanges": true,
	"logSnippet": true,
	"rewriteRules": [],
	"open": "internal",
	"browser": "default",
	"cors": false,
	"xip": false,
	"hostnameSuffix": false,
	"reloadOnRestart": false,
	"notify": false,
	"scrollProportionally": true,
	"scrollThrottle": 0,
	"scrollRestoreTechnique": "window.name",
	"scrollElements": [],
	"scrollElementMapping": [],
	"reloadDelay": 0,
	"reloadDebounce": 500,
	"reloadThrottle": 0,
	"plugins": [],
	"injectChanges": true,
	"startPath": null,
	"minify": true,
	"host": null,
	"localOnly": false,
	"codeSync": true,
	"timestamps": true,
	"clientEvents": [
		"scroll",
		"scroll:element",
		"input:text",
		"input:toggles",
		"form:submit",
		"form:reset",
		"click"
	],
	"socket": {
		"socketIoOptions": {
			"log": false
		},
		"socketIoClientConfig": {
			"reconnectionAttempts": 50
		},
		"path": "/browser-sync/socket.io",
		"clientPath": "/browser-sync",
		"namespace": "/browser-sync",
		"clients": {
			"heartbeatTimeout": 5000
		}
	},
	"tagNames": {
		"less": "link",
		"scss": "link",
		"css": "link",
		"jpg": "img",
		"jpeg": "img",
		"png": "img",
		"svg": "img",
		"gif": "img",
		"js": "script"
	},
	"injectNotification": false,
	"snippetOptions": {
		"rule": {
			"match": /<\/head>/i,
			fn: function (snippet, match) {
				return snippet + match;
			}
		}
	}
};

参考

BrowserSyncが自動リロードしないときの対処法

package.jsonにBrowsersync起動用のスクリプトを追加

package.json

{
  "name": "qiita-docker-wordpress",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start:server": "browser-sync start --config bs-config.js" 
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.27.11"
  }
}

備考

Node.jsのバージョンによって、下記等を行う必要がある可能性があります。
(本記事のバージョンはv19.3.0で特にはエラーなし。うまく行かない場合、ターミナルにエラーがでます。)

• package.jsonに"type": "module"を追記
• bs-config.jsの拡張子を.cjsに変更

Browsersync起動方法

Dockerコンテナを起動している状態で、下記コマンドを入力して起動します。

npm run start:server

参考

Browsersyncドキュメント
Browsersyncコマンドライン

まとめ

ここからそれぞれ普段お使いのコーディング環境を合体させれば、スムーズにWordPressコーディング環境ができると思います！今までXAMP、MAMP、Local等を使用してきましたが、Docker経由にしたおかげで共有がとても楽になりました🚀