Local by Flywheelを導入してWordPress開発環境を構築しよう

Local by Flywheelを導入してWordPress開発環境を構築しよう

どうもムラタです。
早いもので今年も残りあと僅かですが、今年はまったくバイクでツーリングに行ってないので寒さが本格的になる前にどこか行きたいですね。まあ十中八区どこも行かないですが。

さて、今回は前回の「VCCWを導入してWordPress開発環境を構築しよう」に引き続き、ローカルでのWordpress構築環境のお話です。

前回のVCCWでは導入前になんやかんやインストールしたり、設定ファイルいじったり、起動させるのにコマンドプロンプト触ったりと、正直ちょっと敷居が高い感じがしたと思います。
実際自分も導入いたるまでかなり嫌悪感がありました。

そんなわけで今回はそんな難しいことは取っ払ってもっと楽にローカル環境を構築しようというわけです。

Local by Flywheelとは

今回使用するのが「Local by Flywheel」というツールで以下のような特徴があります。

  • 無料で使用できる。
  • GUIなので基本的に自分でコマンドを打つ必要は無い。
  • ローカルでSSL環境を実装できる。
  • 元々はMacのみ対応だったが最近Windowsも対応された。
  • 一時的にローカル環境を外部に公開できる。
  • PHPやWEBサーバーを構築後でも変更できる。
  • WP-CLIが使用できるので管理画面にログインせずにWPに関する様々な操作がコマンドラインで行える。

どうでしょう、無料でここまでの機能が使えれば申し分ないのではないでしょうか。

インストール

それでは早速インストールしてみましょう。
まずはLocal by Flywheelのサイトにアクセスします。

サイト右上の方に「Download」というボタンがあるのでそこをクリックします。

Mac版とWindows版のどちらかを選択するようになっているので任意のOSを選択します。今回はWindows版で説明します。

フォームに名前やメールアドレス、社名など入力する欄がありますが必須項目はメールアドレスと末尾の所有webサイト数だけなので、余計な情報を渡したくない人はその2つだけ入力して「GET IT NOW!」というボタンをクリックします。

送信後「自動的にDLが開始されます」的なポップアップが表示されてDLが開始されます。何も始まらない人は「click here」より手動でDLをしましょう。

DLしたexeファイルを実行するとインストールが開始されますが、場合によっては「WindowによってPCが保護されました」というメッセージが表示されてインストールが中断される場合もあります。

その場合無視して実行でいいのですが、画面に「実行しない」しかボタンが表示されていない場合、メッセージ終わりの「詳細情報」をクリックすると「実行」というボタンが表示されるのでそれでインストールを続行します。

しばらく待ってインストールが完了すると「Error Reporting」というポップアップが表示されますが、これは何かしらのエラーが起こった際にそのレポートを開発元に送信するかどうかの表示なので、開発に貢献したいのであれば「Turn on Error Reporting」を、何も送信したくないって人は「いいえ」ボタンを押してください。

次に「Welcome to Local by Flywheel」という画面が表示されていると思いますが、Local by Flywheelを使用するに当たって、必要なツールのインストールもしくはアップデートを行なう必要があるため、それをひとつひとつ設定していくよという訳です。

では「LET’S GO」というボタンをクリックしてそれぞれインストール進めます。

VirtualBoxはインストールする際に強制的に再起動させられるようなので(すくなくとも自分はそうでした)作業中のファイルなどがあれば事前に保存して終了しておきましょう。

再起動させられたらもう一度exeファイルを開くと続きから始まります。

VirtualBox以降も同じようにインストールを進めていきましょう。

ローカルサイトの作成

全てインストールが完了したらLocal by Flywheelが開き以下のような画面になっているかと思います。

なにはともあれまずはローカルサイトを作成してみましょう。
画面中央の「CREATE NEW SITE」ボタンをクリックします。

サイト概要の入力

最初にサイト名を入力する欄が表示されるので任意の名前を半角英数字で入力します。ここで入力した名前はサイト名にも使われますが、サイト名を日本語にしたい場合はWPのインストールが完了してから管理画面内で変更してください。

また名前入力欄の下にある「ADVANCED OPTIONS」をクリックするとローカルで確認する際のドメインやファイルの保存先、ブループリント(設計図として後程使いまわせるようにする?)などの設定ができます。

設定が終わったら「CONTINUE」ボタンをクリックして次に進みます。

環境の設定

次にPHPのバージョンやWEBサーバー、データベースの設定を行ないます。
「Preferred」と「Custom」がありますが、よく分からない場合はPreferredを選んでおけば問題ないです。PHPのバージョンやWEBサーバーの種類を本番環境と合わせておきたい場合はCustomよりそれぞれ選択可能です。

ただしCustom設定にした場合、正常な動作の保証はしていないようです。

Customで選択できるPHPのバージョンは(Local by Flywheel Ver2.1.1)7.1.4~5.2.4です。

WEBサーバーは「nginx」か「Apache」のどちらかを選択できます。Apache以外知りませんでした・・・

MySQLに関しては5.6と5.5のどちらかのみとなります。

設定が済んだらまた「CONTINUE」ボタンより次に進みます。

WordPressの設定

最後にWordpressの設定を行ないます。
管理者ユーザー名とパスワード、メールアドレスを入力するだけです。

こちらにも「ADVANCED OPTIONS」がありますが、マルチサイト化するかどうかの設定のみになります。

最後に「ADD SITE」ボタンをクリックすると設定した内容でローカルサイトの構築が始まります。
少し時間がかかるので気長に待ちましょう。

その際、途中に何度か「デバイスに変更を加えることを許可しますか?」というダイアログが表示されますが全て「はい」とします。

サイトの構築完了

構築が完了すると次のようなサイトの概要を表示した画面になります。

画面左側にある「Local Sites」に構築したローカルサイトが一覧として並びます。

仮想環境が起動しているローカルサイトは名前の左側に緑のがつきます。この状態のサイトは設定したサイトドメインにアクセスすることでサイトを閲覧することが可能になります。

画面右側には選択しているローカルサイトの概要が表示されます。
ここから管理画面やサイトTOPに飛ぶこともできます。

また途中でPHPのバージョンやWEBサーバーを変更したくなった場合もここから再度設定可能です。あまりないと思いますがサイトドメインも途中で変更可能です。

それでは早速「VIEW SITE」ボタンよりサイトを確認してみましょう。

問題なく表示されました。ドメインも設定した「project-name.local」になっています。

ディレクトリ構成

今回ローカルサイトのインストール先をDドライブの「local_by_flywheel/project_name」としましたが、実際のルートディレクトリは「local_by_flywheel/project_name/app/public」となります。

local by flywheelの機能

local by flywheelには様々な機能も付いています。

データベースの操作

まずデータベースの操作については「Adminer」というPHPベースのデータベース管理ツールが使えます。今までphpMyAdminしか使ってなかったので画面の簡素さにちょっと悲しく見えます・・・。

サイトのSSL化

SSLについて詳しくないですが、ローカルサイトを作成した時点で自己署名の証明書が発行されるそうで、これでなんちゃってSSL化ができるそうです。本番と限りなく近い環境にしたい人にはいいのでしょうか。

メール送受信の確認

昔xamppで構築していた時、メールの送受信を可能にしようとすると割と面倒くさいことになっていた記憶がありますが、Local by Flywheelでは「MailHog」というツールを使用することで簡単にローカルでのメール送受信の確認が行えます。

サイトの概要の「UTILITIES」より「OPEN MAILHOG」ボタンをクリックすることでMailHogの画面へ遷移します。

WordPressを構築した際のメールが届いているのが確認できます。

ローカルサイトの外部公開

ローカルで構築している内容をスマホの実機で確認したいときや他のスタッフのPCで確認してもらいたいときってありますよね。
xamppでも同じLAN内であれば色々設定すれば可能でしたがLocal by Flywheelではもっと手軽に外部の人にローカル環境を確認してもらうことが可能です。

サイト概要画面の下に「Live Link」という項目があるので、それの「ENABLE」ボタンをクリックします。

すると先ほどの箇所に「xxxxxxx.ngrok.io」のようなアドレスが表示されるので、その表示されたアドレスにアクセスするとローカルサイトが表示されるようになります。これでLAN外のスマホでもアクセスすることが可能です。

このように指定されたアドレスでスマホからアクセスできました。

注意点としてこのアドレスは一時的なものでしかなく、一度停止した後再度ENABLEとした場合、まったく別のアドレスが割り振られます。
クライアントなどに送る際はあくまで一時的なアドレスということを忘れずに伝えましょう。

SSH+WP-CLI

WPの様々な処理を管理画面に入らずコマンドラインから行なえる「WP-CLI」も標準で入っています。

WP-CLIを実行するにはまず構築した仮想環境にSSHでログインする必要があります。
Local by Flywheelの構築サイト一覧から任意のサイトを右クリックすると「Open Site SSH」というメニューがあるのでこれをクリックします。

すると黒いコンソール画面が表示されるので、まずは下記のコマンドを入力してWP-CLIがインストールされているか確認してみます。

これで下記のようにバージョン情報が表示されれば問題ありません。

試しにWP-CLIを使ってDBのバックアップを取ってみましょう。
バックアップを取るには下記の「db」コマンドを入力します。

 

これでインストール先のディレクトリに「wordpress_20171107.sql」というファイルが作成されているはずです。
今回の例でいえば
「local_by_flywheel/project_name/app/public」になります。

WP-CLIには他にもプラグイン名をまとめて指定して一気にインストールするなど色々便利なコマンドが使えますので、気になる人は調べてみてください。

おわり

いかがだったでしょうか。前回のVCCWに比べたらグッと敷居は下がったと思いませんか?

使い慣れたものから新しいツールに移行するのは誰でも億劫だと思いますが、使い始めたら便利だと思うので挑戦してみてはいかがでしょうか。

同じカテゴリー(WEB制作・デザイン)の記事