テスト環境がなぜ必要？

一般的には、本番サイトと同様のサイトを複製し、動作確認、変更や改修によるテストのためのサイトをテスト環境と言います。（他の言い方もありますが、ここではテスト環境で統一します。）

稼働中のサイトの場合、エラーがあった際、サイト全体に影響があることもあり、直接本番環境を更新するのはリスクが高いです。
まずは、本番サイトを複製した環境（テスト環境）でテストを行ってから、本番に適用することでリスクを軽減することができます。

私の場合、すでに稼働して4年以上経つサイトの改修を依頼され、直接本番環境を触ることにリスクを感じ、また、改修イメージの共有や確認もテスト環境で行うとスムーズだと思い、作成することにしました。

以下のサイトにテスト環境がなくて困る事例などくわしく説明されています。

手順の全体像

Step1.テスト環境用のサブドメインの登録
Step2.本番環境のWordPressにプラグインをインストール
Step3.本番環境のWordPressからデータをエクスポート
Step4.テスト環境のWordPressを新規作成
Step5.テスト環境のWordPressへデータをインポート
Step6.パーマリンクの設定
Step7.FTPで直接「wp-content/uploads」のフォルダを丸ごとダウンロードして、移行先にアップロード
Step8.テスト環境へのアクセス制限の設定

ここからは私が利用している、「お名前.comの共有サーバーSD」のやり方を記載します。

Step1.テスト環境用のサブドメインの登録

テスト環境作成において、まず、サブドメインかサブディレクトリか2つのやり方はあります。

サブデリィレクトリ：本番環境配下にテスト環境のディレクトリがあるイメージ

サブドメイン：1つのドメインを用途別(本番、テスト)に分割して使うイメージ

サブドメインの使い方の方がしっくりきたのでサブドメインで作ることにしました。

まずは、お名前.comのコントロールパネルから「独自ドメイン設定」を選択。

対象のドメインの横にある「サブドメインを追加」をクリック。

サブドメインの名前を入力して「確認画面へ進む」をクリック。

「決定」をクリック。↓このようにサブドメインが増えています。

Step2.本番環境のWordPressにプラグインをインストール

今回はプラグイン、All-in-One WP Migration | WordPress.orgを使いました。理由は日本語対応しており、簡単にデータのエクスポート、インポートができそうだからです。

WordPressの管理画面から以下をインストール。

Step3.本番環境のWordPressからデータをエクスポート

Step2で入れたプラグインをひらき、エクスポート先「ファイルを」選択。

⭐️⭐️⭐️ポイント⭐️⭐️⭐️

容量が大きい場合（私は最初全てをエクスポートしようとすると2GBでした）、「高度なオプション」から「メディアライブラリをエクスポートしない」にチェックをつけて後から、FTPでサーバーアップすることをおすすめします！（私の場合、2GB→121MBまで小さくなりました！！！）

Step4.テスト環境のWordPressを新規作成

テスト環境用のWordPressを新しく作成します。
お名前.comのコントロールパネルから「WordPressインストール」を選択。

必要情報を入力、確認して決定。（データーベース MySQLは新規作成としました）

メールが届き、WordPressインストール完了です。

Step5.テスト環境のWordPressへデータをインポート

Step2で使ったプラグイン（All-in-One WP Migration | WordPress.org）をテスト環境にも入れます。
本番環境のエクスポートしたデータをプラグイン経由でインポート。
インポートが無事終わると以下のような画面が表示されます。

⭐️⭐️⭐️ポイント⭐️⭐️⭐️
インポートする際に、最大2MBまでしかインポートできないので、以下のプラグインより最大512MBに増やすことをおすすめします！

また512MB以上をインポートした場合は以下のようなエラーとなり、無料の範囲内でやりたい場合は、上記にも記載したようにエクスポート時に「高度なオプション」から「メディアライブラリをエクスポートしない」にチェックをつけておくと良いです。

Step6.パーマリンクの設定

下記の「パーマリンクの設定」リンクをクリック。
すると、データベースの更新画面に遷移し、ボタンを押し、処理が完了すると、新しいタブでログイン画面が開きます。

移行が完了しているためインストール時に新しく設定したログイン情報ではなく移行元のWordPressログイン情報でログインし、パーマリンク画面から「変更を保存」を二回クリックします。

Step7.FTPで直接「wp-content/uploads」のフォルダを丸ごとダウンロードして、移行先にアップロード

これはFileZillaを使い、一度本番環境の「wp-content/uploads」をフォルダ丸ごとダウンロードし、テスト環境へアップロードしました。
WordPressのフォルダ構成と何が入っているかについてはこちらにまとめています！

Step8.テスト環境へのアクセス制限の設定

最後に、誰でも見られる状態だとセキュリティー上よくないので、お名前.comのコントロールパネルの「アクセス制限」から設定。
この設定だけだと、うまくアクセス制限ができなくて苦戦しました。

⭐️⭐️⭐️ポイント⭐️⭐️⭐️
.htaccessがサーバーにある場合には機能しなくなるらしいです。
WordPressのパーマリンクを設定すると.htaccessが生成されるので、パーマリンクを設定したタイミングでBasic認証が外れてしまうそう。なのでhtaccessとhtpasswdを設定する必要があります。

設定方法は、こちらを参考にしました。

以下のように書いた、test.phpを作成し、ドメインのrootディレクトリに配置。

<?php
echo __FILE__;
?>

アドレスバーに、以下を書いて、絶対パスを調べます。

自分のドメイン名/test.php

それを.htaccessファイルに記載します。(一部絶対パス、変えています。)

AuthUserFile /export/XXX/wwwxxx/jp/x/x/gmoserver/8/8/8/test.XXX-jp.com/.htpasswd
AuthGroupFile /dev/null
AuthName "Please enter your ID and password"
AuthType Basic
require valid-user
order deny,allow

続いて、.htpasswdファイルを作成します。

パスワードをハッシュ化して、BASIC認証に必要な.htpasswdファイルのテキストを生成するフォームを使わせていただき、作成しました。

それをドメインのrootディレクトリに配置して終了です！

テストサイトへアクセスすると以下の画面が出てきます。

その他参考サイト
同一サーバー上に構築するWordPressのテスト環境の作り方

WordPressサイトの引っ越し＆バックアップに！All-in-One WP Migrationの使い方

【WordPress】サブドメインでステージング環境作成 in【お名前.comの共用サーバーSD】