zipファイルがあれば3分! Local by Flywheelで既存サイトをさくっとインポートする方法

こんにちは。エンジニアの川島です。
WordPressのサイト作成において、なかなか厄介なのがローカル環境の構築ではないでしょうか。特に既存サイトでは、設定や固定ページの内容を揃えたりと、新規サイトの環境構築よりも必要な手間が多くなります。
とはいえ、転職や異動などで新しいチームに加わった場合、環境構築が必要なのは既存サイトであることがほとんど。一つ一つに時間を掛けていたら大変です……。

そこで、ノンスタでは、WordPressのローカル環境構築にLocal by Flywheelというツールを利用しています。
Local by Flywheelが使いやすいことに加え、既存サイトのインポートが容易であることがその理由です。
本記事では、Local by Flywheelで既存サイトをインポートする手順をご紹介します。

Local by Flywheelとは

WordPressローカル環境の構築ツールです。Windows、Macの双方で利用できます。そして、無料です!
公式サイトはこちら。トップページから閲覧できるビデオ映像では、ひととおりの機能が紹介されています。

Local by Flywheelのインストール

こちらの解説記事がとても分かりやすく、おすすめです。

WordPressローカル環境ツール「Local by Flywheel」のインストール方法と使い方

既存サイトのインポート手順

既存サイトのインポート用zipファイルの有無によって、手順が異なります。
チームメンバーのLocal by Flywheelから出力されたzipファイルがあれば、3分以内に構築を終えることも可能です:)

zipファイルを利用した既存サイトのインポート手順

  1. Local by Flywheelを立ち上げ、メニューのfile→Import Siteでzipファイルを読み込みます。
  2. サイト名称と保存場所を設定します。Advanced OptionsのLocal site domainは、必要であれば変更しましょう。(エクスポート側が.localでなくtest.devなどで動いている場合は、揃える必要があります)
  3. 環境設定はzipファイルに格納されているため、変更せずに「IMPORT SITE」をクリックします。
  4. PC本体のパスワードを求められるので入力、しばし待機します。
  5. インポート完了です!

※追加されたサイトの表示を確認するには、右上の「VIEW SITE」ボタンをクリックします。ブラウザに警告される場合は、SSLタブの「Certificate」情報を「TRUST」に変更しましょう。

ここまで、zipファイル側に問題がなければ、およそ3分で環境構築が完了します。
ノンスタではgit情報もzipファイル内に含めているため、git cloneの工程も不要です。既存のローカルレポジトリとしてSourceTreeなどのGUIツールに追加すれば、すぐに開発を始められます。

既存サイトのzipファイルエクスポートについて

Local by Flywheel上でエクスポートしたいローカルサイトを選択し、右クリックすると「export」のメニューがあります。ここからインポート用のzipファイルを作成することが可能です。
既にチーム内でLocal by Flywheelが利用されていれば、新規参入のメンバーも、簡単にローカルサイトを構築することが出来ます。

zipファイルが無い場合の既存サイトのインポート手順

インポート用zipファイルが無い場合は、以下の手順を取ります。

  1. WordPressのインストール
  2. データベースのインポート
  3. 既存サイトの内容に置き換え

WordPressのインストール

  1. Local by Flywheel画面左下の「+」ボタンから、新規ローカルサイトの追加画面に進みます。
  2. 任意のサイト名称を設定します。Advanced Optionsではローカルドメイン、ファイル保存先などが変更できます。
  3. 環境設定を行います。「CUSTOM」を選ぶと詳細を選択可能です。既存サイトをインポートする場合は、そちらの設定に揃えましょう。
  4. WordPressの設定を行います。こちらは初期設定のままで問題ありません。
  5. PC本体のパスワードを求められるので入力、しばし待機します。

以上で、WordPressがインストールされ、下記のようにローカルサイトが作成されます。

「ADMIN」からはWordPressログイン画面に遷移し、「VIEW SITE」からはローカルサイトをブラウザで確認することができます。

データベースのインポート

※作業を行う前に、既存サイトのSQLデータを準備してください。
 なお、WordPressにBackWPupプラグインが入っていれば、ワンクリックでデータベースのバックアップSQLを取得できます。

Local by FlywheelにはデフォルトでAdminerというデータベース管理ツールが入っていますが、ノンスタではSequel Proを利用しています。
以下は、Sequel Proを用いた場合の手順となります。

  1. DATABASEタブの「SEQUEL PRO」を開きます。
    ※データベースにアクセスする前に、ローカルサイトを起動しておいてください。
  2. 左サイドバーの「テーブル」で既存のデータを全選択し、右クリック→複数テーブルの削除を行います。
  3. 「ファイル」→「インポート」で既存サイトのSQLデータを読み込みます。

既存サイトの内容に置き換え

ここまでで、WordPressのインストール、データベースのインポートは完了しました。
最後に、WordPressのファイルを既存サイトの内容に置き換えます。
FTPソフトで既存サイトのファイル一式をダウンロードし置き換える方法もありますが、ここでは、既存サイトがgit管理されている場合の手順をご紹介します。

なお、インストール直後のWordPressサイト内部構成は以下のとおりです。

WordPressのファイルは「public」フォルダ内に格納されているため、こちらを、Gitからクローンした既存サイトの内容に置き換えます。

  1. 既存サイトのリポジトリをgit cloneします。
  2. クローンした既存サイトのディレクトリ名を「public」に書き換えます。
  3. Local by Flywheelで作成したローカルサイト内部、app/public以下をいったん削除します。
  4. 先ほど「public」にリネームしたディレクトリをローカルサイトのapp/直下に移動します。
  5. 移動したpublicディレクトリを、既存のgitローカルリポジトリとして登録します。

以上の手順で、zipファイルが無い場合の既存サイトのローカル環境構築は完了です!

おわりに

Web制作において、WordPressを扱わない現場はあまり多くないことと思います。
特に、運用などで長く関わってゆくWordPressサイトがある場合、新規メンバーの環境構築が容易であることは、チーム全体のメリットになります。
Local by Flywheelには、インポート以外にも便利な機能が多く備わっているので、ぜひ試してみてくださいね。

記事カテゴリー