# local に WP の docker 環境を構築して簡単にテーマを編集
目次
# はじめに
検証環境がない WP サイトをリニューアル(主に見た目)する必要性に迫られたため、 ローカルで環境を作ってステークホルダーに確認してもらえるまでを実装しました。
# docker と docker-compose を入れる
docker が入っていない場合 docker を入れます。 ここではこれらのインストールは割愛します。
docker そのものについては色々と良記事があるので参考に貼っておきます。
https://qiita.com/gold-kou/items/44860fbda1a34a001fc1
# docker-compose.yml の作成
まずは公式サイトを参考にdocker-compose.ymlを記述します。
公式サイトに載っている設定は以下。
version: '3.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
ports:
- '8000:80'
restart: always
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
WORDPRESS_DB_NAME: wordpress
volumes:
db_data: {}
# 初回立ち上げ
上記設定でまずは立ち上げて見ます。
docker-compose up -d
下記のように表示されたらlocalhost:8000で接続して見てください。
Creating network "docker-test_default" with the default driver
Creating docker-test_db_1 ... done
Creating docker-test_wordpress_1 ... done
# down
これからテーマの編集や初期データをあらかじめ用意する作業などを行うので、一旦落としておきます。 docker を落とすコマンドは以下。
docker-compose down
Stopping docker-test_wordpress_1 ... done
Stopping docker-test_db_1 ... done
Removing docker-test_wordpress_1 ... done
Removing docker-test_db_1 ... done
Removing network docker-test_default
これでlocalhost:8000に繋いでも何も表示されないはずです。
# local 環境で theme を編集できるようにする
テーマを編集する際に毎回 docker コンテナ内のデータを編集するのは現実的ではありません。 したがってホストマシン(docker 起動元)の特定のディレクトリを docker コンテナ上にマウントさせます。
以下の記事が非常に詳細で参考になりました。
docker-compose を使って WordPress テーマ開発環境を構築しよう
version: '3.3'
services:
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: root-pass
MYSQL_DATABASE: wordpress
MYSQL_USER: db-user
MYSQL_PASSWORD: db-pass
wordpress:
depends_on:
- db
image: wordpress:latest
volumes:
+ - ./wp-content:/var/www/html/wp-content
ports:
- '8000:80'
restart: always
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: db-user
WORDPRESS_DB_PASSWORD: db-pass
WORDPRESS_DB_NAME: wordpress
volumes:
db_data: {}