XAMPPでMacのローカルにWordPress用テスト環境を作る

XAMPPで作るWebサーバのテスト環境

 私が勤めている現場では、制作スタッフのPCにXAMPPがインストールされていて、わざわざテストサーバへファイルをアップしなくても、殆どの動作をローカルのPCで確認することができます。
 しかし、私のPCではXAMPPの設定がうまくいっていなかったらしく、テストサーバへファイルをコピーしてから作成したページの内容を確認していたので、手間がかかっていました。
 そこでXAMPPの設定を見直し、現場へ赴任して4ヶ月目にしてようやく動作させることができました。

 ここでXAMPP、Apacheについて興味がわいてきて、自宅のMacでも同じようにWordPressで構築されたArcanyを複製し、テスト環境を作ってみようと思いました。

要件定義

  • Arcanyのクローンをローカルに作成する
  • Mac1台で、さくらレンタルサーバ用、WordPress用、ダミーサイト用の仮想ホストを作る
  • コンテンツは「サイト」フォルダ配下に
  • データベース、ログのディレクトリは変更しない

XAMPPの環境ファイルをいじる

XAMPPをインストールすると、ウェブサーバ、PHP実行環境、データベース実行環境ができあがります。
環境ファイルを操作します。もちろんオリジナルに戻せるよう、バックアップは取ります。

MySQLのパスワードを変更する

外部からの不正アクセスにより、ローカルのデータベースを操作されるおそれがあります。MySQLの管理者パスワードを変更することにより、リスクを軽減することができます。

mysqladminを実行してパスワードを変更

実行前に、MySQL Databaseは起動した状態にします。

ターミナルで

/Applications/XAMPP/xamppfiles/bin/mysqladmin --user=root password <あなたのパスワード>

と入力し、管理者パスワードを変更します。

MySQLのマスターパスワード変更

phpMyAdminのパスワードを変更する

先ほど入力したパスワードを、phpMyAdminの設定ファイルに書き込みます。
config.inc.phpはデフォルトでは書き込み権限を与えられていないため、管理者が権限を変更する必要があります。

/Applications/XAMPP/xamppfiles/phpmyadmin/config.inc.php(28行目)

/* Authentication type */
$cfg['Servers'][$i]['auth_type'] = 'config';
$cfg['Servers'][$i]['user'] = 'root';
$cfg['Servers'][$i]['password'] = '<設定したパスワード>';

VirtualHostで、複数のサーバがあるように設定する

localhost、WordPress用、ダミーサイト用、さくらレンタルサーバ用とでホストとディレクトリを分けます。
これは「バーチャルホスト」と呼ばれますが、これからこの設定を行います。
以下の設定が必要です。

  1. httpd.confを編集してhttpd-vhosts.confの設定を有効化する
  2. httpd-vhosts.confを編集し、バーチャルホストの設定を記述する
  3. 「サイト」ディレクトリのアクセス権を設定する
  4. hostsファイルの編集

httpd-vhosts.confが読み込まれるようにする

/Applications/XAMPP/xamppfiles/etc/httpd.conf (493行目)

# Virtual hosts
Include etc/extra/httpd-vhosts.conf

↑先頭の#を外して、有効化する。
これにより、etc/extra/httpd-vhosts.confで設定した内容が読み込まれます。

httpd-vhosts.confにバーチャルホストの設定を記述する

/Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf の末尾に、以下の記述を追加します。
ここでは、localhostとtakeoka-sakuraの記述を記載します。
http://takeoka-sakura/にアクセスすると、サイトフォルダ配下のコンテンツが表示されるような設定です。
もちろん、デフォルトのhttp://localhost/にもアクセスできるようにします。

NameVirtualHost *:80

<VirtualHost *:80>
    ServerAdmin send-mail@takeoka.sakura.ne.jp
    DocumentRoot "/Users/takeoka/Sites"
    ServerName takeoka-sakura
    ErrorLog "logs/takeoka-sakura-error_log"
    CustomLog "logs/takeoka-sakura_log" common
</VirtualHost>
<VirtualHost *:80>
    ServerAdmin send-mail@takeoka.sakura.ne.jp
    DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs"
    ServerName localhost
    ErrorLog "logs/localhost-error_log"
    CustomLog "logs/localhost_log" common
</VirtualHost>
…以下、ほかのバーチャルホストの数だけ設定を記述

「サイト」ディレクトリのアクセス権を設定するApache 2.4以降の場合

バーチャルホストの設定をしても、アクセスできません。これは
/Applications/XAMPP/xamppfiles/etc/httpd.conf (212行目)

<Directory />
    AllowOverride none
    Require all denied
</Directory>

により、関係ないファイルへのアクセスを禁止しているからです。

以下の記述を追加することで、「サイト」ディレクトリのアクセスを許可します。

<Directory "/Users/takeoka/Sites">
    AllowOverride All
    Require all granted
</Directory>

hostsファイルの編集

private/etc/hostsを編集しても良いのですが、もっと楽に設定ができるのがHosts.prefpaneというシステム環境設定項目です。インストールすると、システム環境設定にhostsという項目があらわれ、そこでhostsファイルを編集できます。

追加したさくらインターネット用、Arcany用、ダミーサイト用のホスト名を、IP 127.0.0.1で設定します。

hosts.prefpanel

動作を確認する

XAMPPを再起動し、ブラウザでさくらインターネット用、Arcany用、ダミーサイト用のホスト名にアクセスし、ページが表示されるかどうかを確認します。

XAMPPの起動画面

Apacheの実行ユーザを自分に設定する

初期設定ではApacheの実行ユーザは「daemon」です。それによりWordPressの動作に不具合を起こします。
WordPressの実行ユーザがdaemonだと、wordpress/wp-content/ディレクトリにアクセスできなくなります。ディレクトリの所有者が端末のユーザーのため、daemonはそこで読み書きができないからです。
そうなると、プラグインのダウンロードしたり、プラグインがテンポラリファイルを作成したり、画像のサムネールを作成したりすることができなくなります。

その対策は、Apacheの実行者を端末の所有者に設定することです。
/Applications/XAMPP/xamppfiles/etc/httpd.conf (164行目)

<IfModule unixd_module>
#
# If you wish httpd to run as a different user or group, you must run
# httpd as root initially and it will switch.  
#
# User/Group: The name (or #number) of the user/group to run httpd as.
# It is usually good practice to create a dedicated user and group for
# running httpd, as with most system services.
#
User <端末所有者の名前>
Group staff
</IfModule>

FTPサーバ ProFTPDのユーザ設定をする

なぜこの設定をしなければならないかと言いますと、WordPressのプラグインのインストールや、アップデートを行う際に、内部のFTPサーバへアクセスする必要があるためです。

FTPサーバのユーザも、端末の所有者に設定します。
/Applications/XAMPP/xamppfiles/etc/proftpd.conf (24行目)

# Set the user and group that the server normally runs at.
User <端末所有者の名前>
Group      staff

WordPressをインストールする

ここでは、WordPress公式サイトからダウンロードし、解凍されたフォルダをサイトフォルダにコピーしてインストールします。
BitnamiからもWordPressモジュールをインストールできますが、この方法では任意のフォルダにインストールすることができません。

データベースの設定

ローカルのphpMyAdminhttp://localhost/phpmyadmin/index.phpへアクセスし、phpMyAdminの設定を行います。

余計なユーザ名が設定してあれば、管理者がrootでホストがlocalhost以外のユーザを削除して、そこへ先ほど設定した端末所有者をlocalhostのユーザとして登録します。

DBユーザーアカウント

データベースのアカウント追加

続いて、WordPressで使うデータベースを作成します。登録した端末所有者がそのデータベースへアクセスできるように設定します。
キャラセットは、照合順序を「utf8_general_ci」とします。

DB追加登録

WordPressの設定

2つの方法があります。

WordPressの管理画面によるセットアップ

WordPressのディレクトリへブラウザでアクセスします。するとセットアップ用のページが表示され、

  • WordPressデータベース名
  • データベースのユーザ名
  • データベースのパスワード
  • WordPressの接頭辞

先ほど設定した値を入力します。WordPressの接頭辞は、「wp_」という名前がついたレコードが作られるのですが、その「wp_」の部分を他の言葉に変えることができます。
ここでは、本番サーバと同じフレーズを使いました。

WordPressのデータベースへの紐付け

WordPress DB設定成功

wp-config.phpを作る

WordPressの管理画面ではうまくいかない場合は、WordPressをインストールした階層に作られるwp-config-sample.phpをwp-config.phpに変更して、手作業で編集します。

wp-config.php(27行目)

// ** MySQL 設定 - この情報はホスティング先から入手してください。 ** //
/** WordPress のためのデータベース名 */
define('DB_NAME', '<データベース名を入力>');

/** MySQL データベースのユーザー名 */
define('DB_USER', '<ユーザ名を入力>');

/** MySQL データベースのパスワード */
define('DB_PASSWORD', '<パスワードを入力>');

/** MySQL のホスト名 */
define('DB_HOST', 'localhost');
(中略)
 * WordPress データベーステーブルの接頭辞
 *
 * それぞれにユニーク (一意) な接頭辞を与えることで一つのデータベースに複数の WordPress を
 * インストールすることができます。半角英数字と下線のみを使用してください。
 */
$table_prefix  = '<接頭辞を入力>';

再びWordPressのディレクトリへアクセスする

もう一度WordPressのディレクトリへアクセスすると、入力した値が正しければデータベースの構築が行われます。完了後、ブログの名前とログインパスワード、ブログの執筆者を入力し、WordPressの骨格が完成します。ダッシュボードと記事「Hello World」が表示できているかどうかを確認します。

WordPressのサイト設定

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

本番環境と同じにするため、本番環境で使用しているプラグインをインストールしていきます。FTPを使いますので、ProFTPDが起動していることを確認してください。
Apache環境のユーザ名と、FTPのユーザ名が、端末のユーザ名に設定されていれば、ダッシュボードから正しくインストールできます。

テスト環境なので、Google Analyticsなど、テスト環境では明らかに使用しないプラグインは不要です。

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

テンプレートの移植

テンプレートを作ってあれば、/<wordpressのディレクトリ名>/wp-content/themes/配下にコピーします。

テンプレートの移植

データの引っ越し

本番環境のダッシュボードから「ツール>エクスポート」を選択し、全てのコンテンツを書き出して、xmlファイルをダウンロードします。

ローカルのテスト環境のダッシュボードから、「ツール>インポート」を選択し、「WordPress」を選択します。「WordPress Importer」をインストールして、先ほどのxmlファイルを読み込んで記事を転送します。このとき、メディアもダウンロードしないと、記事に配置した画像などが表示されなくなるので注意です。

記事のインポート

ダッシュボードの設定確認

コンテンツをインポートしただけでは、テスト環境と本番環境とを同じにできません。メニューやプラグインの設定、記事の表示設定やパーマリンクの設定を本番環境に揃えます。

完成!

これでトップページやそのほかの記事が正しく表示できれば完成です。
テストサーバー起動

最後に

テスト環境を構築するのがこんなに難しいとは思いませんでした。

proftpd.confやhttpd.conf、httpd-vhosts.confで設定する意味がわからず、下の参考文献に記載のApacheの本を読んで、Apacheを勉強しました。この記述が何を意味しているのかが分かり、大変ためになりました。
「Webデザイン技能検定」の2級のガイドブックでも、Apacheに関する記述がありました。mod_rewriteはこういう使い方をするんだと納得できました。

でも、今のWebデザイナーはApacheくらい理解できて当たり前なんでしょう。XAMPPが使えたくらいで満足してはいられません。
もっと多くのことについて、手を動かしながら学んでいきたいと思います。

参考文献


コメント

送信フォーム

入力エリアすべてが必須項目です。

内容をご確認の上、送信してください。

※メールアドレスは公開されません