WordPress

【mixhost】テストサイトの作り方|ワンクリックでステージング環境を構築

【mixhost】テストサイトの作り方|ワンクリックでステージング環境を構築

この記事では、レンタルサーバー「mixhost」を利用している人に向けて、テスト環境を作成する方法について紹介します。

ちなみに、システム開発の現場では、本番と同じテスト環境のことを「ステージング環境」といい、動作や表示に問題がないかをチェックするのに活用します。

このステージング環境で問題がなさそうと判断できれば、「本番環境」へ公開となります。

なので、テスト環境の構築は、ビジネスでホームページを運用する人にとっては割と一般的です。

 

mixhost では「WordPress Manager by Softaculous」(自動インストールと管理ツール)という機能が備わっており、簡単にサイトの移行・複製・バックアップなどが行えます。

ということで、具体的な手順について解説します。

 

✔本記事を書いた人

profile

ucozi(@ucozi_ikeda

この記事を書いている私は、ヨガスクールで宣伝部長として働いています。

仕事を通じて得た情報をもとに、信頼性の高い記事をお届けしています。

>> さらに詳しいプロフィールはこちら

 

テスト環境用のサブドメインを作成する

まず最初に、テスト環境を設置する為のサブドメインを作成します。

サブドメインとは、メインサイトとは別のコンテンツを作るときに、本体ドメインを元に任意で設定するドメイン名のことです。

よく似たものに、サブディレクトリというものもあります。

 

サブドメインとサブディレクトリの違いは以下のとおり。

  • メインサイト
    ⇒ https://example.com/
  • サブドメイン
    ⇒ https://△△△.example.com/
  • サブディレクトリ
    ⇒ https://example.com/△△△/

 

本ブログで解説すると、「ucozi.com」(独自ドメイン)という本体ドメインに対して、「△△△.ucozi.com」のように本体ドメインの先頭に文字列を挿入しているドメインが「サブドメイン」です。

「サブディレクトリ」は「ucozi.com/△△△」のように本体ドメインの後ろに文字列を挿入しているドメインのこと。

今回はサブドメインを使って「staging.ucozi.com」というドメインを作成します。

 

サブドメインを作成するための3ステップ

サブドメインをつくる手順は、大きく3ステップ。

  1. mixhostのcPanelにログイン
  2. ドメイン>サブドメインへ移動
  3. サブドメイン情報を入力&作成をクリック

順番に解説します。

 

step
1
cPanelにログイン

mixhost にログインし、cPanelボタンをクリックします。

mixhost にログインし、cPanelボタンをクリックします

 

step
2
サブドメインへ移動

ドメイン > サブドメイン へと移動します。

ドメイン > サブドメイン へと移動します

 

step
3
サブドメイン情報を入力&作成をクリック

必要情報を入力したら、「作成」ボタンをクリックします。

サブドメインの情報を入力

  • サブドメイン
    最終的に「staging.ucozi.com」というサブドメインを作成しようと思います。
    ここでは、サブドメイン欄には「staging」を入力します。
  • ドメイン
    サブドメインを設定するドメインを選択します。
    ここでは、「ucozi.com」を選択します。
  • ドキュメントルート
    サブドメインでアクセスした時に表示するフォルダを設定します。
    存在しない場合は自動的に作成されますので、自動的に入力されたフォルダで問題なしです。
    特に設定しなくてOKです。

 

成功画面が表示されればサブドメインの追加は完了

成功画面が表示されればサブドメインの追加は完了です。

 

robots.txt を設置してクローラを拒否する

次に、「robots.txt」を設定して、検索エンジンのクローラーを拒否します。

クローラーを許可すると、テスト環境がインデックス登録されて、本家のサイトに悪影響が出ることがあるためです。

 

robots.txt を設置するための2ステップ

「robots.txt」を設置する手順は以下の2ステップです。

  1. robots.txt の作成
  2. robots.txt の設置

順番に解説します。

 

step
1
robots.txt の作成

「robots.txt」はテキストエディタで作成できます。

Windowsならメモ帳でOK。

ファイル名は「robots」、テキスト形式(.txt)で保存、下記の内容を記載します。

User-Agent: *
Disallow: /

 

step
2
robots.txtの設置

先ほど作成した「robots.txt」をサーバに設置します。

cPanelに移動し、ファイル > ファイルマネージャーへと移動。

cPanelに移動し、ファイル > ファイルマネージャーへと移動

 

public_html > stagin をクリックします。

public_html > stagin をクリック

 

上部メニューより「アップロード」をクリック。

「robots.txt」を選択してアップロードを行います。

「robots.txt」をアップロード

 

データを複製し、テスト環境へ設定

いよいよ、テスト環境を作成したいデータを複製し、サブドメインにテスト環境を構築していきます

 

テスト環境を設定するための2ステップ

具体的な手順は以下の2ステップです。

  1. クローンデータを作成
  2. 複製データをインストール

詳しく解説していきます。

 

step
1
クローンデータを作成

cPanel から ソフトウェア > WordPress Manager by Softaculous へと移動します。

WordPress Manager by Softaculous をクリック

 

コピーしたいドメインの情報パネルを開き、「Clone」をクリックします。

コピーしたいドメインの情報パネルを開き、「Clone」をクリックします

 

ちなみに、各項目は下記を意味しています。

  • Clone(複製)
    :コピーサイトを作成
  • Stagging(同期)
    :テスト環境の変更を本サイトに反映
  • BackUp(バックアップ)
    :バックアップファイルを作成。
  • Restore(復元)
    :バックアップファイルからサイトを復元。
  • Remove(除去)
    :Softaculous の管理画面からサイト情報を削除(データは残る)
  • Uninstall(アンインストール)
    :登録したWordPressを削除(全てのデータを削除)

 

step
2
複製データをインストール

複製したデータのインストール先を選択します。

ここでは「staging.ucozi.com」を選択します。

 

検索エンジンから隠したいので、「Disable Search Engine Visibility」(サーチエンジンへの登録を無効化する) にチェックを入れます。

「Disable Search Engine Visibility」(サーチエンジンへの登録を無効化する) にチェックを入れます

 

「インフォメーションの複製」をクリックします。

「インフォメーションの複製」をクリックします

 

WordPressの複製が開始されたら、作業が完全に完了するまで、そのまま待ちます。

WordPressの複製が開始されたら、作業が完全に完了するまで、そのまま待ちます

 

『インスターレションは正常に複製されました』のメッセージが出たら完了です。

 

テスト環境にパスワードを設定して、アクセスを制限

テスト環境が出来上がったら、プラグインを使ってサイトへのアクセスを制限しましょう。

ここでは、「Hide My Site」というプラグインを使って、サイトにアクセスした際にパスワードを求めるように設定します。

「Hide My Site」というプラグインを使って、サイトにアクセスした際にパスワードを求めるように設定

 

step
1
「Hide My Site」をインストール

プラグイン > 新規追加 へと移動し、検索窓に「Hide My Site」と入力。

「今すぐインストール」をクリック、続いて「有効化」をクリックします。

「Hide My Site」をインストール

 

step
2
ログインパスワードを設定

「設定」の中に「Hide My Site」が新たに追加されているのでクリック。

「Set Your Password」に任意のパスワードを設定します。

「Set Your Password」に任意のパスワードを設定

 

以上ですべての工程が終了しました。お疲れ様でした。
うこじ

 

まとめ|テスト環境は色味やサイトアイコンを変更しておくとよい

本記事では mixhost でテスト環境を作成する方法について解説しました。

テスト環境はメインサイトとまったく同じなため、テスト環境は色味を変えたり、サイトアイコンを変更しておくのがおすすめです。

意外と間違えやすく、気が付けば「ずっとテスト環境を更新してた…」というのは、サイト運用あるある。

見た目を分かりやすく変更しておくといいと思います。

 

本日は以上です。

この記事があなたのお役にたてたら嬉しいです。

最後までお読みいただき、ありがとうございました。

 

WordPressのテーマ
『AFFINGER 6(アフィンガー)』
購入をご検討の方へ。

当サイトから『AFFINGER 6(アフィンガー)』をご購入いただいた方の特典として、「ヨガインストラクターのためのAFFINGER設定マニュアル」を提供しております。

※すでに『AFFINGER 6(アフィンガー)』を購入済みの方には、有料でも販売しています。

「ヨガインストラクターのためのAFFINGER設定マニュアル」では、デモサイトの設定について、テーマのインストールから細かい設定まで、全ての手順について解説しています。

 

  • この記事を書いた人

ucozi(うこじ)

ヨガスクールの中の人。WEB集客のほか、ヨガ情報サイトの企画・立ち上げやWEBライター養成講座などのコース開発を行ってます。 本ブログは「ヨガインストラクターのためのブログの始め方」をメインテーマに、ヨガ関連情報を発信しています。

-WordPress
-,