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

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

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

[Docker公式](https://www.docker.com/)

※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](https://hub.docker.com/)ページからタグを探し、docker-compose.yml内のimage部分を変更します。

[wordpress Tags | Docker Hub](https://hub.docker.com/_/wordpress/tags)
[mysql Tags | Docker Hub](https://hub.docker.com/_/mysql/tags)
[phpmyadmin Tags | Docker Hub](https://hub.docker.com/_/phpmyadmin/tags)

__例__
```
image: wordpress:php7.4
image: wordpress:latest
image: wordpress:php8.1-apache
```

#### 参考

[クィックスタート: Compose と WordPress — Docker-docs-ja 20.10 ドキュメント](https://docs.docker.jp/compose/wordpress.html)
[【docker】wordpressをローカルに構築](https://zenn.dev/persona/articles/50f87da99c92af)
[DockerでWordPressの開発環境を作成する（M1 Mac）](https://zenn.dev/toono_f/articles/af9c62f124b44a)
[Dockerで立ち上げたMySQLにログインすると日本語が文字化け](https://qiita.com/luccafort/items/0553c589dcc6459746bc)

### 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 アップロード制限緩和設定 | 優技録](https://www.yuulinux.tokyo/16613/)

## 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が自動リロードしないときの対処法](https://kyo-log.com/browsersync-not-auto-reload/)

### 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ドキュメント](https://browsersync.io/docs)
[Browsersyncコマンドライン](https://browsersync.io/docs/command-line)

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