こんにちは。 大阪でWEB・DTPデザイナーをしています。山本です。
WEB制作をしていると、いやでもWordpressというCMS（専門知識なくサイト構築が自動でできてしまうシステムのこと）の名前を聞きます。このサイトもWordpressで作られています。
自分のブログやサイト、発信をしていくのにWordpressを使っている、もしくは使いたい人も多いのではないでしょうか？ WordPressのサイトを作成するときには以下の手順が必要です。
WordPressのサイトを作成するときには以下の手順が必要です。
- サーバーを用意する
- ドメインを取得する
- サーバー上でWordpressをインストール
でも、サーバー上に環境を構築したり、サーバー上でWordpress内のphpを個別に編集したりするのは面倒だし、必要なものを削除してしまうなど取り返しがつかないことになりかねない危険性もあります。その点、簡単にローカル環境は作ったり壊したりが可能になって便利なんですよね〜。
ローカル環境とは
そもそも初心者にとってはローカル環境って何？という感じだと思います。簡単に言えばローカル環境とは、本番のサイト環境（サーバーにある、検索したら出てくるようなサイト）に限りなく近い仮想的な環境を自分のパソコンの中で用意するのがローカル環境です。
今回、やり方を書くLocal by Flywheelの他にもMAMPなど、ローカル環境を作ることができるアプリケーションはちらほらありますが、私はLocal by Flywheelが一番わかりやすく作りやすいと感じました。
しかし1からLocal by Flywheelで作ってしまうのは簡単なのですが、すでにアップされている既存のサイトをLocal by Flywheelで見たいんやあ…ということが多く、今回は「Local by Flywheel 」で既存のサイトと同じ環境を作る方法を備忘録として残そうかなと思います。
Local by Flywheelの使い方
すでにサーバー上にある本番サイトと同じ環境をLocal by Flywheelで作るとき
Local by Flywheel は公式サイトでダウンロードしてきてください。
ざっくりとした手順はこちらです。
- 本番サイトのサーバー上からWordpressの部分をダウンロードする
- 1.でダウンロードしたデータをインポート
- Local by Flywheelのadminをクリック
- WordPressのインストール画面をそのまま進む
- ログインしてみてプラグインがあるか確認
- 本番サイトのデータベースをエクスポート
- ローカル環境用にデータベースを作り、6.のデータベースをインポート
- wp-config.phpをローカル環境用にデータベースに書き換える
- URLの置換のため、Search-Replace-DB-masterを利用する
- adminをクリックするとローカル環境に本番サイトと同じサイトが作成されている
1. 本番サイトのサーバー上からWordpressの部分をダウンロードする
本番サイトからローカル（パソコン）へWordpressの部分をダウンロードしてきます。
ダウンロードができたら、フォルダごと圧縮し、Zipファイルにしておきます。
2. 1.でダウンロードしたデータをインポート
Local by Flywheelを開き、「File」から「Import Site」をクリック
サイトの名前を入力し、保存されるフォルダを選び、「CONTINUE」をクリックします。
次の画面の「IMPORT SITE」をそのままクリックします。
3. Local by Flywheelのadminをクリック
そうすると次のような画面になるので「ADMIN」をクリックすると、Wordpressのインストール画面へ進みます。
4. WordPressのインストール画面をそのまま進む
必要な情報を入力し、Wordpressをインストールします。
5.ログインしてみてプラグインがあるか確認
4.で入力した情報でログインし、インストールされているプラグインを確認します。
本番サイトにインストールされているプラグインが入ってればOK。
6. 本番サイトのデータベースをエクスポート
ここから本番サイトのデータベースをローカルにまるっとコピーする作業です。
今回はさくらレンタルサーバの場合です。
サーバコントロールパネルのデータベースをクリックします。
データベースを選ぶ画面がでますのでコピーしたい本番サイトのデータベースの欄の「phpMyAdminログイン」をクリックし、phpMyAdminのログイン画面へ進みます。
ユーザー名、パスワード、サーバーの選択は一つ前のデータベースを選ぶ欄にかかれているものを入力して実行をクリックします。
ログインすると、こんな画面に遷移するので、左のコピーしたいデータベース名をクリックします。
エクスポートをクリックします。
エクスポート方法は詳細を選択、テーブルは全部選択をします。
実行をしたら、拡張子.sqlのデータがダウンロードされます。
7. ローカル環境にデータベースを作り、6.のデータベースをインポート
ローカル環境にも、本番サイトと同じデータベースをコピーする作業です。
Local by Flywheelの画面の「DATABASE」のタブを選択し、「ADMINER」をクリックします。
ADMINERはLocal by Flywheel内のphpMyAdminみたいなものかなと思います。
ADMINERの画面にいった後、左は空欄を選択し、「データベースを作成」をクリックしてLocal by Flywheel内にデータベースを作ります。
任意のデータベース名を入力し、「utf8_general_ci」を選択し、保存をします。
次に6. でエクスポートした本番サイトのデータベースをまるっとインポートします。
インポートをクリックします。
ファイル選択から6. でエクスポートした本番サイトのデータベースを選択、実行します。
するとこんな画面になります。
Local by Flywheel内に本番サイトと同じデータベースをコピーすることができます。
8. wp-config.phpをローカル環境のデータベースに書き換える
ローカル環境を保存したフォルダのwp-config.phpを編集します。
そのままだと本番サイトのデータベース名のままなので、Local by Flywheel内に作ったデータベースの名前にwp-config.phpの該当欄を書き換えます。
9. URLの置換のため、Search-Replace-DB-masterを利用する
これでやっと完成かと思いきや、このままだと、ローカルにあるのが本番サイトのデータなので、本番サイトにリダイレクトされてしまいます。
なのでURLの置換が必要です。そんなときに使われているのがSearch-Replace-DB-master。
こちら「Download Search Replace DB」の欄に必要な情報を入れ、SUBMITをクリックします。
SUBMITをクリックすると、入力したメールアドレスにSearch-Replace-DB-masterがダウンロードできるリンクが送られてきます。
そこからSearch-Replace-DB-masterをダウンロードしてください。
ZIPファイルなので解凍後、ローカルのデータが保存されているフォルダのapp→publicの中にそのまま放り込みます。
次にブラウザーで、「ローカル環境のサイトドメイン/Search-Replace-DB-master」にアクセスしてください。
例：test.local/Search-Replace-DB-master
アクセスするとこんな画面になります。
replaceには本番サイトのサイトドメインを、withにはローカル環境のサイトドメインを入力します。
その後、「live run」をクリックしたら、本番サイトのドメインのままだったローカル環境のデータが、ローカル環境用のドメインに置換されます。
そのままだと、.htaccessファイルが本番サイトと同じままなので、Local by FlywheelのADMINからローカル環境のワードプレスにログインして、設定→パーマリンク設定を何もせずに保存したらOK。
あとはLocal by Flywheelの画面から、本番サイトと同じような環境でWordpressのサイトを制作をすることができます。
まとめ
MAMPでローカル環境を作っていた頃には考えられないくらいLocal by Flywheelは直感的にローカル環境が作れます。
こうしてWordpressでのサイト制作が身近になっていくんでしょうね。
ぜひチャレンジしてみてください！
