WordPressのデバッグ (MAMP版)

以前の記事で、WSL2を使用したWordpressのデバッグ方法をご紹介しましたが、今回はMAMPというアプリを使用してWordpressのデバッグ環境を構築してみます。MAMPはMac用のアプリかと思っていましたが、Windowsでも動作する様です。

今回の記事を作成するにあたり、以下の講座で勉強させていただきました。

それぞれの分野に関する知識がとても深いです。また、開発者視点でのコツやノウハウなどもご紹介されていて勉強になります。個人的には、今まで見よう見まねで書いていた.htaccessの書き方やPHP関連の講義がとても参考になりました。今回のXDebug機能のセットアップ方法もこの講座で教えていただきました。「バックエンド編」となっていますが、JavaScriptやCSS(Bootstrap)などの講義もあり、全体的な開発方法が勉強できます。

MAMPをインストールします

こちらのリンクからWindows版のインストーラーをダウンロードします。

インストールは基本的にデフォルト設定で行いますが、2番目の画面だけは以下の様にチェックをはずしておきます。それ以外はすべてデフォルト設定でインストールします。

インストールが終了したらMAMPを起動します。「Apache Server」と「MySQL Server」が起動していたら、電源マークのボタンを押して、各サーバーを停止します。

XDebugをセットアップします

PHPの設定ファイル(php.ini)を修正します。設定ファイルの場所は「C:\MAMP\conf\phpx.xx.xx」という感じでバージョンごとに分かれています。今回使用するMAMP(ver 5.0.6)では、PHPの8.3.1がデフォルトでインストールされます。しかしこのバージョンのライブラリにはWordpressがデータベース(MySQL)と接続するために必要なファイル(php_mysqli.dll)が含まれていないので、PHPを「8.2.14」にバージョンダウンします。

「MAMP」メニューから「Preferences…」を選択します。メニューが表示されていない場合は、「alt」キーを押すと表示されます。

以下の様なダイアログが表示されたら、OKボタンを押して先に進みます。

表示された画面で「PHP」タブをクリックすると、現在使用しているバージョンが表示されるので、ドロップダウンから「8.2.14」を選択してOKボタンで閉じます。

「C:\MAMP\conf\php8.2.14」にある設定ファイル(php.ini)を開いて、ファイルの最後に以下の設定を追加します。

[XDebug]
xdebug.mode = debug,develop,trace
xdebug.start_with_request = yes
zend_extension = "C:\MAMP\bin\php\php8.2.14\ext\php_xdebug.dll"

後でインストールするWordpressでエラーが発生するので、同じファイルの175行目辺りにある「zlib.output_compression」という設定を以下の様に修正します。

zlib.output_compression = On
↓
zlib.output_compression = Off

また、374行目辺りにある「display_errors」という設定を以下の様に修正すると、エラーや警告情報が表示されるようになります。かなり細かいレベルの警告も表示されますので、必要に応じて設定してください。

display_errors = off
↓
display_errors = on

設定が終了したら電源マークのボタンを２回押して、サーバーを再起動します。

「Open WebStart page」ボタンを押してスタートページを表示します。

表示されたスタートページ内のPHP欄にある「phpinfo」リンクをクリックします。

表示されたページ内に「xdebug」という項目が複数表示されていれば正常に動作しています。

Visual Studio Code(VSCode)のインストールと動作確認を行います

以前の記事を参考に、VSCodeのインストールと「PHP debug」プラグインをインストールします。今回は「Remote – SSH」プラグインは使用しません。

インストールが完了したら動作を確認します。左側の「エクスプローラー」ボタンを押して表示された画面の「フォルダーを開く」ボタンを押します。表示されたダイアログでMAMPのドキュメントルートフォルダ(C:\MAMP\htdocs)を選択して追加ボタンを押します。

左側のファイルツリーから「index.php」をクリックして、表示されたファイルの適当な行番号の少し左をクリックしてブレークポイントを設定します。

左側の「実行とデバッグ」ボタンを押します。以下の様な画面が表示されたら「launch.json」ファイルを作成します。」リンクをクリックします。

ファイルの保存場所を聞かれたら「htdocs」を選択します。

デバッグ対象が「Listern for Xdebug」になっているのを確認して「実行」ボタンを押します。

ブラウザのURL欄に「localhost」と入力してenterキーを押すとブレークポイントで停止します。

確認できたら上部のツールバーの停止ボタンを押してデバッグを終了します。

WordPress用のデータベースを作成します

エクスプローラーを起動して、上部のパス入力欄に「C:\MAMP\bin\mysql\bin」と入力してenterキーを押します。そのまま同じ入力欄に「cmd」と入力してenterキーを押して、Windowsのコマンドプロンプトを表示させます。

表示されたウィンドウに「mysql -uroot -proot」と入力して、MySQLのコマンドプロンプトを表示させます。

C:\MAMP\bin\mysql\bin>mysql -uroot -proot
mysql: [Warning] Using a password on the command line interface can be insecure.
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 3
Server version: 5.7.24 MySQL Community Server (GPL)

Copyright (c) 2000, 2018, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

MySQLのコマンドプロンプトに以下の様に入力して、データベースを作成しておきます。

create database wordpress;
grant all privileges on wordpress.* to wordpress@'localhost' identified by 'password'; 
exit 

WordPressをインストールします

こちらのリンクからWordpressをダウンロードします。

ダウンロードしたZIPファイルを「C:\MAMP\htdocs」に展開します。複数のWordPressを動作させることもあるかもしれないので、フォルダ名を任意の名称(blog等)に変更します。

このまま「localhost/blog」と入力すればWordPressをセットアップできますが、サイト名がlocalhostになります。サイト名を変更したい場合は、以前ご紹介したhostsファイルのアクセス権限を修正してから以下の様な文字列をhostsファイルに追加します。IPアドレスは「127.0.0.1」にします。サイト名はご自由に変更してください。(ドメイン名も「.mamp」の様に自由に変更したいですが、実際に存在するドメイン名でないとブラウザでアクセスできない様です。こちらにある様な既存のドメイン名からお好きなものを選択してください。)

127.0.0.1 mimura-soft.info

ブラウザで「<設定したサイト名>/blog」と入力するとWordPressのセットアップ画面が表示されますので、デフォルト設定でセットアップを行います。サイト名称等はご自由に入力してください。

WordPressの設定を行います

WordPressのインストールが終了したら動作設定を行います。ダッシュボードの「設定」→「一般」にあるサイトアドレスからサブディレクトリ名を削除して「設定を保存」ボタンを押します。

「C:\MAMP\htdocs」にある「index.php」のファイル名を「index2.php」等に変更しておきます。

その後、WordPressをインストールしたディレクトリ(blog)にある、「.htaccess」と「index.php」ファイルを１つ上のディレクトリ(C:\MAMP\htdocs)にコピーします。

「index.php」ファイルをダブルクリックして開き、17行目あたりにある文字列を以下の様に修正して保存します。

require __DIR__ . '/wp-blog-header.php';
↓
require __DIR__ . '/blog/wp-blog-header.php';

同じように「.htaccess」ファイルを開き、9行目あたりにある文字列を以下の様に修正します。

RewriteBase /blog/
↓
RewriteBase /

.htaccessファイルの先頭に以下の文字列を追加して保存します。この設定により、同じディレクトリ内にindex.html等があってもWordPressが優先的に表示されるようになります。

DirectoryIndex index.php

ローカルサイトのURLを入力して動作確認します。

先ほど確認しましたが、VSCodeでブレークポイントで停止するか再度確認しておきます。

以上で設定は終了です。

ローカルサイトの表示が遅い場合

WordPressのインストールフォルダにある「wp-config.php」ファイルを開きます。32行目辺りにある、DB_HOST定数を「localhost」から「127.0.0.1」に変更します。この修正でIPv6の検索がスキップされて、表示されるまでの時間が多少短くなるようです。

さらに「C:\MAMP\conf\apache」フォルダにある「httpd.conf」の最後に以下の様な設定を追加します。設定を追加したらMAMP画面でサーバーの再起動を行います。気休め程度ですが多少速くなるようです。

KeepAlive On
MaxKeepAliveRequests 1000
KeepAliveTimeout 30
HostnameLookups Off

AcceptFilter http none
AcceptFilter https none

MaxConnectionsPerChild 0
ThreadsPerChild 1000

その他

実行速度はWSL2と比べると少し遅いですが、WEBサーバーやデータベース等がすべてWindows上で動作しているので、設定を変更するためにFTPソフトをインストールしたり、VSCodeにリモートデバッグの設定をしなくて済むので、WSL2を使用するよりお手軽に開発環境を構築できます。

以上です。