CG・映像デザイナー技術ブログ

【WordPress】ローカルにサイトを複製してテスト環境を構築する方法

いままで運用中の状態でサイトのカスタマイズをしていたのですが、しくじってえらい目にあったので
テスト環境(ステージング環境)をローカルに作成することにしました。その備忘録です。

この記事の著者
CGブロガー すいみん

CGブロガー

すいみん

Suimin

プロフィール

某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。 書籍:Unity デザイナーズ・バイブル
プロフィール詳細はこちら

現在公開しているWordPressサイトのバックアップを取る

バックアップを取るのは大事です!FTPのデータとDBのデータさえ取っておけば、理論上は復元可能です!

手動でWordPressのバックアップを取る

  1. FTPに接続

  2. 「public_html」以下のデータをダウンロード。
     以上で画像やスクリプト、プラグインのデータのバックアップが完了です。

  3. 続いてDB。契約しているサーバーから「データベース(phpMyAdmin)」にアクセス

  4. エクスポートから実行ボタンを押せば「localhost.sql」というようなDBのデータが出力できます。

以上です!

ただ毎回手動でやるのは面倒なので、「BackWPup」というプラグインで定期的にバックアップを取ることができます。

参考 WordPressでバックアップを取る4つの方法サルワカ

ローカルのWordPressを作成して既存サイトをコピーする方法

「LocalbyFlywheel(ローカルバイフライホイール)」というソフトを導入します。
参考 WordPressでバックアップを取る4つの方法サルワカ

  1. 公式サイトからソフトをダウンロード&インストール
      参考 LocalbyFlywheelLocalbyFlywheel  特に難しい設定はないので、そのまま案内に従って導入します。
    LocalbyFlywheel

  2. ハンバーガーメニュー>import site から先にダウンロードした「public_html」をZIPで固めた物を選択します。
    もしエラーで失敗した場合は「Create」ボタンを押して新規サイトを作成しましょう。
    今回は「TEST」という名前でサイトを作成しました。

  3. サイトを作成したら、サイト名の下のURLをクリックするとデータの格納場所が表示されます。

     \Local Sites\test\app\public以下に「public_html」のデータを突っ込んで上書きしましょう。

  4. 続いてDBもインポートします。DATABASEのタブに移り、「OPEN ADMINER」ボタンを押すとMySQLが開くます。

    ※HOST,Port,Database Name,Username,Paswaordは控えておきましょう。あとで使います。

  5. DBのプルダウンを空白にして、データベースを作成を押します。
    「test」照合順序(utf8mb4_general_ci)という名前にして保存。
     以上で新しいデータベースを作成が完了です。

  6. インポートから「localhost.sql」をまたはSQLを圧縮した「localhost.gz」をファイル選択して実行します。

    以上でデータベースのインポートは完了です。

  7. データベース名の入力をします。「wp-config.php」をテキストエディタで開きます。
    \Local Sites\test\app\public\wp-config.php
    先に控えたデータ名を入力してします。

    ※ここで重要なのがhostnameです、「localhost」という名前にすると表示が激おそになるので、’128.0.0.1’のようにIPアドレスを適当に振っておきましょう。

  1. 最後にデータベースのURLのパスの置換をします。
    DBがシリアライズされている関係でただの文字置換で済まないので、専用のソフト「Search-Replace-DB-master」を使います。
    公式サイトから規約に同意して登録したメールアドレスからソフト(Search-Replace-DB-4.1.1)をダウンロードしておきましょう。

  2. 「Search-Replace-DB-master」を解凍して「Search-Replace-DB-master」というフォルダ名に。publicの中に格納します。

  3. 下記のURLを開き、データを記載して文字置換をします。
    http://test.local/Search-Replace-DB-master
    ・置換したいURLの入力 置換元と置換先のURLの入力
    ・「Test Connection」ボタンを押してデータの自動取得 ※wp-config.phpのポート番号入力が間違っていると「The script encountered an error while running an AJAX request.」というエラーがでます。

  4. 入力が完了後、「Serch and Reolace」ボタンが点灯したら押して文字置換を実行しましょう!

以上で、ローカルに自分のサイトのコピーが作成されました!

「ADMIN」から管理メニュー、「VIEW SITE」からローカルサイトにアクセスできます。
※管理メニューにログイン出来ない場合はプラグインが邪魔している可能性が高いので、消しておきましょう。次項目で解説します。

ローカルのWordPress作成後にする事およびよくある失敗

まず、設定しておいたほうが良い点です。

  1. 不必要なプラグインの削除
    「conoha-wing-plugin」「siteguard」などログインに邪魔なものは消すか停止させましょう。

  2. 本番環境と間違えないようにユーザー>プロフィール>編集から「管理画面の配色」を変更しておきましょう。

つぎによくある失敗の対処方法です。

パスワードを忘れた時

  1. サイト名を右クリックして「Open Site SSL」
  2. コマンド「wp user list」
  3. コマンド「wp user update USER_EMAIL –user_pass=NEW_PASSWORD」
wp user update namae --user_pass=hogehoge

以上でパスワードの書き換えができます。

外部リンク  参考 Local by flywheelでwordpress管理画面のログインパスワードを忘れたときの対処方法WEBらんたん

クローンしてサイトが表示されない時

タスクマネージャーで起動してるサーバーの数を確認しましょう。
削除しても起動が残ってたりするので、整理すれば元に戻ります。

ローカルにサイトを複製してテスト環境を構築する方法まとめ

ローカルにテスト環境を構築することで

  • CSSのカスタマイズのテストができる
  • プラグインやスクリプトのなどのテストができる

他、さらにサイトの複製も簡単なので

  • データベースを使った実験ができる

などトラブルを想定した練習も可能になります。

サイトのトラブルが起きた時に誰かにお願いするとその待っている間に損失がでてしまうので、なるべく多くの解決手段を身につけるためにもテスト環境の構築は必須です。

興味のあるかたは是非試してみてください。

以上、すいみん(@cg_method)でした!