【スクリーンショット付き】Xserverでサブドメイン設定をしよう！

Xserverをお使いの皆さんこんにちは。Lismotechの小谷です。
社内でXserverを使っていて、突然サブドメインを設定してテスト環境を作ってほしいと頼まれることはありませんか？
僕はあります！笑

そうでなくてもサブドメインの設定や知識などは、どのサーバーでもある程度共通して使えるものだと思うので覚えておくと便利かもしれませんね。

というわけで、今回はサブドメインの設定方法からサブドメインでの静的ファイルの公開までをみていきましょう！

サブドメインとサブディレクトリ

そもそも、知っておきたいのはサブドメインとは何かですね。
また、関連した用語でサブディレクトリというものもあります。この二つの用語について確認しておきましょう。

手取り早くサブドメインの設定方法について知りたい方は読み飛ばして下さい。

サブドメイン

サブドメインとは、メインのドメインの一部を変えて、別コンテンツを配信するためのドメイン名です。

具体例で見ていきましょう。

例えば、今メインで持っているドメインが以下のようなものだったとします。
hello.co.jp
これに対してのサブドメインを設定すると以下のようになります。
test.hello.co.jp

この「test」の部分がサブドメイン名になります。

サブディレクトリ

サブディレクトリとは、あるドメインに対しての1階層下のディレクトのことを指します。

こちらも具体例で見ていきましょう。

例えば、あるドメインが以下のようなものだったとします。
abc.co.jp
これに対してのサブディレクトリは以下のようになります。
abc.co.jp/xxxx

この「xxx」の部分がサブディレクトリ名になります。

Xserverでのサブドメインの設定方法

まず、Xserverでサブドメインの設定をしていきましょう。

1-1.Xserverの管理画面のトップ画面のメニューから、「サーバー管理」に移動します

https://secure.xserver.ne.jp/xapanel/xserver/index

1-2.メニュー > サーバー管理

操作するサーバーを選択しましょう。

1-3.サーバーパネル > サブドメイン設定

1-4.サーバーパネル > ドメイン選択

サブドメインを設定したいドメインを選択しましょう。

1-5.サーバーパネル > サブドメイン設定

1-6.サーバーパネル > サブドメイン設定 > サブドメイン追加設定

サブドメイン名の入力をして、ドキュメントルートを選択しましょう。任意でコメントを入力しても大丈夫です。
ドキュメントルートはどちらを選択しても問題ないですが、これが実際のディレクトリ構造になるので、覚えておきましょう。

入力したら、「確認画面へ進む」をクリックしましょう。

1-7.サーバーパネル > サブドメイン設定 > サブドメイン追加設定 > 追加

問題なければ、「追加する」ボタンをクリックしましょう。

1-8.サーバーパネル > サブドメイン設定 > サブドメイン追加設定 > 完了

完了画面に移ります。これでXserverでのサブドメイン設定は完了です!

完了までには最大で1時間程度かかるようなので、ご注意です。
設定完了すると、
サーバーパネル > サブドメイン設定 > サブドメイン設定一覧
に「反映待ち」のアイコンが消えるようなので、それを待ちましょう。

サブドメインにファイルアップロード

次は、作成したサブドメインで静的ファイル(html,cssファイルなど)が見れるようにファイルをアップロードしましょう。

アップロードする場所は、先ほどの1-6で設定したドキュメントルートを参考します。
今回は、
メインのドメイン/public_html/test
なので、testディレクトリに公開したいファイルを入れてあげましょう。
また、public_html直下のtestディレクトリは、サブドメインを設定すると勝手にXserver側で作ってくれているみたいです。

2-1.FTPソフトで上記の場所にいく

※FTPソフトはCyberduckを使用してます。

2-2.公開したいファイルをアップロード

公開したいファイルをアップロードしましょう。今回は簡単にテスト用のindex.htmlをあげてみます。

公開ファイルの確認

さて、ここまできたらあとは確認です！

サーバーパネル > サブドメイン設定 > サブドメイン設定一覧
で設定したサブドメインの「反映待ち」のアイコンが消えていることを確認できたら、
設定したサブドメインをブラウザで開いて見ましょう！

今回の場合は「test」とサブドメイン名で設定したので、実際のサブドメインでのページのURLは以下のようになります。

https://test.メインのドメイン名/index.html

※メインのドメイン名は設定に応じて読み替えて下さい

開けました！

うまくいかなかった場合は、設定したドキュメントルートと実際のルートを比較して間違っていないかなどを確認してみましょう。

また、今回の注意事項としては、サブドメインと設定しても実際のドキュメントルートはサブディレクトになることですね。

まとめ

今回は、サブドメインとサブディレクトリの意味について確認しました。

その上でXserverでサブドメインを設定して、そのサブドメインに静的なファイルをアップロードする方法をみていきました。

サブドメインの設定方法などを覚えておくと、テスト環境を用意する時になどに役に立つと思いますので、覚えておいて損はないかもですね！