WordPress

【Local by Flywheel】WordPressの既存サイトをローカル環境で再現

【Local】wordpressの既存サイトをローカル環境へ
初心者さん
WordPressの運用し始めたけど、プラグインを本番に入れる前にローカル環境で試したい。バージョンアップする前にローカルでテストしてから本番に反映させたい。

このような疑問をお持ちの方に向けて書いています。

Localというdevelopment toolを使って、簡単にローカル環境を構築できます。

ただし既存サイトをローカルで再現させるため移行するときは、ちょっとはまりポイントがあるので注意点を紹介していきます。

▼この記事では、Localに既存サイトを再現する点で以下について理解できるようになります。

  1. 既存のWordPressをローカルに移行する手順
  2. 移行する時の注意点

ローカル環境で使えるtoolはいくつかありますが、その中でも「Local by Flywheel」は簡単です。

既存サイトを移行するのも簡単ですが、非エンジニアの方には敷居が高いかもしれません。ローカル環境なので壊してもやり直せます。挑戦してみてください。

この記事の信頼度

くろめがね
・エンジニア歴10年以上
・IT企業転職歴も3回以上
・プログラミングスクール運営側の経験あり
・単価約100万のフリーランスエンジニア

WordPressのローカル環境「Local by Flywheel」とは

Localとは

WordPressのローカル環境に使われる「Local by Flywheel」がどのようなツールなのかを紹介していきます。

Local by Flywheelとは

WordPressのローカル開発環境で簡単に構築できるため人気があります。Local公式サイトです。

Local by Flywheelという名称から「Local」に変更になったという内容の記事を見たので、この後はLocalで書いていきます。

Localの特徴

他にもいろんな機能がありますが、以下のような特徴があります。

  • WordPressの自動インストール
  • Mysql、PHP、Webサーバーまで自動設定
  • バックアップに最適

WordPressの開発環境でLocalがおすすめな理由は?

WordPressのローカル開発環境に関しては、MacではMAMP、WindowsではXAMPやDockerなどの選択肢がありました。

MAMPは、Mac、Apache、MySQL、PHPといったパッケージされているソフトの頭文字を取って構築された環境です。XAMPPも似たような感じです。

Dockerも含めて、WordPressの環境というよりは、PHPだったり他の開発に用いられる環境でも使われるため設定が少し複雑です。

そのためWordPressだけという場合であれば、Localが簡単に構築できるため人気があります。

Localのダウンロードからインストール

Localのインストールを紹介していきます。

Localのダウンロード

Localのダウンロード

Local公式サイトのダウンロードボタンをクリックしてダウンロードしていきます。自分のマシンに合わせて選択し進んでください。

僕の環境はMacなので、Windowsの方は少し異なると思いますが、後半の既存サイトの再現部分はほぼ同じだと思います。

Localのインストール

「CREATE A FREE ACCOUNT」をクリックして、Localのアカウントを作成していきます。

サイト名

ローカルなので、何でもいいですがサイト名を入れていきます。「テスト」とかでもいいですが、Localは複数のWordPressを構築できるので、わかる名前を付けましょう。

バージョンをセット

既存のWordPressの環境に合わせてバージョンを設定しましょう。

xserverの場合

僕はXserver使っているので、この赤枠の部分を見るとそれぞれのバージョンがわかります。

ユーザーアカウント

ユーザー名・パスワードを入力して「ADD SITE」をクリック。

インストール完了

インストールが始まるので、このまま待っていると完了します。新規でWordPressを構築していく方はここからカスタマイズしていくと良いです。

既存のWordPressサイトを移行する

すでにWordPressを運用している方はここから既存のデータを入れていきます。

本番のソースコードをローカルに持ってくる

最近のサーバーはボタン一つでWordPressをインストールしてくれるので、ソースコードをローカルにダウンロードしたことがないという人もいるかと思います。

FTPなどでサーバーからコードをローカルにコピーしてください。

local管理画面

サイト名「usconsort」の下の部分にある部分をクリックすると、ソースコードがあるディレクトリに移動できます。

その中に「app」 -> 「public」 -> 「wp-content」を既存のサイトのコードを上書きします。

本番のデータベースをローカルにコピー

データベース移行

次にDATABASEのタブをクリックし、「OPEN ADMINER」という部分をクリックするとLocalで作成されたデータベースが開きます。

データーベースを作成

Lacalのデータベースの画面で新規でデータベースを作成してもいいし、最初から作成されているlocalという名前のデータベースのテーブルを削除してもかまいません。

注意点として「照合順序」を既存のデータベースに合わせることです。間違っているとインポートに失敗したりします。

エクスポート

次に既存のデータベースからデータをエクスポートします。サーバーによって違うと思いますが、XserverはphpMyAdminがインストールされているので、その画面からエクスポートできます。

データをインポート

先程、テーブルを消したLocalのデータベースにインポートすると完了です。。。が、既存のWordPressのデータが大きいとインポートに失敗してしまいます。

データが大きくてインポートに失敗する場合

TablePlus

僕はMacなので、TablePlusというツールを使いデータをインポートしました。

このツールは、数十万件のデータもスムーズに入ります。(無料の場合は利用制限がありますが、使いやすい)

データベース接続情報を書き換える

WordPressのコードのpublicの下にwp-config.phpというファイルにデータベースの接続情報が書かれているので、そちらに今回作ったDB_NAME、DB_USER、DB_PASSWORD、DB_HOSTあたりを設定した内容に書き換えていきます。

テーブルのデータを書き換える

local

Localに移行したテーブルに「wp_options」というテーブルがあります。

こちらをローカル用に書き換えていきます。ここを書き換えておかないと、ダッシュボードからPreviewした時など本番のサイトが開いてしまうということになります(たしか)

注意点は、本番のデータをローカルにコピーしたのでダッシュボードに入る時のログイン情報が本番と同じになります。

おまけの情報

本番から画像ファイルなども持ってきているのですが、記事上の画像の表示などで「https://本番パス/images/○○○.jpg」みたいになっていると本番の画像を読み込んで表示していることになります。

全部ローカルに移行した画像を表示させたいという時は、データベースの中の本番のパスを全部書き換える必要があります。

SQLを実行

ブログの投稿記事などはwp_postsテーブルのpost_contentカラムに入っているので、その中で使われている[本番url]を[ローカルurl]に置換するSQLが以下になります。

WHERE以降を消して実行すると、一括(条件なしで全レコード)で実行されます。(実行は自己責任で)

// ちなみにSQLは書いてみただけで、実際に実行していないのでご理解ください。
UPDATE wp_posts SET post_content=REPLACE(post_content, "[本番url]", "[ローカルurl]") WHERE id=[id];

Local by Flywheelまとめ

すでに運用しているWordPressをローカル環境にコピーする方法でした。

最初に「Local」でWordPressを構築してから本番に上げるのが正しい手順ですが、WordPressはサーバー上でインストールしてそのままブラウザ上で記事を書くという人が多いので、手順が逆になりやすいですね。

参考になると幸いです。

-WordPress