DockerでWordPressを立ち上げてローカル開発環境を整える

2021年8月9日2023年12月31日

WordPressで「こういう見た目にしたいな…」とか「こういう機能を持たせたいな…」と思うと、CSSやPHPをいじらないといけないことも多くなります。

ですがCSSやPHPは、設定に失敗すればブログやホームページの見た目や機能を大幅に崩してしまう可能性があります。

そこで有効な手段がローカル開発です。

自分の手元にあるパソコン上で開発・テストして、問題がなければ本番環境と同期すればいいんです。

ですが、意外とローカル開発したWordPressのデータ同期に困ることがあります。

この記事では、WordPressのローカル開発環境の定番Dockerの本番環境との同期の方法について詳しく説明していきます。

この記事はこんな人にオススメ

本番環境で実行する前にDockerを使ってWordPressを編集している（しようとしている）
実際DockerのWordPressコンテナを本番環境にどうやって同期させるの？
DockerのWordPressコンテナと本番環境を同期させるのにwordmoveってのがあるらしいけど、どう使うの？

ローカル開発環境を同期するときに問題になったところ

以下のところで詰まったので、このあたりの開発環境が似ている人は参考になるかもしれないです。

サブディレクトリで運用するくらいの開発規模になると、Dockerの使いがいも出てくると思うのでこのあたりは必見です。

https + サブディレクトリでブログ運用の環境構築。
wordmoveでエラー吐きまくられた

クマ

もちろんサブディレクトリのWordPressでなくても同期できます！適宜読み替えてもらえばOKです！

Dockerのローカル開発を整えるための事前準備

パソコン、Docker、gitを使えるようにしておきましょう。

参考までに、私は

MacBook Air (M1)
Docker Desktop for Mac
GitHub

でやっています。

基本的な流れは以下の記事を参考にしました。

Docker-composeで最強（自分史上）のWordPress開発環境を作る

Dockerのローカル開発環境を整えていく

以下では、

「ローカル」→　パソコン内
「コンテナ」→　パソコン内にあるDockerコンテナ
「本番」→　サーバなど、インターネットから閲覧できるWordPress

を指します。

ローカルに適当に作業ディレクトリを作って、gitを使ってリポジトリをクローン

以下のコマンドを作業ディレクトリで実行します。

$ git clone https://github.com/kawamataryo/quick-start-wordpress-docker.git project-dir

これで大まかなファイル群はコピーできたはずです。

.envファイルに環境変数を入れていく

docker-composeで使う環境変数を記入していきますが、地味にハマりました。当たり前ですが、正確な情報を記入していきましょう。

クマ

docker-composeはDocker Desktopをインストールしてたら入っているはず。docker-composeを使うと（今回初めて使った）、様々な設定を適応しながら複数のコンテナを立ち上げられるので、使い慣れればとても便利。

# -------------------------------------------
# wordpress・mysqlコンテナの設定
# -------------------------------------------
# プロダクトの名前 作成されるcontainer名の接頭語として使用
PRODUCTION_NAME=
# local WordPressを紐付けるPort名（ex: 8080)
LOCAL_SERVER_PORT=
# localのmysqlを紐付けるPort名（ex: 3306)
LOCAL_DB_PORT=
# -------------------------------------------
# wordmoveコンテナの設定
# -------------------------------------------
# 全て本番環境の情報
# URL
PRODUCTION_URL=
# WordPressのディレクトリの絶対パス
PRODUCTION_DIR_PATH=
# DB名
PRODUCTION_DB_NAME=
# DBのユーザー名
PRODUCTION_DB_USER=
# DBのパスワード
PRODUCTION_DB_PASSWORD=
# DBのホスト名
PRODUCTION_DB_HOST=
# DBの接続ポート
PRODUCTION_DB_PORT=
# SSHホスト名
PRODUCTION_SSH_HOST=
# SSHユーザー名
PRODUCTION_SSH_USER=
# SSHポート名
PRODUCTION_SSH_PORT=

URL、WordPressのディレクトリの絶対パスなど、それぞれのサーバーの環境によるので、確認しながら正確な値を入れていきましょう。どんな値を入れればいいか分からなければ、ググって調べましょう。（２、３箇所間違えてて、その都度最初からやり直しました。無駄に時間を食うので、ここはキチンと入れましょう。反省…。）

例．PRODUCTION_URL=https://ドメイン名/サブディレクトリ

ローカルにあるdocker-compose.ymlをいじる

クマ

docker-compose.ymlをちょっと書き直します。docker-compose.ymlはDockerのコンテナの環境設定をまとめて記述しておく設定ファイルです。これでコマンドひとつで複数コンテナが設定通りに立ち上がります。

以下にdocker-compose.ymlを記述しておきます。

version: '3'
services:
    database:
        platform: linux/x86_64
        image: mysql:5.7
        command:
            - "--character-set-server=utf8"
            - "--collation-server=utf8_unicode_ci"
        ports:
            - "${LOCAL_DB_PORT}:3306"
        restart: on-failure:5
        container_name: "${PRODUCTION_NAME}_db"
        environment:
            MYSQL_USER: wordpress
            MYSQL_DATABASE: wordpress
            MYSQL_PASSWORD: wordpress
            MYSQL_ROOT_PASSWORD: wordpress
    wordpress:
        depends_on:
            - database
        image: wordpress:latest
        container_name: "${PRODUCTION_NAME}_wordpress"
        ports:
            - "${LOCAL_SERVER_PORT}:80"
            - "${HTTPS_PORT}:443"
        restart: on-failure:5
        volumes:
            - ./public:/var/www/html
            - ./certs:/etc/ssl/private　※1
        working_dir: /var/www/html/サブディレクトリ　※2
        environment:
            WORDPRESS_DB_HOST: database:3306
            WORDPRESS_DB_NAME: wordpress
            WORDPRESS_DB_USER: wordpress
            WORDPRESS_DB_PASSWORD: wordpress
    wordmove:
        tty: true
        depends_on:
            - wordpress
        image: welaika/wordmove
        restart: on-failure:5
        container_name: "${PRODUCTION_NAME}_wordmove"
        volumes:
            - ./config:/home/
            - ./public:/var/www/html
            - ~/.ssh:/home/.ssh　※3
        environment:
            LOCAL_SERVER_PORT: "${LOCAL_SERVER_PORT}"
            PRODUCTION_URL: "${PRODUCTION_URL}"
            PRODUCTION_DIR_PATH: "${PRODUCTION_DIR_PATH}"
            PRODUCTION_DB_NAME: "${PRODUCTION_DB_NAME}"
            PRODUCTION_DB_USER: "${PRODUCTION_DB_USER}"
            PRODUCTION_DB_PASSWORD: "${PRODUCTION_DB_PASSWORD}"
            PRODUCTION_DB_HOST: "${PRODUCTION_DB_HOST}"
            PRODUCTION_DB_PORT: "${PRODUCTION_DB_PORT}"
            PRODUCTION_SSH_HOST: "${PRODUCTION_SSH_HOST}"
            PRODUCTION_SSH_USER: "${PRODUCTION_SSH_USER}"
            PRODUCTION_SSH_PORT: "${PRODUCTION_SSH_PORT}"

※1　あとでSSL証明書を発行して./certsディレクトリに入れておきます。で、その./certsディレクトリをwordpressコンテナにマウントします。（ ./certs:/etc/ssl/private でPC内の./certsをコンテナの/etc/ssl/privateにマウントする、という意味）
※2　サブディレクトリで運用している場合、ここを本番環境と揃えておきます。
※3　wordmoveでのローカルと本番の環境同期はssh接続で行います。秘密鍵を入れた~/.sshディレクトリをコンテナの/home/.sshにマウントします。

ここまでできたら、コマンドラインでdocker-compose.ymlのあるディレクトリまで移動して、以下のコマンドで今設定したコンテナ達を立ち上げます。

$ docker-comopse up -d

クマ

-dオプションでバックグラウンド実行します。

参考

ちなみに、その他、wordmoveのコンテナと本番の環境を同期するまでに、以下のdocker-composeコマンドをよく使いました。

$ docker-dompose stop　　　← コンテナ達を停止させる。
$ docker-compose restart　　　←　コンテナ達をリスタートさせる。
$ docker-compose down　　　←　コンテナ達を破棄する。コンテナのデータ、データベースなど全部破棄してしまう。docker-compose.ymlを書き直したときなどはこれをせざるを得ない。

SSL証明書を発行してローカル環境でHTTPS接続ができるようにする

こちらを参考にHTTPS接続ができるようにします。
HTTPSに対応したWordPressのローカル開発環境をDockerで構築

クマ

証明書を発行するあたりまでは、上記のサイトをご覧ください。

mkcertをインストール。
作業ディレクトリに./certsディレクトリを作って移動し、証明書を発行。
以下のコマンドでwordpressのコンテナに入る。コンテナ名は docker-compose ps などで確認できる。（「docker-compose.ymlをいじる」の※1でマウントしてるところに証明書が見えるはず。）

$ docker exec -it コンテナ名 /bin/bash

コンテナ内のSSLの設定ファイルをいじるためにエディタをインストールする。

$ apt-get update
$ apt-get install vim

SSLの設定ファイルをいじる。

$ vi /etc/apache2/sites-available/default-ssl.conf
# 32, 33行目を編集
SSLCertificateFile /etc/ssl/private/localhost+1.pem
SSLCertificateKeyFile /etc/ssl/private/localhost+1-key.pem

SSLの設定を反映する。

$ a2ensite default-ssl
$ a2enmod ssl

exitでコンテナから脱出。docker-compose restartでコンテナ再起動。

クマ

長くなってきました…。が、ここまできたら、ブラウザで「https://localhost/サブディレクトリ」と入力すれば、wordpressに接続できるはず。あと少し。

movefile.ymlをいじる

movefile.ymlはwordmoveでデータを同期する際の設定ファイルです。ローカルの作業ディレクトリ内のconfigディレクトリにあるはずです。以下にファイルの内容を載せておきます。

global:
  sql_adapter: default
local:
  vhost: "https://localhost/サブディレクトリ"　※1
  wordpress_path: "/var/www/html/サブディレクトリ/"　※2
  database:
    name: "wordpress"
    user: "root"
    password: "wordpress"
    host: "database"
production:
  vhost: "<%= ENV['PRODUCTION_URL'] %>"
  wordpress_path: "<%= ENV['PRODUCTION_DIR_PATH'] %>"
  database:
    name: "<%= ENV['PRODUCTION_DB_NAME'] %>"
    user: "<%= ENV['PRODUCTION_DB_USER'] %>"
    password: "<%= ENV['PRODUCTION_DB_PASSWORD'] %>"
    host: "<%= ENV['PRODUCTION_DB_HOST'] %>"
    port: "<%= ENV['PRODUCTION_DB_PORT'] %>"
  exclude:
    - '.git/'
    - '.gitignore'
    - '.gitmodules'
    - '.env'
    - 'node_modules/'
    - 'bin/'
    - 'tmp/*'
    - 'Gemfile*'
    - 'Movefile'
    - 'movefile'
    - 'movefile.yml'
    - 'movefile.yaml'
    - 'wp-config.php'
    - 'wp-content/*.sql.gz'
    - '*.orig'
    - "wp-content/uploads/backwpup*/*"
    - ".htaccess"
  ssh:
    host: "<%= ENV['PRODUCTION_SSH_HOST'] %>"
    user: "<%= ENV['PRODUCTION_SSH_USER'] %>"
    port: "<%= ENV['PRODUCTION_SSH_PORT'] %>"
    rsync_options: "--verbose"

※1　もともとは”http://localhost:<%= ENV[‘LOCAL_SERVER_PORT’] %>”となっているはずです。が、HTTPS接続に変更したので、ポート番号を.envファイルから拾ってくる形ではなく、この形にして直接記入しています。
※2　この形で。

いよいよwordmoveでローカルと本番環境を同期

SSH接続に使う秘密鍵を~/.sshに入れておく

クマ

うちはConoHa WINGのレンタルサーバーを借りています。ConoHa WINGでは「サーバー管理」→「SSH」→「＋ SSH Key（画面右上）」で設定保存したらプライベートキー（秘密鍵）を発行してくれます。他のサーバーも似たようなものだと思います。

wordmoveコンテナに入ります。

$ docker exec -w /home/ -it wordmoveのコンテナ名 /bin/bash

SSH設定。コンテナ内で以下のコマンドを実行します。

$ ssh-agent bash
$ ssh-add /home/.ssh/秘密鍵

以下のコマンドで本番環境のデータをローカルに引っ張ってきます。

$ wordmove pull --all

逆に、ローカルのデータを本番環境に上げるときは以下のコマンドを使います。

$ wordmove push --all

この２つのコマンドを実行すると、コンテナ、本番のデータが置き換わるので注意して行いましょう。

クマ

私がやったときはwordmove pull –allでエラーが出まくりました。一つずつ調べましたが、結果環境変数が間違ってました。エラーログはよく読もう…。そして変数は正しく記入しよう…。（当たり前）

ちなみに、wordmove pull –all をしたときに、以下の警告が出ることがあります。

perl: warning: Setting locale failed.
perl: warning: Please check that your locale settings:
	LANGUAGE = (unset),
	LC_ALL = (unset),
	LANG = "C.UTF-8"
    are supported and installed on your system.
perl: warning: Falling back to the standard locale ("C").

ググってみたら色々と原因はあるようですが、私は以下の修正で警告が出なくなりました。

wordmoveコンテナ内でssh-configファイルをいじるので、エディタをインストール。

$ apt-get update
$ apt-get install vim

ssh-configファイルの以下の部分をコメントアウト

$ vi /etc/ssh/ssh_config
…
SendEnv LANG LC_*　→ # SendEnv LANG LC_* としてここをコメントアウト

改めてwordmove pull –all

クマ

これでようやくwordmoveを使ってローカルのコンテナと本番環境を同期できるようになりました！お疲れ様でした！コマンド一発で同期できるので、実験的に本番環境をいじりたいときなどはすごく便利。

ちなみにサーバーはConoHa WING を使っています。

クマ

コスパ最高でおすすめです。レンタルサーバーを考えている人は検討してみてください。

ConoHa WINGをチェック！

まとめ

かなり長くなりました。結構つまづきどころがあったので（自分だけかもしれませんが）、健忘録として残しておきます。同じようにつまづいている方の参考になれば幸いです。

自分で学ぶことは大事ですが、一人ではどうしても躓きがちです。本気でエンジニアを目指したい方は教えてもらう、というのも重要だと思います。

ちょっと一息…

WordPressのテーマは何をお使いでしょうか？

クマ

このブログでは有料テーマSWELLを使っています！

私も以前は無料テーマを渡り歩いていました…。

ですが、「あの機能が欲しいな…」とか思う度に色々調べてプラグインを入れたりCSSを触ったり…正直、

クマ

ブログって面倒だな…。なかなか収益にもつながらないし…。

と無料テーマを使っている時期は思っていました。

ですが、あるとき「もしかして有料テーマにしたら楽になるんじゃないか…？今まで苦労して実装してた機能がほとんどテーマ内にあるじゃないか…」と気づき、思い切って有料テーマにしました。

決して安いものではないのでちょっとためらいましたが、思い切って導入して正解でした。

そこからブログ運営の効率がグン！と上がりました。特に、導入時には気にしていなかった広告管理の効率化のメリットが大きく、収益も上がりました。

クマ

ブログ…始めてみたけど、大変だし、成果も上がらない…。

と感じている人は、有料テーマの導入を検討してみてはいかがでしょうか？「ここまで作ってきた」「これから作る」ブログの質・量が断然変わりますし、無料のテーマより断然収益を狙ったブログにしやすくなります。

SWELLの購入はこちら

「有料テーマって他にどんなのがあるの？」という人はぜひこちらの記事もご覧ください。