WordPressサイトをローカル環境で構築する時、これまではXAMPPを利用していましたが、便利なツール「 Local by Flywheel 」を発見しましたので、ご紹介します。
これまで使っていた、XAMPPは複数ローカルサイトを構築する場合は、フォルダで分けて構築していました。なので、サイトごとにPHPのバージョンを指定したり、Web serverをApacheやNginxの選択ができませんでしたが、この Local by Flywheel だと、サイトごとにカスタマイズできます。なので、本番環境に近い環境でサイト構築が可能になります。
ダウンロードとインストール手順
Local by Flywheelのサイトにアクセスしてアプリをダウンロードします。[FREE DOWNLOAD!] よりダウンロードします。
[FREE DOWNLOAD!]をクリックすると、下図のようにプラットフォームを選択する画面が表示されるので、ご自分の環境に合わせて選択してください。[First Name]、[Last Name]、[Work Email]、[Number of websites]の項目は入力する必要があるようです。入力したら「Get it Now!」ボタンをクリックしてダウンロードしてください。
ダウンロードが終わると、プラットフォームをWindowsを指定した場合、[local-by-flywheel-X-X-X-windows.exe] がダウンロードされていると思います。
exeファイルを起動してインストールを開始します。
しばらくすると、下図のような、ウェルカム画面が開きますので「LET’S GO!」ボタンをクリックしてください。インストールが開始します。
Local by Flywheelは、VirtualBoxを使ってローカルサーバを起動させているようです。ウェルカム画面の案内にそってインストールをしてください。
ローカル環境の構築
Local by Flywheelのインストールが完了したら、ローカル環境を構築します。Local by Flywheelを起動してください。[＋ CREATE A NEW SITE] ボタンがありますので、そこをクリックします。
サイト名の指定
[＋ CREATE A NEW SITE] をクリックすると下図のように [What’s your site’s name?]と聞かれるので、構築するサイト名を入力してください。のちにローカルドメインとして利用されるので、アルファベットで入力してください。日本語だとエラーがでます。入力後、[CONTINUE]ボタンをクリックしてください。
サーバ環境設定
[CONTINUE]をクリックすると、[Choose your environment] ウインドウが開くので、[Preferred]か[Custom]を選択します。[Preferred]は推奨設定のことで、サーバのことはよくわからないけど、とりあえずWordPressを動かしたい時に利用してください。[Preferred]だと、あとからサーバ設定を変更できないのでご注意ください。[Custom]だと下図のように、PHPバージョンとWebサーバー、MySQLのバージョンをカスタマイズできます。設定が完了したら[CONTINUE]ボタンをクリックしてください。
Preferredの場合のサーバー設定
| PHP | 7.1.7 |
| Web Server | nginx + Varnish |
| MySQL | 5.6 |
WordPressの設定
下図のように[Setup WordPress] 画面が開くので、[WordPress Username]と[WordPress Password]を設定してください。[WordPress Email]は初期設定のままでもOKです。
設定が完了しましたら、右下の[ADD SITE]でローカル環境を構築してください。環境構築中は下図のような画面になりますので、完了するまでしばらくお待ちください。
※構築中「このアプリがデバイスに変更を加えることを許可しますか？」とダイアログが表示されるので全て「はい」を選択してください。
ローカルサイトの設定画面
SITE SETUP
構築したローカルサイトの[SITE SETUP]画面です。サーバー環境設定で[Custom]を指定した場合この画面からPHPのバージョンの変更やWebサーバの変更ができます。まず、 [ Local Environment ] の項目で [ CHANGE ] をクリックします。
[ CHANGE ] をクリックするとWeb ServerやPHP Versionの変更が可能になります。設定変更が完了したら [ SAVE CHANGES ] で設定を保存してください。
① ～\Local Sites\JunJunWeb
WordPressファイルの保存場所を開きます。
②ADMIN
WordPressのログイン画面を開きます。
③VIEW SITE
WordPressサイトを表示します。
④Web server
ApacheかNginxの選択ができます。
⑤PHP Version
PHPのバージョンの選択ができます。
DETABASE
データベースの管理ができます。①の[ADMINER]から、データベースのエクスポートやインポートができます。（データベースのインポート手順はこちら）
データベースをインポートする
データベースをインポートする場合は、[DATABASE] → [ADMINER]をクリックして、ADMINERを起動してください。ADMINERを起動すると下図のような画面が開きます。
[Import]をクリックしてImport画面を開きます。
[Import]画面が開いたら、インポートするsqlファイルを選択して[Execute]ボタンでインポートしてください。
下図のような表示がでましたら、インポート完了です。
データベースインポート後、ドメインを置換する場合は、以下のページで紹介しているツールを使うと便利です。
WordPressサイトのドメイン一括置換には「Search Replace DB」が良い！
ローカルサイトを起動する
ローカルサイトを起動する手順は以下の通りです。
①起動するサイトを選択
起動するサイトを選択してください。複数ローカルサイトを作成している場合は複数表示されるので起動するローカルサイトをクリックします。
②[START SITE]をクリック
[START SITE]をクリックすると、サイトが起動します。
③起動したローカルサイトを閲覧
起動したローカルサイトをブラウザで閲覧する場合は[VIEW SITE]をクリックしてください。
④WordPress管理画面へアクセス
ローカルサイトのWordPress管理画面にアクセスする場合は[ADMIN]をクリックしてください。
⑤ローカルサイトを終了
ローカルサイトを終了する場合は[STOP SITE]をクリックしてください。
ローカルサイトを一時的に公開
Local by Flywheelは、構築中のローカルサイトを一時的に外部公開することができます。スマートフォンの実機でテストしたり、他の人にサイトを確認してもらったりすることができます。
Local by Flywheelの画面下方に[Live Link]という項目があるので、そこの[ENABLE]ボタンをクリックしてください。
[ENABLE]ボタンをクリックしてしばらくすると、下図のように[ xxxxxxxx.ngrok.io ]のようなアドレスが表示されます。このアドレスを使えば外部確認をしてもらうことが可能になります。
※一時的なアドレスなので、停止したりするとまた別のアドレスが割り振られます。
サイトの追加について
サイトをさらに追加する場合は左下に[ + ]ボタンがあるので、クリックしてください。「ローカル環境の構築」と同じ手順で、追加のローカル環境が構築できます。その際、サイトごとに環境を別々に設定できます。
まとめ
比較的簡単にローカル環境を構築でき、尚且つ複数のローカル環境別々の設定で管理できるので自分はこの[Local by Flywheel]を見つけた時は感動しました。思わず、全てのローカル環境をこの[Local by Flywheel]に移行させてしまいました。しばらくはメインでこの[Local by Flywheel]を開発環境として使っていきたいと思います。