WordPressローカル環境の構築にはこれだ!「Local by Flywheel」が超絶簡単で使いやすいぞ!
WordPressローカル環境の構築にはこれだ!「Local by Flywheel」が超絶簡単で使いやすいぞ!

WordPressローカル環境の構築にはこれだ!「Local by Flywheel」が超絶簡単で使いやすいぞ!

WordPressサイトをローカル環境で構築する時、これまではXAMPPを利用していましたが、便利なツール「 Local by Flywheel 」を発見しましたので、ご紹介します。

これまで使っていた、XAMPPは複数ローカルサイトを構築する場合は、フォルダで分けて構築していました。なので、サイトごとにPHPのバージョンを指定したり、Web serverをApacheやNginxの選択ができませんでしたが、この Local by Flywheel だと、サイトごとにカスタマイズできます。なので、本番環境に近い環境でサイト構築が可能になります。

ダウンロードとインストール手順

Local by Flywheelのサイトにアクセスしてアプリをダウンロードします。[FREE DOWNLOAD!] よりダウンロードします。

LOCAL by Flywheel

[FREE DOWNLOAD!]をクリックすると、下図のようにプラットフォームを選択する画面が表示されるので、ご自分の環境に合わせて選択してください。[First Name]、[Last Name]、[Work Email]、[Number of websites]の項目は入力する必要があるようです。入力したら「Get it Now!」ボタンをクリックしてダウンロードしてください。

プラットフォーム選択画面

ダウンロードが終わると、プラットフォームをWindowsを指定した場合、[local-by-flywheel-X-X-X-windows.exe] がダウンロードされていると思います。

local-by-flywheel-2-1-1-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]ボタンをクリックしてください。

What's your site's name?

サーバ環境設定

[CONTINUE]をクリックすると、[Choose your environment] ウインドウが開くので、[Preferred]か[Custom]を選択します。[Preferred]は推奨設定のことで、サーバのことはよくわからないけど、とりあえずWordPressを動かしたい時に利用してください。[Preferred]だと、あとからサーバ設定を変更できないのでご注意ください。[Custom]だと下図のように、PHPバージョンとWebサーバー、MySQLのバージョンをカスタマイズできます。設定が完了したら[CONTINUE]ボタンをクリックしてください。

Choose your environment

Preferredの場合のサーバー設定

PHP 7.1.7
Web Server nginx + Varnish
MySQL 5.6

WordPressの設定

下図のように[Setup WordPress] 画面が開くので、[WordPress Username]と[WordPress Password]を設定してください。[WordPress Email]は初期設定のままでもOKです。

Setup WordPress

設定が完了しましたら、右下の[ADD SITE]でローカル環境を構築してください。環境構築中は下図のような画面になりますので、完了するまでしばらくお待ちください。

環境構築中

※構築中「このアプリがデバイスに変更を加えることを許可しますか?」とダイアログが表示されるので全て「はい」を選択してください。

ローカルサイトの設定画面

SITE SETUP

構築したローカルサイトの[SITE SETUP]画面です。サーバー環境設定で[Custom]を指定した場合この画面からPHPのバージョンの変更やWebサーバの変更ができます。

SITE SETUP

① ~\Local Sites\JunJunWeb
WordPressファイルの保存場所を開きます。

②ADMIN
WordPressのログイン画面を開きます。

③VIEW SITE
WordPressサイトを表示します。

④PHP Version
PHPのバージョンの選択ができます。

⑤Web server
Apacheかnginxの選択ができます。

DETABASE

データベースの管理ができます。①の[ADMINER]から、データベースのエクスポートやインポートができます。(データベースのインポート手順はこちら

DETABACE

データベースをインポートする

データベースをインポートする場合は、[DATABASE] → [ADMINER]をクリックして、ADMINERを起動してください。ADMINERを起動すると下図のような画面が開きます。
[Import]をクリックしてImport画面を開きます。

Adminer

[Import]画面が開いたら、インポートするsqlファイルを選択して[Execute]ボタンでインポートしてください。

インポート画面

下図のような表示がでましたら、インポート完了です。

インポート完了

データベースインポート後、ドメインを置換する場合は、以下のページで紹介しているツールを使うと便利です。

ローカルサイトを起動する

ローカルサイトを起動する手順は以下の通りです。

ローカルサイト起動手順

①起動するサイトを選択
起動するサイトを選択してください。複数ローカルサイトを作成している場合は複数表示されるので起動するローカルサイトをクリックします。

②[START SITE]をクリック
[START SITE]をクリックすると、サイトが起動します。

ローカルサイト起動後

③起動したローカルサイトを閲覧
起動したローカルサイトをブラウザで閲覧する場合は[VIEW SITE]をクリックしてください。

④WordPress管理画面へアクセス
ローカルサイトのWordPress管理画面にアクセスする場合は[ADMIN]をクリックしてください。

⑤ローカルサイトを終了
ローカルサイトを終了する場合は[STOP SITE]をクリックしてください。

ローカルサイトを一時的に公開

Local by Flywheelは、構築中のローカルサイトを一時的に外部公開することができます。スマートフォンの実機でテストしたり、他の人にサイトを確認してもらったりすることができます。
Local by Flywheelの画面下方に[Live Link]という項目があるので、そこの[ENABLE]ボタンをクリックしてください。

Live Link ENABLE

[ENABLE]ボタンをクリックしてしばらくすると、下図のように[ xxxxxxxx.ngrok.io ]のようなアドレスが表示されます。このアドレスを使えば外部確認をしてもらうことが可能になります。

Live Link DISABLE

※一時的なアドレスなので、停止したりするとまた別のアドレスが割り振られます。

サイトの追加について

サイトをさらに追加する場合は左下に[ + ]ボタンがあるので、クリックしてください。「ローカル環境の構築」と同じ手順で、追加のローカル環境が構築できます。その際、サイトごとに環境を別々に設定できます。

サイト追加ボタン

まとめ

比較的簡単にローカル環境を構築でき、尚且つ複数のローカル環境別々の設定で管理できるので自分はこの[Local by Flywheel]を見つけた時は感動しました。思わず、全てのローカル環境をこの[Local by Flywheel]に移行させてしまいました。しばらくはメインでこの[Local by Flywheel]を開発環境として使っていきたいと思います。