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

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

 

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

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

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

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

 

本記事が提供する内容

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

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

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

 

前提条件

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

 


 

おおまかな流れ

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

 

準備

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

wp20220930.zip

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

 

セットアップ

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

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

 

サイトの同期

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

でおしまい。終わるときは、パワーシェルから.\stop。同期の中身はWordmove。

 

サイトのデザイン(デバッグ)

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

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

 

制限

 マルチサイトに対応していない。これは現在の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 に展開したものとして進める。

wp20220930.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"
# ローカルURL。いろんな場所で共有されているのでいじらないこと。
LOCAL_URL=https://localhost

# -------------------------------------------
# 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 の2つのファイルを開いて赤の部分を準備で控えたものに書き換える。改行コードが変わると動かないので、メモ帳による編集が無難。

#!/bin/sh
#パスフレーズを入れてください
PASS='<パスフレーズ>'
(以下略)

 


 

セットアップ

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

.\setup

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

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

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

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

 


 

作業の開始と終了

 

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

.\start

 

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

.\stop

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

 


 

サイトの同期

 

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

 

 上記「作業の開始」のあと、次のコマンドを打つ。

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

sh pull -a

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

 

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

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

sh pull

 

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

sh push

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

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

 

手動で作業する場合

 Wordmoveのコマンドを直接打つ場合は、先に次のSSH認証が必要である。

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

 

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

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

.\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"
}

 左端の実行とデバッグボタンを押すと、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
Document Root: (空欄)
[next >]
Debugger = XDebug (セレクト)
Connection Setting = 9000
[Finish]

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

PHP Server = wordpress-debug (先ほど設定した名前になっていることを確認)
File = wordpress-test/public/index.php (Browse…を押し、ツリーを展開し、セレクト)
URL欄でAuto Generateのチェックを外して右の欄を /index.php とする

Debuggerタブを開いてBreak at First Lineのチェックを外す。(付けているとデバッグ起動のたびに最初の1行目で止まる)

[Apply][Close]ボタンを押してダイアログを閉じる。

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

 


 

メンテナンス

 

リビルド

 パワーシェルから以下のコマンドを実行。

.\setup 

 .env や .ymlを変えた時はこれを打つ。繰り返し実行しても問題ない。

 

完全削除

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

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

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

 


 

スクリプトの仕組み

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

 

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

 


 

最後に

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

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

 

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

<関連記事>
VCCW3+EclipseでWordPress開発環境を作る~ハマり所と対策のまとめ