Xserverでサブドメインのテストサイトを作ろう

自分で契約しているドメインにサブドメインを作成してテスト環境とし、構築したWEBサイトのデータをテストアップします。
クライアントのサーバーもXserverであれば同じ環境と見て差し支えないので、表示崩れや動作チェックもこのテスト環境で行えます。

初期ドメインではサブドメインを作成できません。独自ドメインを利用していることが条件となります。このサブドメインはいくら作成しても無料。

サーバーパネルで設定する

サーバーパネルにログインし、ドメインのサブドメイン設定へ

キャプチャ

サブドメインを作りたいドメインの「選択する」をクリック。

キャプチャ

サブドメイン設定画面に映るので、タブの「サブドメイン設定追加」をクリック。
作りたいサブドメインを入力(◯◯◯.ponsyon.comの ◯◯◯部分)

ドキュメントルートはお好みで。
/ponsyon.com/public_html/(サブドメイン名).ponsyon.com/より
/ponsyon.com/public_html/(サブドメイン名)/の方が好きかな。
サブドメインを複数作成するなら、コメントに分かりやすくメモを書いていた方が◎。

キャプチャ
ドキュメントルートはフォルダ名に関係してくる

FTP情報自体は通常のponsyon.comと同様になります。

今回、/ponsyon.com/public_html/test/で作成したので、
testフォルダができました。こちらにテストサイトのデータを作成してアップロードしていきます。

キャプチャ

/ponsyon.com/public_html/test.ponsyon.com/で作成すると、test.ponsyon.comというフォルダができている筈です。管理しやすい方で進めましょう。

「確認画面へ進む」&「追加する」
(前述の説明とは逆に/ponsyon.com/public_html/test.ponsyon.com/で進めています。何回かやり直してるうちに入れ替わっちゃいました💦)

キャプチャ

ページ遷移に数秒待たされてーーサブドメイン設定の追加が完了!

キャプチャ

「サブドメイン一覧」タブに遷移すると反映待ちアイコンが付いているので、実際に反映されるのに1時間ほどかかるので待つ。

キャプチャ

反映されるとこうしてアクセスできるようになります(まだ何もアップロードしていないので、Xserverのデフォルトの画面です)。

キャプチャ

WordPressを使う場合はインストールする

サーバーパネルTOPの下の方にある「WordPressの簡単インストール」をクリック。

キャプチャ

「ドメイン選択画面」に移動するので、該当ドメインの「選択する」をクリック

キャプチャ

「WordPressインストール」タブをクリック。
「サイトURL」のドメイン部分がプルダウンになっているので、作成したサブドメインを選択する。

キャプチャ

あとは普段通りに入力して

キャプチャ

「確認画面に進む」でOKなら「インストールする」
ちょっとぐるぐるして
WordPressのインストールが完了。

キャプチャ

管理画面URLをクリックすると

キャプチャ

WordPressのログイン画面です。無事インストールされました!

Basic認証も忘れずに

テストサイトの場合はBasic認証をかけるのを忘れずに。テスト状態なのに第三者にアクセスされるのも嫌ですが、Googleのbotに巡回されて検索結果に表示されたら最悪です。

上記記事のとおり.htaccessを編集して手動で対応もできますが、Xserverはサーバーパネルから簡単に設定できます。

サーバーパネルTOP画面から「ホームページ」の「アクセス制限」へ。

キャプチャ

該当ドメインを選択して、「フォルダ一覧」に遷移します。
ここではtestですね。このアクセス制限をONにして、まずtable下の「設定する」をクリック。

キャプチャ

該当フォルダに鍵アイコンが付きます。
そして横の「ユーザー設定」をクリック。
ここでID&パスワードを指定し(「現在のURL」はひとまずスルーでOK)、

キャプチャ

「確認画面へ進む」をクリックし、OKなら「追加する」をクリックします。
これだけで簡単設定できました。

キャプチャ

作成したサブドメインにアクセスして、Basic認証のダイアログが表示されたらOK!

キャプチャ