手持ちのMacを新調し、久しぶりにXAMPPでWordPressのローカル環境を整えた。

しかし、OpenSSLを使ったSSL対応の設定など、細かい手順をすっかり忘却しており、ほぼ1日掛かりの作業となってしまった。備忘録として、一通りの手順を箇条書きにまとめておこうと思う。

XAMPPをダウンロード＆インストール

Apache Friendsの公式サイトからXAMPPをダウンロードする。

ダウンロードが終わったらインストーラをクリック。そうすると「“xampp-osx-8.0.28-0-installer”は、開発元を検証できないため開けません。」とか言って弾かれるので以下の手順でインストールを進める。

  1. 左肩のリンゴマークをクリック
  2. 「システム設定」をクリック
  3. 「プライバシーとセキュリティ」をクリック
  4. 「セキュリティ」の欄にある「そのまま開く」をクリック
  5. 画面に従ってクリック連打。
  6. インストール完了

インストールが終わると、自動でコントロールパネルが表示され、3つのサーバが起動されるはずである。

名称 役割
MySQL Database データベースサーバ
ProFTPD FTPサーバ
Apache Web Server Webサーバ

自分で起動するときは/Applications/XAMPP/xamppfilesにあるmanager-osxを使う。manager-osxは、XAMPPのmacOS用コントロールパネルである。

MySQLサーバが起動しないときは、すでに別のMySQLが動いている可能性が高い。コントロールパネルの「Manage Servers」タブを開き、MySQL Databaseを選択した状態で「Configure」ボタンを押して、3306を適当なポート番号（3307とか）に変更する。

OKを押して再起動すると、無事立ち上がるはずである。これで解消されない場合は、アクセスログやエラーログを読んでがんばる。ログはConfigureを押して表示される画面から辿る。

データベースの作成

サーバが起動していることを確認したら、以下の手順でWordPress用のデータベースを作成する。

  1. http://localhost/dashboard/にアクセス
  2. 「phpMyAdmin」ボタンをクリック
  3. 「データベース」タブで適当な「データベース名」欄に適当な名前を入力し、作成ボタンを押す。

WordPressをダウンロード＆下準備

続いてWordPressをダウンロードし、XAMPP内に解凍する。

  1. WordPressの公式サイトからWordPressをダウンロード
  2. /Applications/XAMPP/xamppfiles/htdocsに解凍する

WordPressディレクトリに適切な権限が設定されていないとインストールがうまくいかない。のでまずは権限を設定する。 具体的には、ターミナルを開いて、解凍したWordPressディレクトリ直下に移動し、以下のコマンドを実行する。

bash
cd /Applications/XAMPP/xamppfiles/htdocs/wordpress
sudo find . -exec chmod 777 {} \;

これは、全ディレクトリとファイルに最大の権限を付与するベリーデンジャラスなコマンドである。自分専用のローカル環境でのみ許される（許されないこともある）。

WordPressのインストール

準備が整ったので、WordPressのインストールを始める。

  1. http://localhost/wordpress/wp-admin/setup-config.phpにアクセス
  2. 以下を入力して「送信」ボタンをクリック
    • データベース名：先に作成したデータベースの名前
    • データベースのユーザー名：root
    • パスワード: 空欄でOK。
    • データベースのホスト名:localhost(入力されているはず)
    • テーブル接頭辞:wp_（これも入力されているはず)
  3. 「インストール実行」ボタンをクリック
  4. 「ようこそ画面」で必要な情報（サイトタイトルやユーザ名、パスワードなど）を適宜入力
  5. 「WordPressをインストール」ボタンをクリック
  6. WordPressが表示されたらログインする

WordPressプラグインのインストール

ローカル環境でプラグインをインストールするためには、WordPressにFTPやSSHを使わず、直接ファイルシステムにアクセスするよう指定する必要がある。

/Applications/XAMPP/xamppfiles/htdocs/wordpressにあるwp-config.phpを開き、以下のコードを追加する。

php
define('FS_METHOD', 'direct');

これでダッシュボードからプラグイン画面に移動すれば、適宜必要なプラグインをインストールできる。

バーチャルホストの設定

バーチャルホストとは、1つのIPアドレスで複数のドメインを運営するための技術である。

XAMPPで/Applications/XAMPP/xamppfiles/htdocs/にWordPressディレクトリを配置すると、WordPressサイトはhttp://localhost/wordpress/に表示される。バーチャルホストを設定すれば、これを自由に変更できる。

バーチャルホストの設定は、以下の手順で行う。

  1. /Applications/XAMPP/xamppfiles/etc/にあるhttpd.confを開く。
  2. # Include etc/extra/httpd-vhosts.confというコメントアウトを外す（#を消す）＆保存する

httpd.confを手っ取り早く開く方法

bash
vi /Applications/XAMPP/xamppfiles/etc/httpd.conf

/を押下してhttpdなどで検索すると手っ取り早い。vi（vim）では、入力はi、保存して閉じる操作はesc->:->wqで行う。

続いて、httpd-vhosts.confを編集する

  1. /Applications/XAMPP/xamppfiles/etc/extra/にあるhttpd-vhosts.confを開く
  2. すでに記述されているダミーのバーチャルホストを書き換え、適当な値を設定する。必須の2つ以外は消しちゃってもいい。嘘。エラーログは書いといた方がいい。詳しくはApacheのドキュメントで。
    • DocumentRoot:必須。表示するWordPressディレクトリのパス。必須
    • ServerName:必須。任意のドメイン名。必須
    • ServerAdmin:エラーメッセージに含まれる任意の連絡先
    • ServerAlias:ServerName以外を設定したい場合の、任意の別名
    • ErrorLog:エラーログの任意の出力場所
    • CustomLog:アクセスログの任意の出力場所
  3. 保存して閉じる

httpd-vhostsを手っ取り早く開く方法

bash
vi /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf

httpd-vhosts.confの設定の例

apacheconf
<VirtualHost *:80>
    ServerAdmin webmaster@sample.test
    DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs/wordpress"
    ServerName sample.test
    ServerAlias www.sample.test
    ErrorLog "logs/sample.test-error_log"
    CustomLog "logs/sample.test-access_log" common
</VirtualHost>

次に、端末OS上のhostsファイルを編集する

  1. sudo vi /private/etc/hosts
  2. 127.0.0.1 httpd-vhosts.confに指定したドメイン名を追加
  3. 保存して閉じる。

hostsファイルの設定の例

bash
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       sample.test
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost

ぜんぶ終わったら、サーバを再起動＆新しいドメイン（先の例ではhttp://sample.test）からWordPressにログインする。

httpd.confやhttpd-vhosts.confを編集する際は、/Applications/XAMPP/xamppfiles/etc/の中にあるoriginalというディレクトリに注意が必要である。

この中には万一の変更用に設定ファイルのバックアップが保存されており、間違って編集すると邪念樹に囚われた戸愚呂兄のようになる。ファイルをいくら編集し、保存してもなんの変化も起きない。延々無駄な再起動を繰り返し、時間を浪費する危険がある。

SSL化する

SSL化にあたって、まずは証明書と秘密鍵を用意する。その後、バーチャルホストを設定する時と同じようにhttpd-vhosts.confを編集して、443番ポートを通じてのHTTPS接続を設定する。

はじめに証明書を作成するための設定ファイルを作る。以下の内容を持つファイルをopenssl.confという名称で保存する。保存する場所は、アクセス権限が及ぶ範囲ならどこでも良い。デフォルトの証明書が保存されている/Applications/XAMPP/xamppfiles/etc/ssl.crt/あたりが無難ではないかと思う。

秘密鍵は同じ階層の/ssl.keyに入れるべきかもしれないが、面倒くさいので1つのディレクトリに出力したままやっつけることにする。

ファイルの作成作業は、vi openssl.conf->以下の内容をコピペ->:->wq->Enterで終わる。

bash
[ req ]
default_bits        = 2048
distinguished_name  = req_distinguished_name
req_extensions      = req_ext
x509_extensions     = v3_ca
prompt              = no

[ req_distinguished_name ]
commonName          = sample.test

[ req_ext ]
subjectAltName      = @alt_names

[ v3_ca ]
subjectAltName      = @alt_names

[alt_names]
DNS.1               = sample.test
DNS.2               = www.sample.test

次に以下のコマンドを実行する。

bash
openssl req -x509 -newkey rsa:2048 -nodes -keyout sample.test.key -days 1825 -out sample.test.crt -config openssl.conf

これで証明書と秘密鍵ができた。続いて、下記の手順でmacOSにこの証明書を認めてもらう。

  1. sample.test.crtをダブルクリックしてキーチェーンを起動。
  2. 左側の「システム」から追加した項目を探してダブルクリック
  3. 「信頼」タブを開く
  4. 「この証明書を使用するとき」->「常に信頼」->（Touch ID or パスワード入力）-> 閉じる。

最後に、httpd-vhosts.confに以下を追加する。

apacheconf
<VirtualHost *:443>
    DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs/wordpress"
    ServerName sample.test
    ServerAlias www.sample.test
    ErrorLog "logs/sample.test-error_log"
    CustomLog "logs/sample.test-access_log" common
    SSLEngine on
    SSLCertificateFile "/Applications/XAMPP/xamppfiles/etc/ssl.crt/sample.test.crt"
    SSLCertificateKeyFile "/Applications/XAMPP/xamppfiles/etc/ssl.crt/sample.test.key"
</VirtualHost>

これでサーバを再起動すれば、https://sample.testで普通にWebページが表示されるはずである。もし警告が出たらthisisunsafeを打ち込むか、サーバを再起動するか、窓を開けて叫ぶかすれば気が晴れると思う。

余談：XAMPPの罠

ところで、XAMPPのhttpd.confの中に以下のような項目がある。

apacheconf
<IfDefine SSL>
Include etc/extra/httpd-ssl.conf
</IfDefine>

そして、ここで読み込まれている/Applications/XAMPP/xamppfiles/etc/httpd-ssl.confの中には以下のような記述がある。

apacheconf
<VirtualHost _default_:443>

#   General setup for the virtual host
DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs"
ServerName www.example.com:443
ServerAdmin you@example.com
ErrorLog "/Applications/XAMPP/xamppfiles/logs/error_log"
TransferLog "/Applications/XAMPP/xamppfiles/logs/access_log"

#   SSL Engine Switch:
#   Enable/Disable SSL for this virtual host.
SSLEngine on
# 略
SSLCertificateFile "/Applications/XAMPP/xamppfiles/etc/ssl.crt/server.crt"
# 略
SSLCertificateKeyFile "/Applications/XAMPP/xamppfiles/etc/ssl.key/server.key"
# 以下略

これを見て、「なぁんだ、これ使えば証明書とか作る必要ないじゃん」と思うのは早計である。www.example.comにアクセスすると、SSL化されたサイトが表示されるかもしれないが、それは罠だ。

XAMPPに含まれるserver.crtはとうの昔に期限が切れている。ブラウザで表示されているのは、ローカルではなくWeb上のwww.example.comである。これでいいやん、と思って適当にやりくりしようとしてするとドツボにハマる。というかハマった。まさかwww.example.comなんてサイトが実在するとは（なにかで読んだ気もするが）。

ところで、ドツボとは肥溜めを指すらしい。「どつぼにはまる」=「抜け出せないくらいのデカいツボにはまる」のようなイメージで使っていた。正しくは💩に塗れるような最悪の状況を表すそうだ。行き詰まりのニュアンスを表すために使うのは改めた方が良さそうである。

参考