Zenn
🙄

WordPressの開発環境をdockerで構築しライブリロードさせる

2022/06/08に公開
Docker
WordPress
tech

dockerで構築したWordPressの開発環境だとファイルを変更した時にライブリロードができない。逐一更新するのはとても非効率的なので、ライブリロードを導入する。

方針

webpackのdev-serverのproxyではどうしても上手くいかなかったので、browser-syncを使います。

手順は簡単で

  1. dockerでWordPress環境を立ち上げる
  2. webpackでdockerのポートに合わせてbrowser-syncを設定する

この2つだけです。

dockerの設定

まずdockerについてです。

ほぼdockerの公式ページ通りに進めてください。
https://docs.docker.jp/compose/wordpress.html

僕はプロジェクトフォルダ直下にthemesというファイルを作成させて、WordPressの新しいテーマとしてマウントさせています。

docker-compose.yml
version: "3"

services:
  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    volumes:
    　// WordPressのファイルを一式マウント
      - ./wp/:/var/www/html
      // new-themeというテーマを作ってからマウントさせる
      - ./themes/:/var/www/html/wp-content/themes/new-theme
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
volumes:
  db_data:

以後、themesフォルダの中を作っていきます

themes
wp
docker-compose.yml

webpackの設定

webpackの設定の前に簡易的に表示を確認するためのWordPressのテーマファイルを作成します。

themes/
├─ index.php
└─ style.css
wp/ ...省略
docker-compose.yml
index.php
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
 <h1>hello WordPress</h1> 
</body>
</html>
style.css
/*
Theme Name : new-theme
Author : hoge
*/

webpackを使う準備をします。themesフォルダ内で以下のコマンドを実行します。

$ npm init

$ yarn add -D webpack webpack-cli

browser-syncをインストールします

$ yarn add -D browser-sync browser-sync-webpack-plugin

webpack.config.jsをthemes内に作成し、以下の設定をします。

themes/webpack.config.js
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");

module.exports = {
  mode: "development",

  plugins: [
    new BrowserSyncPlugin({
      host: "localhost",
      files: ["./**/*.php"],
      port: 3000,
      // dockerとホストをつないでいるポートをproxyで指定
      proxy: {
        target: "http://localhost:8000",
      },
    }),
  ],
};

注意する点としては、dockerとホストをつないでいるポートにproxyを指定してください。

動作確認

設定は終わったので動作確認をします。

dockerを起動

$ docker compose up -d

package.jsonにscriptsを追加

// 省略
 "scripts": {
    "start": "webpack -w"
  },
// 省略

webpackを起動

$ yarn start

index.phpを変更してライブリロードが走るか確認してみてください。
ライブリロードが走ればOKです。

その他アセットファイル

browser-syncはオプションのfilesに監視するファイルを設定します。webpackでcssやjsのバンドルを行っている場合、出力されるフォルダをfilesの設定に入れれば、バンドルされるごとにライブリロードが走ります。

ご自身のディレクトリに合わせて設定してください。

感想

今回はライブリロードを使いましたが、本当はViteやホットリロードを調査していました。
dockerでのライブリロードというハードルは一つクリアしたので、またの機会にチャレンジしてみます！
結局ブラウザのリロードはbrowser-syncになりそうですが。。。
https://github.com/idleberg/php-wordpress-vite-assets

Discussion