WordPressの本番環境をコピーしてローカルPC上にテスト環境を構築してみた

2022年12月16日

どうも！じゃぶじゃぶ（@jbjbgame）です。

前回はWordPressのテスト環境を初期設定から行いました。

: 参考WordPressのテスト環境をローカルPC上に構築する(初期設定から構築)

どうも！じゃぶじゃぶ（@jbjbgame）です。 WordPressの勉強を兼ねて、いろいろ自分のパソコン上でいじるためにテスト環境を構築してみました。環境構築するにあたって、ゼロの状態から初期設定 ...

続きを見る

今回は、既に持っているWordPressの本番環境をコピーして、ローカルPC上に検証環境を構築していきたいと思います。

本来ならテスト環境を先に構築して、ある程度準備ができた本番環境に移行する、という流れがあるべき姿ですが、自分の場合は最初にいきなり本番環境を構築して運営していたので、手順が逆になっています💦。

需要があるか分かりませんが、今回は本番環境を既に持っている状態で、そこからテスト環境を作る手順をご紹介します。

本番環境からデータとソースのバックアップを取得する

まずは、本番環境にアクセスしてデータベースからデータをバックアップし、さらにWordPressのHTMLやCSS、PHPのプログラムが入っているフォルダを丸ごとローカルPCにコピーするところから始めます。

※ローカル環境はXAMPPを利用して構築しています。

データベースからバックアップを取る

XServerの場合

XServerのMySQLからデータをダウンロードする際の手順をです。

[blogcard url="https://www.xserver.ne.jp/manual/man_db_man_backup.php"]

①

XServerのサーバパネルにログインする

②

「MySQLバックアップ」をクリック

③

現在のMySQLをダウンロード」をクリック

④

データベースの中からバックアップを行いたいデータベースの圧縮形式を選択（圧縮しない or gz形式）
⑤

ダウンロード実行」ボタンをクリック

上記の手順意外にも、XServerはPHPMyAdminが使えるので、そこからデータのバックアップを取ることも可能です。

[blogcard url="https://www.xserver.ne.jp/manual/man_db_myadmin.php"]

直接DBにアクセスできる場合

直接DBサーバにアクセスできる場合は、「mysqldump」コマンドを利用してバックアップを取ることができます。

コマンドは以下の通りです。

-- 構文
mysqldump -u[ユーザ名] -p[パスワード] -h[ホスト] [オプション] [データベース名] {[テーブル1],[テーブル2],・・・} > [保存先のパス]

-- 実行例
mysqldump -uUser01 -pPassword01 -hlocalhost sampleDB sampleTable1,sampleTable2 > /tmp/sampleDB.sql

バックアップを取ることでSQLファイル(.sql)が取得できます。

本番環境のWordPressをコピー

本番環境のWorPressをコピーするには「WinSCP」というアプリケーションを使用します。

WinSCPは下記サイトからダウロードできます。

https://ja.osdn.net/projects/winscp/

上図のように接続設定を入力して「ログイン」ボタンをクリックすることで、本番環境にアクセスできます。

転送プロトコル(F)：SCP
ホスト名(H)：本番環境のホスト名、またはIPアドレス
ポート番号(R)：本番環境のポート番号
ユーザ名(U)：本番環境のログインユーザ名
パスワード(P)：本番環境のパスワード

鍵認証する際は「設定(D)」からサイドメニューの「SSH > 認証」と進んで秘密鍵の設定をしてください。

「エージェントの転送を許可する(F)」にチェックを入れ、「秘密鍵(K)」に秘密鍵のパスを指定します。

アクセスすると上図のようになり、左側にローカル環境、右側に本番環境のフォルダが表示されます。

本番環境のWordPressフォルダとMySQLからバックアップしたSQLファイルをローカル環境の所定の場所にコピーしてください。

コピーからWordPressのテスト環境を構築する

WordPressの配置

まずは、WordPressの公式サイトから初期状態のWordPressをダウンロードしてきてください。

以前の記事の一部に手順を書いているので参考にしてみてください。

: WordPressのテスト環境をローカルPC上に構築する(初期設定から構築)

どうも！じゃぶじゃぶ（@jbjbgame）です。 WordPressの勉強を兼ねて、いろいろ自分のパソコン上でいじるためにテスト環境を構築してみました。環境構築するにあたって、ゼロの状態から初期設定 ...

解凍したWordPressのフォルダを「C:\app\xampp\htdocs」に移動します。

※.人により配置する場所は異なるります。XAMPPをダウンロードしたフォルダの配下にある「htdosc」フォルダに移動してください。

さらに「C:\app\xampp\htdocs\wordpress」に対して、本番環境のフォルダやファイルに置き換えてください。置き換える対象フォルダ・ファイルは以下の通りです。

「wp-admin」フォルダ
「wp-includes」フォルダ
「wp-content\plugins」フォルダ
「wp-content\themes」フォルダ
「wp-content\uploads」フォルダ
「.htaccess」ファイル
「wp-config.php」ファイル

データベースにユーザの追加

ローカル上のMySQLにも本番環境と同様のユーザを作成しておく必要があります。

上段のメニューから「ユーザアカウント」をクリックしてください。

「ユーザアカウントを追加する」のリンクをクリックしてください。

ログインユーザ名とパスワードを入力し、ホスト名には「%」と入力してください。

下段にある「すべてチェックする」にチェックを入れて、「実行」ボタンをクリックしてください。

データのインポート

再度、phpMyAdminを立ち上げてください。本番環境と同じ名前のデータベースを作成します。

データベース名に本番のWordPressで使用しているデータベース名を記入して、「utf8_general_ci」を選択してから「作成」ボタンをクリックしてください。

続いてバックアップデータのインポートにはいります。

ヘッダメニューから「インポート」をクリックしてください。

「ファイルを選択」のボタンをクリックして、前の手順でバックアップしたSQLファイルを選択してください。

ファイルが正常に選択されると「ファイルを選択」ボタンの右側にファイル名が表示されます。

さらに、ファイルの文字セットに「utf-8」を選択してください。

最後に、「実行」ボタンをクリックすることでインポートが開始されます。

「Incorrect format parameter」エラーが出た時の解決方法

インポート時に「Incorrect format parameter」のエラー画面が表示された場合は、現在設定しているアップロード容量の上限を超えたファイルをインポートしたことが原因です。

アップロード上限を変更する必要がるので、下記サイトを参考に設定を変更してください。

[blogcard url="https://notepad-blog.com/content/224/"]

「スクリプトがタイムアウトしました。インポートを完了させたいのであれば同じファイルを再送信すればインポートが再開されます」が表示された時の解決方法

インポート処理の途中で「スクリプトがタイムアウトしました。インポートを完了させたいのであれば同じファイルを再送信すればインポートが再開されます」というメッセージが画面日表示された際は、タイムアプトの設定が処理時間を超えたことで発生します。

こちらも、下記サイトを参考に設定を変更してみてください。

[blogcard url="https://notepad-blog.com/content/225/"]

テスト環境のドメイン名を変更する

本番環境のURL（ドメイン）は「jbjbgame.com」なので、同じドメイン名でローカル環境を作成しても本番環境に参照できなくなるので、別名のドメインに変更する必要があります。

今回構築するテスト環境のドメインは「test.jbjbgame.com」とします。

環境がまだできていないのでWordPressの管理画面からドメイン名を変更することができません。そのためMySQLにアクセスして直接ドメイン名を変更します。

書き換える対象のテーブルは以下の通りです。

wp_posts
wp_options
wp_postmeta
wp_termmeta
wp_usermeta
wp_cocoon_speech_balloons（テーマ「cocoon」を使用している場合のみ）

※．環境によって接頭辞の「wp_」は異なりますので、ご自分の設定をしっかり確認してください。

ドメイン名の置換にはSQLのUPDATE文を使って一括アップデートをします。UPDATE文のサンプルは以下の通りです。

UPDATE [テーブル名] SET [カラム名] = REPLACE([カラム名], '旧ドメイン', '新ドメイン');

phpMyAdminのサイドメニューからWordPressのテーブルを選択したから、その後ヘッダメニューの「SQL」をクリックしてください。

SQLのサンプルは以下のです。

UPDATE wp_posts SET guid = REPLACE(guid, 'jbjbgame.com', 'test.jbjbgame.com');
UPDATE wp_posts SET post_content = REPLACE(post_content, 'jbjbgame.com', 'test.jbjbgame.com');
UPDATE wp_posts SET post_title = REPLACE(post_title, 'jbjbgame.com', 'test.jbjbgame.com');
UPDATE wp_options SET option_value = REPLACE(option_value, 'jbjbgame.com', 'test.jbjbgame.com');
UPDATE wp_postmeta SET meta_value = REPLACE(meta_value, 'jbjbgame.com', 'test.jbjbgame.com');
UPDATE wp_termmeta SET meta_value = REPLACE(meta_value, 'jbjbgame.com', 'test.jbjbgame.com');
UPDATE wp_usermeta SET meta_value = REPLACE(meta_value, 'jbjbgame.com', 'test.jbjbgame.com');
UPDATE wp_cocoon_speech_balloons SET icon = REPLACE(icon, 'jbjbgame.com', 'test.jbjbgame.com');

テキストエリアにUPDATE文を入力し、「実行」ボタンをクリックすることでドメイン名が洗い替えられます。

.htaccessを書き換える

「.htaccess」ファイルの中身を確認してください。

旧ドメイン名が記載されている場合は、全て新ドメイン名に書き換えて保存してください。

Apache（XAMPP）のvhostsを追加

「C:\xampp\apache\conf\extra\httpd-vhosts.conf」の末尾に設定を追記。

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    ServerName "test.jbjbgame.com"
    ServerAlias "www.test.jbjbgame.com"
    DocumentRoot "C:/xampp/htdocs/wordpress"
    <Directory C:/xampp/htdocs/wordpress>
        Options FollowSymLinks
        AllowOverride all
        Require all granted
    </Directory>
    LogLevel warn
    ErrorLog "logs/web_error.log"
    CustomLog "logs/web_access.log" common
</VirtualHost>

hostsの追加

「C:\Windows\System32\drivers\etc\hosts」でホスト名を追加します。

hostsの末尾に以下を追加してください。

127.0.0.1       test.jbjbgame.com

hostsに書き込み権限がない場合

まず「hosts」ファイルを別名に変更してバックアップを作成してください。（ここではhosts_bk）としました。

次に「hosts_bk」をデスクトップにコピーします。

デスクトップにコピーした「hosts_bk」を「hosts」にファイル名を変更して、テキストエディアで開きます。（デスクトップにコピーしたhostsファイルは変更可能になっています。）

上記のようにホスト名を追記してください。

内容を変更した「hosts」ファイルをテスクトップから「C:\Windows\System32\drivers\etc\hosts」へ移動します。

これで権限が無くても、変更可能なhostsファイルができます。

Windowsのローカル環境にSSLを設定する（https）

本番環境のWordPressがhttpなら上記までの設定で問題ありませんが、SSLサーバ証明書を利用したhttps環境なら以降の設定が必要になります。

php.iniの変更

「C:\xampp\php\php.ini」で以下を追記。

OpenSSLのモジュールが有効になっていない場合は有効にします。

;extension=php_openssl.dll
extension=php_openssl.dll

httpd-ssl.confの変更

「C:\xampp\apache\conf\extra\httpd-ssl.conf」の末尾に設定を追記。

<VirtualHost *:443>
    ServerName "test.jbjbgame.com"
    ServerAlias "www.test.jbjbgame.com"
    DocumentRoot "C:/xampp/htdocs/wordpress"
    <Directory C:/xampp/htdocs/wordpress>
        Options FollowSymLinks
        AllowOverride all
        Require all granted
    </Directory>
    LogLevel warn
    ErrorLog "logs/web_ssl_error.log"
    CustomLog "logs/web_ssl_access.log" common
    SSLEngine on
    SSLCertificateFile "C:/xampp/apache/conf/ssl.crt/my-server.crt"
    SSLCertificateKeyFile "C:/xampp/apache/conf/ssl.key/my-server.key"
</VirtualHost>

openssl.cnfの変更

まず「C:\xampp\apache\conf\openssl.cnf」をコピーして「openssl-san.cnf」を作成します。

続いて「openssl-san.cnf」の内容を変更します。末尾に以下を追加してください。

[ SAN ]
subjectAltName = @alt_names
 
[ alt_names ]
DNS.1 = localhost
DNS.2 = test.jbjbgame.com

SSLサーバ証明書の作成

SSLサーバ証明書を作成するためには、OpenSSLコマンドを使うと楽です。

OpenSSLを使うにはGit Bashを利用するので、まずはGitをインストールします。

Gitのインストール

下記の記事を参考にインストールをしてみてください。

: Windows版のGitをローカル環境にインストールする（Git for Windows）

OpenSSLコマンドを実行して、サーバ証明書を作成

Windowsのスタートメニューから「Git＞Git Bash」を選択して、Git Bashを立ち上げてください。

下記コマンドを実行してください。

# 「C:\xampp\apache\conf」へ移動
$ cd /c/xampp/apache/conf

# SSLサーバ証明書の作成
openssl req \
    -newkey     rsa:4096 \
    -keyout     my-server.key \
    -x509 \
    -nodes \
    -out        my-server.crt \
    -subj       "//CN=test.jbjbgame.com" \
    -reqexts    SAN \
    -extensions SAN \
    -config     openssl-san.cnf \
    -days       3650

コマンドが成功すると「my-server.crt」と「my-server.key」の2ファイルが生成されます。

作成された2ファイルを所定のフォルダに移動させます。

「my-server.crt」は「C:\xampp\apache\conf\ssl.crt」に移動させてください。

「my-server.key」は「C:\xampp\apache\conf\ssl.key」に移動させてください。

証明書の認証

「C:\xampp\apache\conf\ssl.crt\my-server.crt」をダブルクリックしてください。

「証明書のインストール(I)」をクリックしてください。

「現在のユーザ(C)」にチェックを入れて、「次へ(N)」をクリックしてください。

「証明書をすべて次のストアに配置する(P)」にチェックを入れて、「信頼されたルート証明機関」を選択し、「次へ(N)」をクリックしてください。

「完了」をクリックしてください。

ローカル環境で SSL を有効にする（for XAMPP） - Laravel学習帳

laraweb.net

XAMPPのバーチャルドメインをSSL化する方法

準備ドメイン XAMPPで「https://woocommerce2.com」を表示可能にすることが目標です。環境 Windows 10 XAMPP 7.3.10 バーチャルドメインとXAMPPの

it.qomolangma.jp

まとめ

お疲れ様でした。なんとかテスト環境のWordPressが構築できました。

これで、やっとローカル上の検証環境を使って、WordPressをいじり倒すことができそうです！！

よく読まれている記事

1: 【Lies of P】三位一体の鍵と聖域への行き方、イベント「謎かけの王」攻略（ライズオブピー）

どうも、じゃぶじゃぶ（@jbjbgame）です。 Lies of P（ライズオブピー）で三位一体の聖域へ行くための、謎かけの王イベント詳細についてまとめました。記事の内容三位一体の鍵の入手方法三 ...

2: 【Lies of P】クオーツの入手方法一覧、P機関の強化素材（ライズオブピー）

どうも、じゃぶじゃぶ（@jbjbgame）です。 Lies of P（ライズオブピー）でP機関の強化に必要な素材「クオーツ」の入手方法・場所についてまとめたのでご紹介します。記事の内容クオーツの使 ...

3: 【Lies of P】強化素材「闇の盟約の月長石」の入手方法一覧（ライズオブピー）

どうも、じゃぶじゃぶ（@jbjbgame）です。 Lies of P（ライズオブピー）で特殊武器の強化に必要な素材「闇の盟約の月長石」の入手方法・場所についてまとめたのでご紹介します。記事の内容闇 ...

4: 【Lies of P】回復アイテム（パルス電池）の使用回数の増やし方材（ライズオブピー）

どうも、じゃぶじゃぶ（@jbjbgame）です。 Lies of P（ライズオブピー）で回復アイテムのパルス電池の最大所持数の増やし方についてご紹介します。記事の内容回復アイテムの最大使用回数の増 ...

5: 【アーマードコア6】チャプター4「アイビス」らくらく攻略（AC6）

どうも、じゃぶじゃぶ（@jbjbgame）です。アーマードコア6で序盤のチャプター4のボス「アイビス」のらくらく攻略方法についてまとめたのでご紹介します。記事の内容チャプター4のボス「アイビス」 ...

-その他

その他

2023/5/7

【初心者でも簡単】ドスパラ「GALLERIA XF（ガレリアXF）」のメモリ増設の方法

どうも！じゃぶじゃぶ（@jbjbgame）です。デスクトップPCのGALLERIA XF(ガレリア XF)にメモリ増設をしたのでその時にやった手順をご紹介します。新バージョンが出たことでガレリアXFはすでに販売が終了してますが、メモリ増設の手順は他のデスクトップＰＣでも流用きくと思います。じゃぶじゃぶディアブロ4のβテストで16GBだど頻繫にメモリオーバーでエラーになったので、思い切って32GBに増設します。念のため自分のPCのスペックを書いておきます。構成パーツ標準スペック自分がカスタマ ...

その他

2022/12/31

Battle.netで「Required application data could not be found. Please check....」のエラーが出た時の対処法

どうも、じゃぶじゃぶ（@jbjbgame）です。久々にBattle.netアプリを起ち上げたら以下のようなエラーが出て起動できなくなりました。 Required application data could not be found.Please check your application directory and try again. [日本語訳] 必要なアプリケーションデータが見つかりませんでした。アプリケーションディレクトリを確認して、もう一度お試しください。解決方法を調べて自分で対処 ...

その他

2022/12/16

【AFFINGER6 EX】無限スクロールの設定方法

どうも、じゃぶじゃぶ（@jbjbgame）です。 AFFINGER6のEX版ではページの遷移をせずに、記事一覧の記事リンクを非同期で読込み、表示件数を無制限に増やせる「無限スクロール」が利用可能になります。今回はブログに「無限スクロール」を設定する方法についてご紹介します。 ※AFFINGER6通常版ではこの機能は利用できません。EX版の機能になりますのでご注意ください。記事一覧を無限スクロールにする無限スクロールとは上図のように「もっと読む」をクリックすることで、画面のリロードをはさまず、リアルタ ...

その他

2022/12/16

【AFFINGER6 EX】記事一覧をカード型のデザインに変更する方法

どうも、じゃぶじゃぶ（@jbjbgame）です。AFFINGER6のEX版にアップグレードしました！！今回はEX版の追加機能補のガード型デザインの記事一覧の設定方法についてご紹介します。 ※AFFINGER6通常版ではこの機能は利用できません。EX版の機能になりますのでご注意ください。ガード型デザインに変更するガード型デザインに変更できるの箇所は決まっており、以下の範囲で変更が可能です。ガード型デザイン適応範囲トップページのタブ式カテゴリー一覧新着記事一覧カテゴリーの記事一覧投稿ページ下の ...

その他

2022/12/16

【AFFINGER6 EX】アイキャッチ画像をYoutube動画に変更・設定する方法

どうも、じゃぶじゃぶ（@jbjbgame）です。最近AFFINGER6のEX版にアップグレードし、追加機能を使っていろいろと検証をしている日々です。今回はEX版の追加機能補一つである、アイキャッチ画像をYoutube動画へ変更する方法にいてご紹介します。 ※AFFINGER6通常版ではこの機能は利用できません。EX版の機能になりますのでご注意ください。アイキャッチをYoutube動画に変更する Youtubeの動画IDを取得まずはアイキャッチにしたYoutube動画にアクセスしてください。今回は ...

【ポケモンユナイト】「ケーシィを24回KO」を効率的にクリアする（ケーシィの特徴と出現場所）

【WordPress】管理画面で「このサイトで重大なエラーが発生しました。」が出てログインできない時の対処法

WordPressの本番環境をコピーしてローカルPC上にテスト環境を構築してみた

参考WordPressのテスト環境をローカルPC上に構築する(初期設定から構築)

本番環境からデータとソースのバックアップを取得する

データベースからバックアップを取る

XServerの場合

直接DBにアクセスできる場合

本番環境のWordPressをコピー

コピーからWordPressのテスト環境を構築する

WordPressの配置

データベースにユーザの追加

データのインポート

「Incorrect format parameter」エラーが出た時の解決方法

「スクリプトがタイムアウトしました。インポートを完了させたいのであれば同じファイルを再送信すればインポートが再開されます」が表示された時の解決方法

テスト環境のドメイン名を変更する

.htaccessを書き換える

Apache（XAMPP）のvhostsを追加

hostsの追加

hostsに書き込み権限がない場合

Windowsのローカル環境にSSLを設定する（https）

php.iniの変更

httpd-ssl.confの変更

openssl.cnfの変更

SSLサーバ証明書の作成

Gitのインストール

OpenSSLコマンドを実行して、サーバ証明書を作成

証明書の認証

まとめ