その他

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

どうも!じゃぶじゃぶ(@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のフォルダを「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のインストール

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

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)」をクリックしてください。

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

まとめ

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

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

よく読まれている記事

1

どうも、じゃぶじゃぶ(@jbjbgame)です。 いやぁ、また相変わらずマニアックなネタの記事を書いてしまいました。(;^_^)ゞ 現在、マイペースながらも継続してApexを遊んでいますが、今まで逃げ ...

2

どうも、じゃぶじゃぶ(@jbjbgame)です。 DLC第4弾で追加された「古代狩り」でリスポーンする古代のモブは、ルーン文字の組み合わせによって出現するモブが異なる仕様になっています。 今回は、古代 ...

3

どうも、じゃぶじゃぶ(@jbjbgame)です。 Diablo Immortal(ディアブロ イモータル)のリリースが間近にひかえ、PC版のダウンロードが5月27日(金)に開始されました! 今回は自分 ...

4

どうも、じゃぶじゃぶ(@jbjbgame)です。 Apexのシーズン13が2022年5月11(水)の午前2時より開始されました。今シーズンは新レジェントが追加されたりゲームの仕様が大きく変わるなど、か ...

5

どうも、じゃぶじゃぶ(@jbjbgame)です。 Diablo Immortal(ディアブロ イモータル)のレジェンダリー宝石は自キャラクターを強化するのに便利な必須アイテムです。 【ディアブロ イモ ...

-その他

error: Content is protected !!