Local by Flywheelを使ったローカル環境構築と本番環境への移行方法【xserver編】

Local by Flywheelは初心者でも簡単にwordpressのローカル環境を構築できるツールです。インストール方法はたくさんの方が説明されていますので、他サイトをご参照ください。使い方と本番環境への移行方法をご紹介します。今回の環境はmac、サーバーはxserverを使ってご説明します。独自ドメインの取得、xserverの契約、ドメインの設定方法は省略します。

Local by Flywheelのダウンロードはこちらから

注意
作業をする際は必ずバックアップを取って慎重に行ってください。

 

Local by Flywheelの使い方

初期設定

Local by Flywheelのインストールが終了したら、左下の「+」ボタンをクリック。

初めての方は中央にも「CREATE A NEW SITE」ボタンが表示されますので、こちらのボタンでも大丈夫です。

 

 

次にサイト名を入力します。今回は「test」と入力しました。完了したら右下の「CONTINUE」をクリック。

 

 

次にサーバーの環境を入力します。

左の「Preferred」を選択した場合、PHP versionとMySQL versionは最新のもの、Web Serverは「nginx」となります。

注意
「Preferred」を選択した場合、後から設定の変更ができないようです。

sv2001.xserver.jp以降のサーバーの場合は「Preferred」でも問題ありませんが、念のため後から設定の変更ができるように「Custom」を選択します。

PHP versionとMySQL versionはxserverの最新情報をご確認ください。Web Serverはsv2001.xserver.jp以降であれば「nginx」を選択してください。

  • PHPバージョンの確認はこちらから
  • MySQLバージョンの確認はこちらから

 

 

次にwordpressのログイン情報を設定します。

本番環境で使用する情報を入力しておけば、後で変更する必要がありません。入力が完了したら右下の「ADD SITE」をクリック。

「Local by Flywheelが変更を加えようとしています。」と表示されますので、PCのパスワードを入力して「OK」をクリックしてください。

「Local Sites」というフォルダが作成され、その中の「サイト名」フォルダにwordpressのデータができています。また、「hosts」ファイルも書き換えられています。

これでローカル環境にwordpressデータが作成されました。

 

 

次はドメインの変更です。ドメインは初期設定で「サイト名.local」となります。こちらも本番環境と同様になるように変更します。「Site Domain」項目の「CHANGE」をクリック。

注意
すでにサイトをお持ちで引越しをお考えの方は、本番環境とは違うドメイン名を入力してください。hostsファイルが書き換えられますので、ドメイン名が同じだとあなたのPCからは強制的にローカルサイトが表示されてしまいます。ローカルサイトを構築後、本番環境にアップする直前にLocal by Flywheelのドメイン名を本番環境と同じものに変更してください。もしくは都度hostsファイルを修正してください。

今回は「test.com」と入力しましたので、URLはhttp://test.comとなります。wwwをつけたい方は「www.test.com」と入力してください。

 

 

ここまででいったんサイトを確認してみましょう。

右上の「VIEW SITE」をクリックしてください。

 

 

いかがですか?下の画像のようになっていれば成功です。

 

とても簡単ですね。

 

 

wordpressの管理画面

wordpressの管理画面に入るには、右上の「ADMIN」をクリックしてください。

 

上記「wordpressのログイン情報」で入力したユーザーネームもしくはメールアドレスと、パスワードを入力してください。

 

 

管理画面が英語表記になっていますので「Settings」→ 「General」 → 「Site Language」で日本語に設定してください。

あとはお好みでwordpressサイトを構築してください。

 

 

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

Local by Flywheelには「Live Link」という機能があります。ngrokを使ってローカルサイトを一時的に外部に公開することができる機能です。クライアントとの確認などに使うと便利ですね。

下部の「ENABLE」をクリックしてください。

Live Linkの横に緑色でURLが表示されます。URLをクリックするとサイトの閲覧が可能です。このURLをお知らせすることで、外部からも一時的にサイトを確認することができます。

 

公開を解除するには「DISABLE」をクリックしてください。

 

 


 

 

ローカルから本番環境への移行

注意
作業をする際は必ずバックアップを取って慎重に行ってください。

xserverにwordpressをインストール

今回ご紹介する方法は「wp-config.php」「.htaccess」「データベース」の書き換えが不要です。初心者の方でも簡単に本番環境に移行することができると思います。

 

 

まずxserverのサーバーパネルにログイン。設定対象ドメインを指定して、設定ボタンを押してください。
※ドメイン設定がまだの方は右側のドメイン設定より設定してください。

 

 

次に、「自動インストール」をクリック。ページが切り替わったら「プログラムのインストール」タブを表示させ、WordPress日本語版の「インストール設定」をクリック。

 

 

それぞれの項目にLocal by Flywheelで入力したものと同じ情報を入力してください。データベースは「自動でデータベースを生成する」を選択しインストールしてください。

 

 

確認画面に切り替わりますので、念入りにチェック。問題なければ「インストール(確定)」をクリック。

 

インストールが完了したらパスワードやデータベース名などの情報が表示されますので、メモなどで必ず控えを取ってください

 

注意
Local by Flywheelのドメイン名が本番環境とは違うダミーで設定されている方は、この時点で本番環境と同じになるように変更してください。

 

 

ローカルデータをサーバーにアップロード

次にcyderduckなどのFTPソフトで、ローカルのwordpressデータをxserverにアップロードします。FTPの設定は「FTPアカウント設定」をクリックし、「FTPソフト設定」にてご確認ください。

 

 

FTPソフトがサーバーに接続されたら対象ドメインの「public_html」フォルダ内を表示させておいてください。

 

次にLocal by Flywheelの管理画面へ行き上部の小さい矢印をクリック。

 

「Local Site」フォルダ内の「サイト名」フォルダが表示されたら、「app」 → 「public」へ移動し、「wp-config.php」以外のファイルを、FTPソフトでサーバーの「public_html」フォルダにアップロードしてください。全て上書き保存です。

 

 

ローカルのデータベースをエクスポート

アップロードが完了したらローカルサイトのsqlファイルをエクスポートします。

Local by Flywheelに戻り、「DATABASE」タブを表示させ、「ADMINER」をクリック。

 

 

Adminerの管理画面が表示されたら、左側の「Export」をクリック。

 

 

下記画像のように設定し、「Export」ボタンをクリック。

 

 

「local.sql」というファイルがダウンロードされます。次にこのファイルのファイル名を「MySQLデータベース名」と同じになるように変更します。

MySQLデータベース名が「test_wp1」ならば、ファイル名は「test_wp1.sql」です。データベース名はxserverにwordpressをインストールした際に設定されていますので、控えを参照するか、「MySQL設定」で確認してください。

 

 

xserverにデータベースをインポート

今度は上記で作成した「sqlファイル」をxserverにインポートします。

xserverのサーバーパネルから「phpmyadmin(MySQL5.7)」をクリックしてください。

 

 

左側にある対象のデータベース名をクリックし、右側の「インポートタブ」を表示してください。

次に「ファイルを選択」ボタンを押して上記で作成した「sqlファイル」を選択してください。下の画像は切れていますが、一番下に「実行」ボタンがありますので、ボタンを押して実行してください。

 

 

お疲れ様でした!これで設定は完了ですが、サイトを確認するためにはもうひと踏ん張り必要です。

 

hostsファイルの修正

Local by Flywheelが「hostsファイル」を変更していますので、このままではURLを入力してもあなたのPCからはローカルサイトが表示されてしまいます。したがってhostsファイルの修正が必要です。

hostsファイルは直接修正できませんので、いったんデスクトップなどにコピーしてください。コピーしたhostsファイルを開いて、下記画像の赤ワク内の該当するアドレスを削除してください。www無しと有りの2行あるはずです。

hostsファイルの修正が完了したら、元あった場所に戻して上書き保存してください。

hostsファイルの場所

Windowsの場合

C:\Windows\System32\drivers\etc\hosts

Macの場合

/private/etc/hosts

 

※OSのバージョンにより異なる場合があるかもしれません。

 

これでWEBサイトの確認ができます。

注意
Local by Flywheelに何かしらの変更を加えたらhostsファイルが変更されます。ローカルサイトが必要のない方はLocal by Flywheelのサイト名を右クリックして削除してください。念のためローカルサイトを取っておきたい方は、ドメイン名を変更しておいた方がいいかもしれません。

 

 

3 Comments

oji-chan

はじめまして。独学でWEBを勉強しているものです。

非常に分かりやすく、すごく助かりました。ありがとうございました。
初歩的なことかもしれないので申し訳ないのですが、ひとつ質問させてください。

本番環境のwpをドメイン直下ではなく/wpにインストールした場合、どうしても上手くいきません。どのような手順で行えばよいのでしょうか?

お手数ですが、ご教示いただけますとうれしいです。よろしくお願いいたします。

返信する
bond

oji-chanさん

コメントありがとうございます。
お返事が遅くなりまして申し訳ありません。
一旦wordpressをアンインストールして、再度ドメイン直下にインストールするか
もしくは
「みみみんメモ」さんという方がブログで「/wp」にインストールした場合のやり方を解説されていますので一度お試しください。
http://mimimin.net/wordpress-3/

返信する
oji-chan

お返事ありがとうございます。
ドメイン直下にはbondさまのこのページを見ながら上手くできたのですが、どうしても/wpにインストールしたかったのです。
教えていただきありがとうございます。トライしてみます。

余談ですが熊本なのですね。
私も以前、渡鹿に8年ほど住んでいてbondさまの前の道もよく通ったなぁと、親近感が湧いてしまいました。応援しています!

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です