XSERVERでサブディレクトリのテスト環境にBasic認証を設定する方法
制作中のテスト環境をサブディレクトリ（例：https://example.com/stg/）で用意すると、URLさえ分かれば外部から閲覧できる状態になりやすいです。クライアント確認や検証を進める前に、閲覧できる人を絞っておくと、制作環境の運用が安定します。
この記事のゴールは、XSERVERの「アクセス制限」機能を使って、サブディレクトリのテスト環境だけにBasic認証を設定し、関係者だけが閲覧できる状態にすることです。
この記事で行うのは、次の3つです。
- 作業の全体像と、事前に確認しておくポイントを整理します。
- XSERVERサーバーパネルで、テスト環境フォルダに「アクセス制限（Basic認証）」を設定します。
- 運用で迷いやすい点（本番まで認証がかかった場合、解除し忘れ防止）を整理します。
1. 作業の全体像
XSERVERでは、サーバーパネルの「アクセス制限」機能で、フォルダ単位にBasic認証（ユーザーIDとパスワード入力で閲覧できる仕組み）を設定できます。サブディレクトリ運用の場合は、本番サイトではなくテスト環境フォルダだけに制限をかけるのがポイントです。
作業の流れは次のとおりです。
| 手順 | 何をするか | 目的 |
|---|---|---|
| 手順1 | テスト環境のURLとフォルダ名を確認する | 本番側に誤って制限をかけないためです |
| 手順2 | 「ユーザー設定」で認証用のユーザーIDを作る | 閲覧できる人（認証情報）を用意します |
| 手順3 | テスト環境フォルダを「ON」にして設定する | テスト環境だけを外部から見えない状態にします |
| 手順4 | シークレットウィンドウで動作確認する | 認証が効いているかを確実に確認します |
WordPressにログインできなければ、テスト環境は見られない状態になるのでしょうか？
WordPressのログインは管理画面用だね。ページ自体はURLを知っていれば表示できることがあるよ。Basic認証はサイトの入口に鍵をかけるイメージで、制作中の公開防止に向いているんだ。
2. 設定前に確認すること
サブディレクトリのテスト環境は便利ですが、設定前に確認しておくと事故が減るポイントがあります。ここでは、最低限押さえたい3点を整理します。
2-1. テスト環境が「サブディレクトリ」になっているか確認する
サブディレクトリは、本番と同じドメイン配下にフォルダを作る方式です。URLの形で判別できます。
| 種類 | URL例 | 特徴 |
|---|---|---|
| サブディレクトリ | https://example.com/stg/ | 同一ドメイン配下のフォルダです |
| サブドメイン | https://stg.example.com/ | 別のホスト名として分かれます |
この記事では、サブディレクトリを前提に進めます。
2-2. HTTPS（SSL）が有効か確認する
Basic認証はシンプルな仕組みのため、制作環境でもHTTPS（SSL）が有効になっている状態で運用するのが安心です。XSERVERでは、サーバーパネルの「SSL設定」からドメイン単位で設定できます。
2-3. テスト環境フォルダ名を分かりやすく決める
フォルダ名が分かりやすいと、サーバーパネルの一覧で誤操作しにくくなります。制作フローとしては、一目でテスト環境と分かる命名にしておくと安心です。
| 例 | 意味 | おすすめ度 |
|---|---|---|
stg | staging（検証用） | 高い |
test | テスト用 | 高い |
dev | 開発用 | 中 |
tmp | 一時用 | 低（用途が曖昧になりやすい） |
サブディレクトリのフォルダ名は、何を基準に決めるとよいでしょうか？
サーバーパネルの一覧で見たときに迷わない名前がいいね。stg や test みたいに、見ただけで用途が分かると誤操作が減るよ。
3. XSERVERでテスト環境フォルダにアクセス制限を設定する方法
ここからは、XSERVERサーバーパネルで「アクセス制限（Basic認証）」を設定します。サブディレクトリ運用では、テスト環境フォルダだけを対象にするのが重要です。
3-1. サーバーパネルで「設定対象ドメイン」を選択する
手順1：XSERVERのサーバーパネルにログインします。
手順2：画面内の「設定対象ドメイン」で、本番ドメイン（例：example.com）を選択します。
手順3：テスト環境が本番ドメイン配下のサブディレクトリであることを、ここで再確認します。
3-2. 「ホームページ」内の「アクセス制限」を開く
手順1：サーバーパネルのメニューで、「ホームページ」カテゴリを探します。
手順2：「アクセス制限」をクリックして、フォルダ一覧を表示します。
3-3. テスト環境フォルダの「ユーザー設定」でユーザーIDを作成する
手順1：フォルダ一覧から、テスト環境のフォルダ（例：stg）を探します。
手順2：該当行の「ユーザー設定」をクリックします。
手順3：パネルが開いたら、「+ユーザーIDを追加」をクリックします。
手順4：ユーザーIDとパスワードを入力し、「追加する」をクリックします。
手順5：ユーザー追加が完了したら、フォルダ一覧へ戻ります。
ここで作成した認証情報が、テスト環境を閲覧するためのID/パスワードになります。関係者に共有する場合は、後から更新しやすい管理方法にしておくと運用が安定します。
3-4. テスト環境フォルダを「ON」にして「設定する」をクリックする
手順1：フォルダ一覧で、テスト環境フォルダ（例：stg）の「アクセス制限」を「OFF」→「ON」に切り替えます。
手順2：画面内の「設定する」をクリックします。
手順3：設定完了が表示されたら、次の動作確認へ進みます。
サブディレクトリ運用では、本番サイト側のフォルダまで「ON」にしないことが重要です。テスト環境フォルダだけがONになっている状態を、フォルダ一覧で確認します。
3-5. ブラウザで動作確認する
手順1：ブラウザのシークレットウィンドウで、テスト環境URL（例：https://example.com/stg/）を開きます。
手順2：ユーザーIDとパスワード入力のダイアログが表示されることを確認します。
手順3：正しい認証情報でサイトが表示できることを確認します。
手順4：本番URL（例：https://example.com/）も開き、認証が出ないことを確認します。
確認観点を表にしておくと、作業後のチェックが安定します。
| 確認するURL | 期待する状態 | うまくいかないときの目安 |
|---|---|---|
テスト環境（/stg/） | 認証が表示され、正しい情報で閲覧できる | 認証が出ない場合は、フォルダのON/OFFを再確認します |
本番（/） | 認証が出ない | 認証が出る場合は、本番側のフォルダもONになっている可能性があります |
設定したのに、手元のブラウザだと認証画面が出ない場合があります。どう確認すると確実でしょうか？
シークレットで確認するのが確実だね。ブラウザが認証情報を覚えていることがあるから、通常ウィンドウだと「出ない」ように見える場合があるよ。
4. 運用で迷いやすいポイント
ここでは、制作中によく起きる「困りごと」を、症状別に整理します。慌てずに一つずつ確認すると復旧できます。
4-1. 本番サイトにも認証が出てしまった場合の戻し方
サブディレクトリ運用では、テスト環境フォルダ以外をONにすると、本番サイトにも認証がかかる場合があります。
手順1：サーバーパネルの「アクセス制限」を開きます。
手順2：本番側に該当するフォルダのアクセス制限を「ON」→「OFF」へ戻します。
手順3：「設定する」をクリックし、本番URLで認証が出ないことを確認します。
手順4：テスト環境フォルダだけがONになっている状態を確認します。
本番サイトまで認証が出てしまいました。まず何を見直せばよいでしょうか？
アクセス制限の一覧で「どのフォルダがONか」を見るのが先だね。テスト環境フォルダ以外がONなら、そこをOFFに戻して設定し直すと復旧しやすいよ。
4-2. クライアントが閲覧できない場合に確認すること
認証情報の共有後に閲覧できない場合は、入力ミスだけでなく、共有した情報が古いケースもあります。運用としては「変更したら共有先も更新する」をセットにしておくと安定します。
| 確認ポイント | 見る場所 | 対応の考え方 |
|---|---|---|
| ユーザーIDの誤入力 | 共有した文字列 | 大文字小文字を含めて再確認します |
| パスワードの誤入力 | 共有した文字列 | コピペでの入力が安定します |
| 認証情報が更新されている | サーバーパネルの「ユーザー設定」 | 最新の情報を共有し直します |
4-3. 認証情報を変更したい場合の基本方針
認証情報を変えたい場合は、サーバーパネルの「ユーザー設定」からユーザーを追加し、不要になったユーザーは削除します。制作フローでは、共有先の更新漏れを防ぐために「変更日」とセットで管理すると混乱が減ります。
5. 公開前にやること
テスト環境を整えたあとは、公開作業の前に「解除し忘れ」と「検索エンジン対策」を確認しておくと、制作進行が安定します。
5-1. Basic認証を解除する手順
手順1：サーバーパネルの「アクセス制限」を開きます。
手順2：解除したいフォルダ（テスト環境を閉じる場合はテスト環境フォルダ）を「ON」→「OFF」に切り替えます。
手順3：「設定する」をクリックします。
手順4：シークレットウィンドウで、認証が出ないことを確認します。
テスト環境を残したまま運用する場合は、OFFにせずONのまま維持し、必要な人だけに認証情報を共有する方法も選べます。
5-2. インデックス対策も合わせて確認する
テスト環境は、本番と同じ内容になりやすいため、検索エンジンに登録されないよう配慮しておくと安心です。Basic認証で基本的に外部から見えにくくなりますが、解除し忘れなどのケースもあるため、テスト環境側のWordPress設定で「検索エンジンがサイトをインデックスしないようにする」を有効にしておく運用も検討できます。
公開前チェックを表で持っておくと、解除漏れを防ぎやすくなります。
| チェック項目 | 確認方法 | 期待する状態 |
|---|---|---|
| 本番URLに認証が出ない | シークレットで本番URLを開く | 認証が表示されません |
| テスト環境フォルダのON/OFFが意図どおり | サーバーパネル「アクセス制限」 | テスト環境だけON、または全てOFFです |
| 認証情報の共有先が最新 | 共有メモ・共有ツール | 最新のユーザーID/パスワードです |
公開前にBasic認証の解除を忘れそうです。運用で防ぐ方法はありますか？
公開前チェックに「本番URLをシークレットで開く」を入れるのが効くよ。認証が出ないかだけ確認すれば、解除漏れに気づきやすいんだ。
6. まとめ
XSERVERのサーバーパネル「アクセス制限」機能を使うと、サブディレクトリのテスト環境だけにBasic認証を設定できます。制作途中のサイトを外部から見えない状態にしつつ、関係者だけが確認できる制作環境を整えられます。
運用のポイントは、テスト環境フォルダだけを対象にして、本番側に誤って制限をかけないことです。設定後はシークレットウィンドウで、テスト環境に認証が出ること、本番に認証が出ないことを確認しておくと安心です。