簡単にWordPressのテスト環境をエックスサーバーで作る方法

本サイトにはプロモーションが含まれる場合があります。

何か開発したいやテーマの変更を考えている場合などはテスト環境用のサイトで試してから本環境に移行するのが安全!
失敗して元に戻せない等のトラブルが起きないようにテスト環境を作りましょう!
エックスサーバー(Xserver)で簡単にWordPressのテスト環境を作る方法を説明しています。

テスト環境の作り方は簡単にまとめると以下のようになります。

  1. テスト環境(移行先サイト)用のサブドメインを作成
  2. テスト環境(移行先サイト)用にWordPressをインストールする
  3. Basic認証でサイトに鍵をかける
  4. 本番環境(移行元サイト)のデータをエクスポートする
  5. 本番環境のデータをテスト環境へインポートする

以上のような流れになります。

スポンサーリンク

テスト環境で使うサブドメインの設定(作成)方法

サブドメインは反映まで少々時間が掛かりますので、まずエックスサーバー(Xserver)でサブドメインを作成します。

エックスサーバーにログイン後、インフォパネルの場合は「ご契約一覧」の中の「サーバー管理」を押します。
https://www.xserver.ne.jp/

エックスサーバーでサブドメインの設定(作成)方法
エックスサーバーインフォパネルにログイン
エックスサーバーのサーバー管理

最初のログインの時点で「サーバーパネル」にログインすると少しだけ短縮できます。

エックスサーバーサーバーパネルにログイン

サーバーパネル内の「サブドメイン設定」を押します。

エックスサーバーサブドメイン設定

「ドメイン選択画面」に移ります。
サブドメインを設定したいドメインの「選択する」を押します。

サブドメインを設定したいドメインの「選択する」

今までサブでメインを使った事がありませんでしたので、「サブドメイン設定一覧」は何も無い状態です。
「サブドメイン設定の追加」を押します。

エックスサーバーサブドメイン設定の追加

任意のサブドメイン名を入力し、コメントには用途など分かりやすいメモを記載、そして忘れてはいけない「無料独自SSLを利用する」にチェックが入っていることを確認し、「確認画面へ進む」を押します。

エックスサーバーサブドメイン無料独自SSLを利用する

設定後のサブドメイン利用について
サブドメイン設定は追加後、サーバーに設定が反映されるまで半日程度かかる場合があります。

はじめにも記載した通り、サーバー設定が反映されるまで時間が掛かることもあります。
そのため、「テスト環境ほしい!」と思ったらすぐ行動に移しましょう!

「確認画面へ進む」を押した後、サブドメイン設定の確認画面に移ります。
間違いなどがなければ「追加する」を押します。

エックスサーバーサブドメイン追加する

これでエックスサーバーにおけるサブドメインの設定(作成)は完了です!
作り方も簡単なのでここまではあっと言う間に終わります!
但し、設定の反映までは少し時間が掛かります。

エックスサーバーのサブドメインの設定(作成)完了

SSL設定が反映されるまでの時間について
設定の反映完了まで最大1時間程度かかります。今しばらくお待ちください。

サブドメインの設定がまだ反映されていない場合は、アクセスしても以下のように表示がされます。

無効なURLです。反映待ち

無効なURLです。
プログラム設定の反映待ちである可能性があります。
しばらく時間をおいて再度アクセスをお試しください。

サブドメインの設定反映までこのまま待っても良いですが、先にワードプレスをインストールしておくとスムーズに進めれますので、次はワードプレスをインストールします。

mixhost

テスト環境サイトにWordPressをインストールする

テスト環境サイトにWordPressをインストールする方法です。
とは言っても、やり方は通常のWordPressのインストールと変わりませんのでサクサク終わらせましょう!

左メニューの「WordPress簡単インストール」を押します。

エックスサーバーWordPress簡単インストール

サブドメインを設定したドメイン名の「選択する」を押します。

サブドメインを設定したドメイン名の「選択する」

「インストール済みWordPress一覧」が選択されていますので「WordPressインストール」を押して切り替えます。

WordPressインストールに切り替える

まずは「インストールURL」を先ほど設定したテスト環境サイト用のサブドメインに変えます。

他入力する箇所は以下になります。

テスト環境サイト用のサブドメインWordPressインストール

  • ブログ名:テストサイトなどテスト環境用のサイト名
  • ユーザ名:テスト環境サイトのWordPressにログインする時のユーザー名
  • パスワード:テスト環境サイトのWordPressにログインする時のパスワード
  • メールアドレス:自分のメールアドレス
  • キャッシュ自動削除:ONにする(初期設定のまま)
  • データベース:自動でデータベースを生成する(初期設定のまま)

入力が終わったら「確認画面に進む」を押します。

WordPressのインストール先など間違いないことを確認したら「インストールする」を押します。

エックスサーバーのサブドメインにWordPressインストールする

これでテスト環境のサブドメインのサイトにもWordPressがインストールされました!
データベースの情報が表示されますので、WordPressのID・パスワードと一緒に保存をしましょう!

サブドメインのWordPressデータベース情報

「戻る」を押すと、先ほど「インストール済みWordPress一覧」には1URLしかありませんでしたがサブドメイン分が追加されているはずです。

テスト環境サイトのサブドメインにWordPressインストール追加

Basic認証を設定の仕方

現状のままですとサブドメインのサイトに誰でもアクセスでき、開発環境が丸見え状態でセキュリティ面でも好ましくありません。
また、Googleからは重複コンテンツとみなされる可能性も十分にあるためSEO的にもよくありません。

Basic認証とは、基本的なユーザー認証方式で基本認証と言われたりもしています。
Basic認証の設定をすると、「ユーザID・パスワード」が必要となるため特定の人しかアクセスすることがでません。

そのためBasic認証を設定する事で自分もしくは開発者だけがサイトを触れるようにした方が良いです。
この設定方法もエックスサーバー(Xserver)なら簡単です!

左メニューの「アクセス制限」を押し、Basic認証を設定したいドメインの「選択する」を押します。

エックスサーバーアクセス制限
Basic認証を設定したいドメインの「選択する」

「アクセス制限設定」の画面に移ります。
Basic認証を設定するサブドメインのフォルダ横の「ユーザー設定」を押します。

Basic認証を設定するサブドメインの「ユーザー設定」

Basic認証の「ユーザID」「パスワード」を入力して、「確認画面へ進む」を押します。

Basic認証の「ユーザID」「パスワード」を入力

確認画面に移りますので間違いがなければ「追加する」を押します。

エックスサーバーアクセス制限のBasic認証を追加する

「ユーザーの追加が完了しました。」と表示がでます。

Basic認証ユーザーの追加が完了しました。

再度、アクセス制限設定の画面に戻り「アクセス制限」の「ON」を押します。

アクセス制限をON

「ベーシック認証の設定変更が完了しました。」と表示がでれば設定は無事済みました!

ベーシック認証の設定変更が完了しました。

では、試しにテスト環境用のサブドメインのワードプレスにアクセスをしてみると・・・

Basic認証の設定をしているので「ユーザー名」と「パスワード」を求められます。

Basic認証

これで誰にも見られずコッソリとサイトをいじる事ができます♪

本番環境のデータをテスト環境に移行する方法

テスト環境用のサイトも作成できましたので、次は本番環境のデータをテスト環境に移す方法です。
データを移すやり方には、FTPでデータを丸ごとダウンロードしアップロードする方法やデータベースのMySQLファイルをエクスポート・インポートするなど色々ありますが、初心者や小難しいことは分からない私はプラグインで楽をします!

All-in-One WP Migration(プラグイン)を使って移行

WordPressのプラグインは本当に無料で使えるものが多い!
本当に感謝したいっ!!
というわけで、本番環境のデータをテスト環境へ移すために「All-in-One WP Migration」を使います!

All-in-One WP Migration(プラグイン)を使って移行する方法

「All-in-One WP Migration」の使い方は少し長くなるので以下で説明していますので参考にして下さい。
参考テスト環境・サイト引越しのデータ移行方法にはAll-in-One WP Migration

「All-in-One WP Migration」は本当に秀逸なプラグインです。
簡単に使い方を説明すると。

  1. 本番環境(移行元サイト)のデータファイルを1クリックで一式エクスポートする
  2. テスト環境(移行先サイト)にエクスポートしたデータファイルをドロップ&ドラッグでインポートする

余計な事は不要!
本当簡単にデータを丸々移すことができます!

「All-in-One WP Migration」でデータを移した後は少しだけWordPressの設定を触ります。

mixhost

WordPressのちょっとした設定

ここまででテスト環境サイトとしてはほぼ完成ですが、2点ほど設定を触ります。

1つ目。
Basic認証をしているためGoogleなどの検索エンジンにクロールされる事はありませんが、念のためインデックスされないようにしておきます。
年には念のためです!

やり方は、「設定」>「表示設定」を選択し「検索エンジンがサイトをインデックスしないようにする」にチェックを入れて「変更を保存」をクリックするだけです。

検索エンジンがサイトをインデックスしないようにする

2つ目。
サブドメインを作る際「無料独自SSLを利用する」にしています。
現状「http」にアクセスするようになっていますので、これを「https」に変更しておきます。

やり方は、「設定」>「一般」を選択し「WordPressアドレス(URL)」と「サイトアドレス (URL)」を「https」に書き換えて「変更を保存」をクリックするだけです。

httpをhttpsに変更する

その際Basic認証が求められますので入力します。

最後にちょっとした補足です!
本環境とテスト環境は、なるべく同じ環境下にするを心がけるのが大事です。
全く違う環境ですと元に戻したときに不都合が起こる可能性もあります。
以下の2点は合わせておけるなら合わせるようにします。

  1. PHPのバージョン
  2. MySQLデータベースのバージョン

私がテスト環境サイトを作成した際、本環境とテスト環境の「MySQLバージョン」が違いました。

  • 本環境=古いバージョン
  • テスト環境=新しいバージョン

MySQLの設定の確認は、エックスサーバーのメニュー「WordPress簡単インストール」>ドメイン選択から確認したいドメインの「選択する」を押すと確認ができます。
また、メニュー「データベース」>「MySQL設定」でも確認ができます。
MySQLのバージョンを上げるためには「移行ツール」を使えば良いのですが、時間が少し掛かりそうという事と面倒だったためしていません。
問題が起きたときにバージョンアップしようと考えていましたが、特に私の環境の場合は問題はありませんでした。
しかし、何かトラブルが起きてしまっては面倒なのでなるべく同じ環境下で行なうのが良いです。
また、バックアップはしっかり!!
https://www.xserver.ne.jp/


無料の遥か上をゆく有料WordPressテーマ
Googleが推奨する「PWA」標準装備!
分析ツール「見える化システム」!
絞り込み条件検索が可能な「スマート検索機能」搭載!
価格:1,4800円~!
WordPressテーマ 「WING(AFFINGER5)
出来る事が多すぎる特化テーマ!
9年を越える実績と信頼!
初心者用マニュアルも充実!
価格:1,4800円~!
出来る事が多すぎる特化テーマ!
9年を越える実績と信頼!
初心者用マニュアルも充実!
価格:1,4800円~!

タイトルとURLをコピーしました