LOCAL by FlywheelとBackWPupで! ワードプレスサイトの完全コピーを、Macのローカル環境上に構築する

はてなブログで運営中のとあるサイトを、WordPressに移行するための作業を頼まれている。潔く引き受けたものの、なんて言ったって、はてなブログ自体まともに使ったことがない。また、サイトの引っ越し作業はなかなか緊張感のいる作業だ。

そのため、いきなり本チャンサイトでの引っ越しをする前に、まずはローカル環境を使って練習してみてから、取り組んでみようと思っている。

当然、こんな呑気なことを言っているくらいだから、金銭をもらっての仕事ではない。いや、その方からは、金銭よりもはるかに価値のあるものを頂いているので、そこはいいのだけど。

また、はてなブログの件とは別に、近々このサイト自体のWordPressテーマも変更しようかと検討している。今は「Simplicity2」というテーマを使っているが(かなり手を加えているが)、開発者の方が、つい最近「Cocoon」という新しいテーマを発表したので、そちらに移行しようかなと考えているのだ。

それに当たって、こちらの件も、いきなり本チャンサイトで作業を行うよりも、まずはローカル環境で試してから行いたい。と言っても、コンテンツがまったくない状態の寂しい環境でやるよりも、オリジナル同様のテキスト・画像が揃っていたほうがイメージがはるかに掴みやすい——。

というわけで、今回久しぶりに使ったのが、以前紹介した「Local by Flywheel」というアプリ。使った限りでは、もっとも簡単にWordPressのローカル環境を構築できる、素晴らしいツールだ。

 WordPressでブログを運営していると、必然やることになるのが、サイトのカスタマイズ。中にはテーマのデフォルトデザインのまま...

今回は、Local by Flywheelで構築したローカル環境のサイトに、バックアッププラグイン「BackWPup」で用意したこのサイトのデータを移植して、ローカル上に完全コピー環境を構築してみた。以前は同様の環境作りをMAMPを使って構築していたが、Local by Flywheelのほうがはるかに楽だった。

せっかくなので備忘録を兼ねて、ブログ記事に残しておく。


なお、タイトルの通り、Macでの作業なので、Windowsユーザーの方は申し訳ないがご了承を。

Windowsであれば、筆者自身が参考にさせていただいた以下のページが参考になると思う(ただ、筆者がWindowsでやってみたら上手くいかなかったのだが。詳しくはあとがき参照)。

前提条件・事前に用意しておくもの

今回の作業は、すでにLocal by FlywheelがMac上にインストールされてある前提で進めている。まだ、Local by Flywheelをインストールしていない方は、こちらの公式ページからダウンロードを。

またインストール手順は、以前アップした以下の記事を参考にしてくれれば幸いだ。

 WordPressでブログを運営していると、必然やることになるのが、サイトのカスタマイズ。中にはテーマのデフォルトデザインのまま...

また、今回の作業に当たって、Local by Flywheel以外に事前に用意しておくツールは、

  • BackWPup
  • テキストエディタ

の2つ。

「BackWPup」は、本番サイトのバックアップデータを取得するために今回使うので、本番サイトにインストールしてなければ先に追加しておく。とてもありがたいプラグインのため、ローカル環境云々関係なしに、入れておくことをオススメしておく。

「テキストエディタ」は、phpスクリプトなどを扱うので、できればmacOS標準の「テキストエディット」ではなく、もう少しそれ向けの方がいい(Windowsの「メモ帳」では、絶対に駄目)。

何も持っていなければ、App Storeから簡単にダウンロードできるCotEditor(無料)がオススメ。

「CotEditor」のレビューのチェック、カスタマー評価の比較、スクリーンショットやその他の詳細情報を見ることができます。macOS @@minimumOSVersion@@以降対応の「CotEditor」をダウンロードして、Macでお楽しみください。

不可視ファイルを表示できるように設定しておく

今回の作業では、macOS標準設定では表示されない、不可視ファイルの「.htaccess」を扱う。そのため、事前に不可視ファイルの「見える化」を行なっておく。

「ターミナル」アプリで以下のコマンドを実行する。

  1. $ defaults write com.apple.finder AppleShowAllFiles -boolean true
  2. $ killall Finder

元に戻す際には、以下のコマンドで元通りになる。

  1. $ defaults delete com.apple.finder AppleShowAllFiles
  2. $ killall Finder

より丁寧な解説は以下のページに譲る。

Macの隠しファイルや隠しフォルダを表示する裏技

BackWPupでデータベースとファイルをダウンロードする

ここから、ローカル環境への引っ越し作業のスタート。

まずは、本番サイトのデータベースや、すべての画像ファイルなどをBackWPupを使って一括でダウンロードする。

バックアップ用ファイルを取得する前に行っておくべきことは、セキュリティ系のプラグインの停止。

サーバー移転時ほど神経質にならなくても良いが、万が一プラグインによるセキュリティ対策の機能によって、うまく動作しなくなっても困るため、セキュリティ系のプラグインは停止(できれば削除)しておくのが無難。

ちなみに筆者が停止させたのは、以前行ったサーバー移行作業と同じく、

  • SiteGuard WP Plugin
  • Jetpack by WordPress.com

の2つ。

参考:「キャッシュ系やセキュリティ系プラグインを削除しておく

新規バックアップジョブを追加し、実行・ダウンロード

BackWPupにローカル環境用に新規バックアップジョブを追加する。

ジョブの設定

■「ジョブ名」はわかりやすいものに変更しておく。

■「ジョブタスク」には、

  • データベースのバックアップ
  • ファイルのバックアップ
  • インストール済みプラグイン一覧

を含めておく。

■アーカイブ形式(圧縮形式)はなんでもいいが、この記事のようにMac環境でやるなら「Tar GZip」にしておくと無難(WindowsならZip)。

残りの設定は、とくに何もいじらず基本設定のままで問題ない。

詳細は以下のページが詳しいので、そちらに譲る。

WordPress本体ファイルとデータベースを一撃でバックアップする方法

ジョブの設定が完了したら、「今すぐ実行」をクリックし、終わったら「ダウンロード」する。

ダウンロードが完了したら、Tarファイルを展開(解凍)し、出てきたフォルダをデスクトップなど、わかりやすいところに移動させておく。

解凍したフォルダを開く。拡張子が「sql.gz」となっているファイルが、サイトのデータベースファイルなので、覚えておく。圧縮ファイルだが、展開しなくていい。

わかりやすいように、フォルダから避けて別の場所に移動させておいても良い。

データベースファイルを確認する。

Local by Flywheel上に新規サイトを追加する

続いて、「Local by Flywheel」アプリを立ち上げ、新規サイトを追加する。

Local by Flywheel サイト名をlocaltest。ドメインをlocaltest.localに設定。

今回は便宜上、

  • サイトネームを「Localtest」
  • ドメインを「localtest.local」

に設定している。(本当はもうちょっとかっこよくしたいが、解説をわかりやすくするため)

そのため、今後「localtest」や「localtest.local」と書かれていたら、特に断りがなくともローカル環境上のサイトのことだと思ってほしい。

残りの設定は全てデフォルト通りで問題ない。WordPress管理者としての

  • ユーザー名
  • パスワード

は、ここで設定しても、後ほど本番サイトと同じものに書き換わってしまうため、深く考えなくても良い。

ローカルサイトの管理画面にアクセスする

サイトの追加が完了したら、「DATABASE」→「ADMINER」をクリックし、ただいま作成したローカルサイトの管理画面にアクセスする。

Local by Flywheel ADMINERをクリックし管理画面を開く

データベース上のテーブルを全て選択し、「削除」する。

テーブルをすべて選択し、削除する。

データベース内が空になったら、左上の「インポート」をクリックし、さきほどDL・展開した際に確認したデータベースファイルをインストールする。

「ファイル選択」でデータベースファイルを選び、「実行」でインポートを行う。

「〇〇クエリーを実行しました」と表示されていたら完了。

ローカル環境サイトの全ファイルを置き換える

Local by Flywheelアプリの画面に戻る。右上の「STOP SITE(赤)」をクリックし、一度サイトを停止させる。

サイト名の下にある「~/Local Sites/localtest」といったパスの右側にある矢印をクリックし、サイトのデータが収められているフォルダを開く。

「localtest」 → 「app」 → 「public」 とフォルダを潜って行く。

「public」フォルダを開き、中にある全てのファイル・フォルダを削除する。

publicフォルダの中身をすべて削除する。

空になった「public」フォルダに、先ほど展開したバックアップデータ類を全て移動させる(上でインポートしたデータベースファイル以外)。

「wp-config.php」をテキストエディタで書き換える

ただいま「public」に移動させたファイルの中から「wp-config.php」というファイルを見つけ出し、テキストエディタで開く。

  • WordPress のデータベース名
  • MySQL のユーザー名
  • MySQL のパスワード
  • MySQL のホスト名 (ほとんどの場合変更する必要はありません。)

の4つが本番サイトで使っているサーバー向けの設定になっているので、ここでLocal by Flywheel向けに書き換える。

データベース名、ユーザー名、パスワード、ホスト名を書き換える。

Local by Flywheel基本設定ままの場合、

  • データベース名が「local」
  • ユーザー名が「root」
  • パスワードが「root」
  • ホスト名が「localhost」

に設定されている。確認するには、アプリの「DATABASE」タブ下に書かれている。

データベース名などは、Local by FlywheelのDATABASE下に書かれている。

データベース名、ユーザー名、パスワード、ホスト名を書き換えた後。

書き換え後

書き換えたら保存し、テキストエディタを閉じる。

Search Replace DBでURLを一括置換する

これで実は、コピーサイトの構築は完了しているが、一つ一つのリンクや画像パスの記述が本番サイトのURLになってしまっている。

そのため、URLを一括置換するために「Search Replace DB」というツールを使う。ブラウザベースで動くソフトウェアのため、OS関係なく利用できる。

Search Replace DBのDL・インストール

ツールのダウンロードは以下のURLから。

Search Replace DB is a powerful tool for developers, allowing them to run a search replace against their database where CLI tools or WP plugins can’t work.

サイトのURLを一括で置換するという、かなり大胆なことがやれちゃうツールのため、当然厳重な注意が必要。ダウンロードの際には、「自己責任」ということを大いに念押しされる。

厳重に念を押される注意事項にチェックをし、

  • 氏名
  • メールアドレス

を入力。「SUBMIT」をクリックし、確定する。

Search Replace DB チェックし、氏名・メールアドレスを入力。

入力したメールアドレスにファイルのダウンロード用リンクが送られてくるので、そこからダウンロードする。

ダウンロードしたZipファイルを展開し、出てきた「Search-Replace-DB-master」フォルダを、さきほどの「public」フォルダに移動させる。

「Search-Replace-DB-master」を、「public」フォルダに移動させる。

Search Replace DBで一括置換

一度、Local by Flywheelアプリ画面に戻り、右上の「START SITE(緑)」をクリックし、再びサイトを稼働させる。

「http://localtest.local/Search-Replace-DB-master」

と、ブラウザに入力し、Search Replace DBを開く(当然「localtest.local」の部分は、あなた自身のローカル環境サイトのURL)。

  • 「replace」欄に、https://yagichon.com (オリジナルサイトのURL)
  • 「with」欄に、http://localtest.local (ローカル環境サイトのURL)

と入力する。

Search Replace DBの設定。

データベースの項目が、それぞれさきほどテキストエディタで書き換えた通りになっているか確認する。

Actionsの段にある「dry run」をクリックし、置換する項目を確認してから、「live run」で実際に置換する。

「マジでやりますか?」と確認が出てくるので、OKし実行。

終わったら、delete meをクリックし、Search Replace DBを削除する。念のため、「public」フォルダから「Search-Replace-DB-master」が消え去っているか確認しておく。

余談だが、以前MAMP環境で構築した際は、データベースをテキストエディタで直に置換していたが、作業がやたらと重い上に、コピーサイトでの表示が崩れていたりと、あまり良い結果ではなかったので、オススメしない。というか、どうやら、やっちゃいけないヤツだったらしい。

参考:WordPressでサーバ移行時にデータベース上のドメインを書き換える方法

【完成】ちゃんとできているかURLを確認する

これでローカル環境のコピーサイト作りの手順は完了だ。

アプリ画面に戻り「VIEW SITE」をクリックしてみると、どうだろう。ブラウザが立ち上がり、見慣れた自分のサイトと全く同じものが表示されていると思う。

ローカル環境でのコピーサイトが完成。

適当に記事を開いてみたりメニューをクリックしたりして、リンクがちゃんとローカルサイトのものになっているか確認する。

画像もローカルのドメインに切り替わっているので、バッチリ。

画像もローカルのものに切り替わっているので、バッチリ。

ふたたびアプリに戻り、「ADMIN」タブをクリック。WordPress管理画面へ行くので、ログインする。

  • ユーザー名
  • パスワード

は、冒頭で述べたように、本家サイトと同じものに切り替わっている。パスワードはログイン後にWordPress上の設定画面で、簡単なものに変更しておくといいかもしれない(ただ「楽」というだけでなく、うっかり本家サイトと間違えないためにも)。

【あとがき】ウェブ制作はMacのほうがやっぱり向いているらしい

さっそく構築したローカル環境の方に、WPテーマ「Cocoon」をインストールしてみた。なかなか洗練されていて、かっこいい。これからローカル環境上でデザインを決めていってから本番サイトにも適用させたい。

構築したローカル環境にCocoonをインストールしてみた。

ちなみに、当初この作業はWidnows 10で取り組んでいたのだが、どうもWindowsで動かすLocal by Flywheelとは、あまり相性が良くなかったらしく、3時間くらい格闘したのにもかかわらず上手くできなかった。

そのため、一週間ぶりくらいにiMacを立ち上げてやってみたら、30分もかからずすぐにできてしまった。やっぱり、こういう作業(WEB制作やプログラミング)は、Macの方が最適化されているんだなと、つくづく感じてしまった。

いや、「お前最近Linuxばっかり言ってんだから、Linuxでやれよ」と言われてしまいそうだが、Linuxの場合、Local by Flywheelのような生易しいソフトは用意されてなく、また、「LAMP」で構築するのもだいぶ敷居が高く感じてしまうのだ。

「いや、俺そこまで本格的にやりたいんじゃないし……」みたいな。
所詮、なまっちょろいLinuxユーザーなのである。