Tech Racho エンジニアの「?」を「!」に。
  • インフラ
  • 開発

WordPressをローカル環境等にお引っ越しする方法(XAMPP使いも歓迎)

Webチームのebiです。

以前、EC-CUBEのサイトをローカル環境に持って来たいと言う旨の記事を書きました。

今回はみんな大好き(?)WordPressのサイトをローカル環境に移動させるお話です。
ローカルで作ったものを本番環境に展開させる場合も同じ要領でできます。

加えてただのWordPressのサイトだけではなく、マルチサイト化したWordPressのサイトも扱えるようにすることを目標にします。サーバが動くなら別にXAMPPを使っててもいいですよ。

せっかくなので、あえてVirtualBoxに頼らずWindows上で完結するXAMPPでやってみました。手元のXAMPP(Ver.5.6.21)を用いた時の記録を残しておきます。

ローカル環境の全般的な話はこちらの過去記事も参照してください。

WordPressのマルチサイト化について

先にWordPressのマルチサイトについて簡単に説明をしておきます。
サブドメイン型とサブディレクトリ型の2種類があります。まぁ、どちらも割と言葉通りと言うか、WordPressに限らず使用される話ですね。

どちらの場合もサイト毎に異なるWordPressのテーマを適用させることで、見た目上違うサイトとして運用されていくはずです。しかし、使用するデータベースとディレクトリは同じものを共有することになります。

詳細については、WordPressCodexを見ましょう。

サブディレクトリ型

URLが example.com/site1example.com/site2 のような構成になります。
あたかもディレクトリごとにサイト素材が分かれているように見えるURLになると言うことですね。

サブドメイン型

URLが site1.example.comsite2.example.com のような構成になります。
"site1"、"site2"のようなサブドメイン部分でアクセス先を分けます。"example.com"のようなメインのドメイン部分は共有となります。

URLにポート番号を含む運用はやめましょう

何のことかよく分からない人は、とりあえず読み飛ばして大丈夫です。

マルチサイト化する際に、URLにポート番号を含んでいると怒られます。正確に言うと80番443番以外のポート番号を含むURLが禁止されています。
そのため、ローカル環境でポート番号を使用して複数サイトを管理する(過去記事で紹介)手法はとれません……。

例: http://localhost:2222 、 http://127.0.0.1:2222
みたいなURLでWordPressマルチサイトのローカル環境を管理することはできません。

ローカル環境にマルチサイト化したWordPressサイトを置く場合は、ちゃんとドメイン名を使ったURLでアクセスできるようにしておきましょう。実際のやり方は後ほど解説します。

WordPressをローカル環境に持って来る

まずは本番サーバのファイルとデータベースを持って来ます。

ファイルはとりあえずSFTPで持って来てもいいです。ツールは何でもよいので、手に入れれば勝ちです。

XAMPPだったら、 xampp/htdocs/example.local となるようにWordPress本体のフォルダ(example.local)を置いちゃいましょう。
XAMPPのコントロールパネルから、サイドメニューのExplorerをクリックすると、xamppフォルダを開いてくれますよ(いま知った)。

データベースもphpMyAdminから持って来ちゃいましょう。
下図のように、元のデータベースのphpMyAdminからエクスポートしてきます。

圧縮してなければ、 .sql 形式のファイルでダウンロードできるはずです。
この状態ならエディタで編集できますので、エラー等が出た時に直接編集をすることもあります。とは言え、メモ帳を使うのはやめましょう(改行コードが違うので単純に見辛い)。

XAMPPのコントロールパネルから、MySQLを起動した状態で、MySQLのAdminをクリックすると、ローカル環境のphpMyAdminが開かれます。

今度は逆に、先ほどダウンロードしてきたデータベースをインポートをしましょう。

僕の場合、データベースのサイズが大きすぎてアップロードできずにエラーが出てしまいました……。データベースを圧縮するか、phpの設定を変える必要がありますね。

xampp/php/php.ini を開き、

  • post_max_size
  • upload_max_filesize
  • max_file_uploads

あたりをデータベースのサイズ以上になるように、少し大きくしておきました。編集後は忘れずに、コントロールパネルからApacheを一度Stop⇒Startで再起動します

再チャレンジしたところ、別のエラーが出てしまいました……。

どうやらMySQL側も設定を変更しないといけないようです。

xampp/mysql/bin/my.ini を開き、

  • max_allowed_packet

を少し大きくします(1M⇒8Mにした)。MySQLも設定の変更後に再起動が必要です
リベンジするけど、三度エラーが出ます。既にデータベースの作成までは進んでいたようです。もうデータベースあるよ。って文句を言われました。

正しく再現できているかどうか怪しいので、これは一度消しました。サイドメニューから、そのデータベースを選択し、上のメニューの操作に移動すると、データベースの削除ができます。

度重なる再挑戦を経て、ようやく何もエラーが出ずにデータベースが作成できました。

こんなに苦労するとは……。

ApacheにDirectoryディレクティブとVirtualHostを追加する

必要があれば使用するディレクトリ(≒フォルダ)に使用許可を与えるためにDirectoryディレクティブを追加します。

ドメイン名を使って適切なサイトにアクセスさせるためにVirtualHostを作成します。一般的なローカル環境を作る時と同様にやれば大丈夫です。
サブドメイン型マルチサイトの場合は、各サブドメインにアクセスできるようにVirtualHostを作っておくことがポイントです

XAMPPの場合、 htdocs以下に置いていれば、元の設定のおかげでDirectoryディレクティブを追加する必要はないため、VirtualHostの書き方だけ紹介しておきます。

xampp/apache/conf/extra/httpd-vhosts.conf からVirtualHostを足せます。コメントアウトされている記入例を真似したりして足しました。

  • ServerAdmin は本来管理者のメールアドレスを記すものですが、任意のもので大丈夫です。
  • DocumentRootに、使いたいサイトのディレクトリを指定します。
  • ServerNameには、使用したいドメイン名を記入します。
  • ServerAliasを以下のようにワイルドカード形式で書いておくと、どんなサブドメインも使えるようになります。サブドメインを使って、複数のマルチサイトを管理したい際には、この書き方で十分でしょう。
  • ErrorLog、CustomLogには、ログの出力先を設定します。サイト毎にログファイルを分けることができます。

なお、VirtualHostを新しく作ることによって、今までアクセスできていたXAMPPのダッシュボードや、htdocs以下の各ファイルにアクセスできなくなってしまうので、新しく足すVirtualHostの前に /xampp/htdocs をDocumentRoot に持つVirtualHostを併せて定義しておきます。

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "C:/xampp/htdocs/"
    ErrorLog "logs/error.log"
    CustomLog "logs/access.log" common
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin webmaster@example.local
    DocumentRoot "C:/xampp/htdocs/example.local"
    ServerName example.local
    ServerAlias *.example.local
    ErrorLog "logs/example-error.log"
    CustomLog "logs/example-access.log" common
</VirtualHost>

wp-config.phpを変更する

コピーしてきたWordPress本体のファイルのうち、wp-config.phpだけはローカル環境に合わせて変更する必要があります。

// WordPress のためのデータベース名。ローカルに再現したデータベース名にする。そのままならそのまま。
define('DB_NAME', 'exampledb');

// MySQL データベースのユーザー名。root等に変更する。
define('DB_USER', 'root');

// MySQL データベースのパスワード。XAMPPの初期状態だとパスワードは必要ないらしい。
define('DB_PASSWORD', '');

// MySQLのホスト名。localhost等に変更する。
define('DB_HOST', 'localhost');

// メインサイトのドメイン名。ローカル用のドメイン名に変更する。
define('DOMAIN_CURRENT_SITE', 'site1.example.local');

hostsを書き換える

ローカル環境に作ったサイトのドメイン情報は、この世界のどこにも無いので自分で定義する必要があります。
PCに元からあるhostsに追記して、使用するドメインを使ってアクセスするサーバを自分のPC宛て(127.0.0.1)にします

本番と同じドメインのまま、hostsを書いて自分のPC宛てにすることもできますが、今見ているのが本番環境なのかローカル環境なのか分からなくなり、作業中に困惑するのでオススメしません。

Windows10環境では、C:\Windows\System32\drivers\etc\hosts にあります。
一度、デスクトップあたりにコピーして、それを編集します。

127.0.0.1 site1.example.local site2.example.local site3.example.local

のように使いたいドメインを追加しましょう。
そうしたら、編集したファイルをコピーして、元の場所に貼り付けします。警告が出ますが、無視して上書きします。

データベースのドメイン名を書き換える

WordPressのデータベースにはドメイン情報も含まれるため、必要に応じてデータベース中に含まれるドメイン名の情報も変更する必要があります。
SQLを使ったり、dumpファイルを書き換えてもいいですが、秘密兵器としてSearch and Replaceを使うとちょっと楽です。

公式サイトからダウンロードしてきた、Search-Replace-DB-master フォルダを DocumentRoot に置きます。
これまでの例で言うと、 C:/xampp/htdocs/example.local/Search-Replace-DB-master の位置に置けばオッケーです。

アクセスするのに、さっそく先ほどのhostsの書き換えが活きてきます。

http://site1.example.local/Search-Replace-DB-master

のようなURLをブラウザに入力すると、Search and Replace の下図にある画面が表示されます。

記入するのは、一番上の serach/replace 欄です。ここに変更前と後のドメインを記入します。

実行前に置換した時の結果を見るdry runができます。問題なさそうならlive runで実際に置換しましょう。

まとめ

以上の作業でもって引っ越し完了するはずです。
余裕のある人はもちろん、XAMPPじゃなくて仮想環境に普通にApacheを立ち上げればいいですし、sshを繋いでデータベースのdumpファイルを作成して、rsyncで必要なものを一気に取ってきちゃいましょう。
Apacheに設定を追加したり、使用するデータベースの情報を指定するconfigファイルがあったり、使うものが変わってもやることは同じですね。

関連記事


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。