Windows環境でDocker＋WordPressの同期とデバッグ環境を超カンタンに作る

　ターミナルからコマンドを１つ１つ打込む作業はもううんざり！本番サイトの同期からデバッグまで、オールインワンの環境をすぐに作れる手段を紹介する。

ネットの解説記事が役に立たないのはなぜか

　Wordpressのサイトをローカルで作りたい！そう思って検索すると沢山ヒットするが、うまくいかない場合が多いと思う。いろんなサイトを見て回って、あれこれ試行錯誤しながら障害を乗り越えないといけない。この原因は、次だと思う。

・初心者にわかる内容になっていない（個人のメモ的な内容が多い）
・再現性がない（クリーンインストールからテストしていない）
・すべてを網羅していない

　大抵の記事はベテランが書いている。前提条件をすっ飛ばしあり、コマンド実行についても、どこから打っているのか定かでない（そのくらいわかるでしょ、といった形で省略されている）。つまり多くの記事がベテラン向けであり、これから始める人の役に立つ内容ではない。

本記事が提供する内容

　本記事では、次のことが面倒なしですぐにできる仕組みを提供する。

①WindowsにWordPressの環境を作る(HTTPSで)
②VSCode または Eclipse を使ってデバッグする
③本番サイト（エックスサーバーなど）と同期する

Webデザイナーが必要なのは、ターミナルからコマンドを１つ１つ打込む手順ではなく、①②③が出来る環境を、すぐに作れる仕組みに違いない。

前提条件

・Windows環境であること
・本番サイトがエックスサーバーにあること
（別サーバーの場合は関連部分を読み替えてください）

おおまかな流れ

　後で詳しく解説するが、慣れた人は、これだけ見れば出来るかもしれない。

準備

・以下のリンクからファイルをダウンロードして適当な場所に展開する。これは当館が提供するスクリプトの集まり。Wordpress、WordMove、SSLのセットアップとデバッグに必要なすべてを含んでいる。

wp20221219.zip

・エックスサーバーで鍵ファイルを作って同梱のconfigフォルダに入れる。
・鍵ファイルの作製に使ったパスフレーズを、同フォルダ中のpull,pushファイルに書く。
・.envファイルにサーバー情報を記載する。

なお、このスクリプトは下記をベースに機能強化したもの。
blanket11 / wockerpress

セットアップ

1.Docker Desktopをインストール
2.パワーシェルを起動し、スクリプトの中の.\setupを実行

でおしまい。これ一発でSSL,SSHの設定からデバッグの下準備などがすべて終わる。

サイトの同期

1.Docker Desktop起動
2.パワーシェルから .\start
3.ダウンロード(sh pull -a)、アップロード(sh push)

でおしまい。同期の中身はWordmove。

サイトのデザイン（デバッグ）

1.Docker Desktop起動
2.パワーシェルから .\start
3.VSCode または Eclipse でデバッグ実行

デバッグの中身はxdebug 、ポート9003。VSCodeで必要なPHP.exeはコンテナの中から取得している（後述）。

終了

終わるときは、パワーシェルから.\stop 。すべてを自動的に閉じる。

制限

　マルチサイトに対応していない。これは現在のWordmoveが対応していない為。ローカル環境をマルチサイト化して本番環境にデプロイしても動作しない。マルチサイトの本番環境をローカルに落とした場合は、トップページのみ確認可能。

　これらに対処するには、DBの中を手動で書き換えないといけないが、本記事では触れない。

以下は詳しい手順になる。なお、Windowsのパスの区切り「¥」は表示上「\」となっている。

準備

仮想環境が使えるようにする

　PCのBIOS画面を出してHyper-Vを有効に設定する。AMDの場合はSVM。

Docker Desktopをインストール

　Dockerというのは仮想環境をコンテナ化する仕組み。以下のサイトからダウンロードしてインストールする。

https://docs.docker.com/desktop/install/windows-install/

　起動するとWSL 2 Linux カーネルが必要と出るので、表示されているページのリンクをクリック、パッケージをダウンロードしてインストールして再起動する。他、Docker-composeが必要だが、インストーラーに含まれている。

スクリプトをダウンロードして展開する

　以下のリンクからダウンロードして適当な場所に展開する。ここでは D:\wordpress-docker に展開したものとして進める。

wp20221219.zip

SSH接続のための鍵ペアを作る

　エックスサーバーのサーバーパネルにログインして、

　アカウント-SSH設定で
　　状態をONに変更
　　公開鍵認証用鍵ペアの生成でパスフレーズを入力し、生成を押してダウンロード。

生成に使ったパスフレーズを控えておく。

ダウンロードした拡張子 keyのキーファイルを、スクリプトを展開したconfigフォルダに入れる。

サーバー情報を確認して控える

　エックスサーバーのサーバーパネルにログインして次の情報をメモ帳などに控えておく。

サーバーID
　Top画面の上に表示されている

PHPのバージョン
　PHP Ver.切替 – ドメイン名を選択

MySQL設定
　データベース名、ユーザー名（アクセス権所有）、パスワード
　ホスト名（MySQL*.*情報）

ターミナルの準備

　デスクトップにWindows付属のWindows PowerShell（以後パワーシェル）のショートカットを作り、ショートカットのプロパティを開いて作業フォルダを、スクリプトを展開したD:\wordpress-dockerに設定しておく。パワーシェルは管理者権限で使わないこと。

　操作は基本的にこのターミナルを介して行う。

ファイルの編集

　スクリプトに含まれる .envファイルを開いて黄色の部分を準備で控えたものに書き換える。

# -------------------------------------------
# wordpressの設定
# -------------------------------------------
# 以下ローカル環境の情報
# サブディレクトリの指定
WP_WORKING_DIR=/
# DBの接続ポート。通常はこのまま使う。
LOCAL_DB_PORT=3306
# プロジェクト名。管理するサイトを分けたいとき名前を変える ""でくくらないこと。
PROJECT_NAME=wplocal
# ローカルドメイン。通常はこのまま使う。
LOCAL_DOMAIN=localhost
# ローカルIP。通常はこのまま使う。
LOCAL_IP=127.0.0.1
# -------------------------------------------
# Wordmoveコンテナの設定
# -------------------------------------------
# 以下本番環境の情報
# URL
PRODUCTION_URL=https://<ドメイン名>
# wordpressのディレクトリの絶対パス
PRODUCTION_DIR_PATH="/home/<サーバーID>/<ドメイン名>/public_html"
# DB名
PRODUCTION_DB_NAME="<控えたもの>"
# DBのユーザー名
PRODUCTION_DB_USER="<控えたもの>"
# DBのパスワード
PRODUCTION_DB_PASSWORD="<控えたもの>"
# DBのホスト名
PRODUCTION_DB_HOST="<控えたもの>"
# SSHホスト名
PRODUCTION_SSH_HOST="<サーバーID>.xsrv.jp"
# SSHユーザー名
PRODUCTION_SSH_USER="<サーバーID>"

# DBの接続ポート
PRODUCTION_DB_PORT=3306
# SSHポート名
PRODUCTION_SSH_PORT=10022

　スクリプトの\configフォルダに含まれる push と pull の２つのファイルを開いて赤の部分を準備で控えたものに書き換える。改行コードが変わると動かないので、メモ帳による編集が無難。

#!/bin/sh
#Please enter your passphrase
PASS='******'
（以下略）

複数のwordpressを開発する場合

　他の名前でディレクトリを作成して .envファイルのプロジェクト名の接頭辞を編集すると、複数のwordpressを開発できるようになる。

　セットアップや実行時に他のコンテナが動いているとエラーになる。必ず全てのコンテナをストップした状態で行う。

サブディレクトリを使う場合

　.envファイルのサブディレクトリを設定するとサブディレクトリ以下にファイルがマウントされる。

　Wordpressのローカルファイルは、D:\wordpress-docker\public\サブディレクトリの下に展開される。アクセスは

　 https://localhost/サブディレクトリになる。後述するデバッグの設定も同様の修正が必要。

ローカルドメイン名を変える場合

　C:\Windows\System32\drivers\etc\hostsファイルを編集してIPアドレスと関連付けておく。

　例：127.0.0.1 localhost2

セットアップ

　Docker Desktopを起動し、パワーシェルを開いて、

.\setup

と打つ。処理が終わったら、

　ブラウザから https://localhost にアクセスしてみる。

　Wordpressのインストール画面が表示されたらOK。インストールは進めなくてもよい。Wordpressのローカルファイルは、D:\wordpress-docker\public の下に展開される。

　ダメな場合は.envを見直して後述のリビルドを実行する。

作業の開始と終了

　２回目以降は、Docker Desktopを起動し、パワーシェルを開いて次のコマンドを打つ。

.\start

　コマンドプロンプトが#に変わり、Wordmoveのコンテナに入った状態になる。ここでサイト同期などの作業を行う。コンテナから出るときは　ctrl+Dまたはexit とし、パワーシェルに戻ってから

.\stop

　これですべてのウィンドウを閉じてよい。

サイトの同期

本番サイトのファイルをごっそりローカルに持ってくる

　上記「作業の開始」をしてWordmoveのコンテナに入ってから、次のコマンドを打つ。

　本番サイトから全ファイルをローカルにコピー

sh pull -a

　初めてコマンドを実行すると接続可否のメッセージが出て止まるので yes と打つ。
　終わったらブラウザから https://localhost にアクセスしてみる。

　ダメな場合は.envや鍵ペアなどを見直して後述のリビルドを実行する。

　２回目以降は、次のスクリプトを使う。

・themesフォルダだけ取ってくる

sh pull

・themesフォルダをアップロードする

sh push

　pushは本番環境を上書きする。安全のため、yes/noの入力を要求する形になっている。サイトのデザインはテーマの編集がメインのため、themesフォルダだけ操作するものを用意した。

＜補足＞
　全ファイルをローカルにコピーしてもwp-config.phpと.htaccessは本番環境ではなくローカルのものが使われる。
　マルチサイトをpullしても上述したようにトップぺージしか表示されない。

手動で作業する場合

　Wordmoveのコマンドを直接打つ場合は、手動でssh認証が必要。Wordmoveのコンテナに入ってから次のようにする。

ssh-agent bash
ssh-add /home/.ssh/id_rsa
パスフレーズ入力

PHPバージョンの整合について

　ローカルと本番のPHPのバージョンが合っていないと、動作に不具合が出ることがある。
本サイトが提供するwordpressのdockerイメージは “latest” を指定している。これに含まれるPHPのバージョンは、.\startのあと、ctrl+Dまたはexit でパワーシェルに戻ってから

.\php.bat -v

で確認できる。PHPは最新よりも安定バージョンを選ぶべきであり、通常 latest がこれになっている。

　latestで提供されるPHPのバージョンが本番環境と違う場合は、本番環境を変える（エックスサーバーにログインして変更）か、wordpressのdockerイメージの方を変える。

　後者の場合は、docker-compose.yml と dockerfileの、latestと書かれた箇所を書き換えて後述のリビルドを実行する。イメージの候補は以下から選べる。
https://hub.docker.com/_/wordpress

　wordpressバージョンについては、ローカルと違っても問題ない（pullで上書きされる）。

サイトのデザイン（デバッグ）

　VSCodeとeclipseを使ってデバッグできる方法を用意した。好きな方を使う。

VSCodeの場合

　インストール

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

　[ファイル][フォルダー]からワークスペースに以下のフォルダを追加。
D:\wordpress-docker

　拡張機能から PHP Debug、PHP IntelliSenceをインストール。

　VSCodeを再起動すると、右下にPHP.exeが無いとかいうエラーが出る。settings.jsonを開いて以下を記述。

{
"php.validate.executablePath": "d:\\wordpress-docker\\php.bat"
}

　見つからないときは、Ctrl+Chift+P でコマンドパレットを開き、settings.json（ワークスペース設定）を開く。

　初めて実行するとlaunch.jsonファイルを作成するよう表示されるので、作成して以下と差し替える。

{
   "version": "0.2.0",
   "configurations": [

    {
        "name": "Listen for Xdebug",
        "type": "php",
        "request": "launch",
        "port": 9003,
        "pathMappings": {
        "/var/www/html": "${workspaceRoot}/public"}
    }
  ]
}

　サブフォルダを設定した場合はそれをpublicの後に続ける。

　左端の実行とデバッグボタンを押すと、Listen for Xdebugという表示が出るので、その左の再生ボタンを押す。
　コードにブレークポイントを設置し、ブラウザでローカルサイトにアクセスすると、停止する。

Eclipseの場合

　インストール

https://www.eclipse.org/downloads/

　インストーラをダウンロードして実行。Eclipse IDE for PHP Developers を選んでインストールする。
　起動すると最初に聞かれるEclipseのワークスペースは、dockerを展開したフォルダ以外の場所を設定する(デフォルトのままでもよい）。

起動画面から

File – New – PHP Project
Project name = wordpress-test(任意)
Create project at existing workspace = D:\wordpress-docker　(publicフォルダより上の階層を指定）
PHP Version =<最初の準備で控えたバージョン>
[finish]

起動画面から

Run – Debug Configurations…

–Debug Configurationsダイアログが開く–

左のリストから
PHP Web Application を選択状態にして Newボタン(左上のアイコン)を押す
Name =WP-config (任意)
Serverの欄で [New]

–New PHP Server ダイアログが開く–

Server Name =wordpress-debug (任意)
Base URL = https://localhost　（LOCAL_DOMAINを変更した場合はそれにする）
Document Root: （空欄）
[next >]
Debugger = XDebug （セレクト）
Connection Setting = 9003
[Finish]

–Debug Configurationsダイアログに戻る–

PHP Server = wordpress-debug (先ほど設定した名前になっていることを確認）
File = wordpress-test/public/index.php (Browse…を押し、ツリーを展開し、セレクト)。サブフォルダを使う場合はpublicの後に続ける。
URL欄でAuto Generateのチェックを外して右の欄を / だけにする
[Apply][Close]ボタンを押してダイアログを閉じる。

起動画面から

Project Explorerから wordpress-testをクリック
PHP – Debug と進む。

-PHP Debugダイアログが開く-

Enable project specific settings のチェック無し、その横のConfigure Workspace Settings…をクリック

-Preferences (Filterd)ダイアログが開く-

Server Settingsにwordpress-debugを指定
Break at First Lineのチェックを外す
[Apply and Close]

　デバッグを開始するとindex.phpを選択するダイアログが表示されるので、public/index.phpを選ぶ。

メンテナンス

リビルド

　.env や .ymlを変えた時はリビルドする。パワーシェルから以下のコマンドを実行。

.\setup

　繰り返し実行しても問題ない。

　Wordmoveのコンテナに入り、sh pull -a を実行。

完全削除

　現在の環境を全部消して最初からやり直したい場合、以下のようにする。

　　　D:\wordpress-dockerのpublicフォルダ以下を消す。

Docker Desktop （Windowsにインストールしたクジラのアイコン）を起動
Containersから関連するものを消す（ゴミ箱のボタン）
imagesから関連するものを消す
Volumesから関連するものを消す。

　証明書を削除

　　管理者権限のパワーシェルから　mkcert –uninstall
　　次のフォルダを削除
　　C:\Users\<ユーザー名>\AppData\Local\mkcert

　chocolateyのアンインストール

C:\ProgramData\chocolatey フォルダを削除
システム環境変数のchocolatey 関係を削除

スクリプトの仕組み

・Dockerを使った環境構築の仕組みは参考文献１を参考にした。
・サイトの同期はWordmove,SSL接続はmkcert^[2]、xdebugの設定はスクリプトに同梱のphp.iniとdockerfileを使用。
・SSL認証サーバーはmkcertを利用して作られ、PCのローカルに設置される。
・Wordmoveに必要なSSH認証は、スクリプトを抜けると無効になるので、同じスクリプトの中で実行している。
・VSCodeのデバッグに必要なphp.exeは、Dockerの中身から取得している^[3]。
・ローカル証明書の発行ツールmkcertをインストールするためにchocolateyを使用している。

＜参考文献＞
1.僕のWordPress×dockerのローカル開発環境の使い方を丁寧に紹介します
2.mkcertを使ってlocalhostをHTTPS化して開発する – s1r-Jの技術ブログ
3.VisualStudio Code PHP executablePath in docker

最後に

　お気づきの点がありましたらご連絡いただけると嬉しいです。

　なお、本記事の実施は自己責任でお願いします。本記事を参考にして生じた如何なる結果も、責任を負いません。

＜参考購入先＞
wordpressのサイト構築に役立つ資料