ローカルホストにサブドメイン

Web プログラミングを勉強していて、シンプルなプログラムならば、すべてデフォルトのドキュメントルートに入れてしまってもかまわないと思います。

しかし、フレームワークや複雑なアプリケーションを構築する際に、階層がずれるとあとあと面倒になるため、 ローカルホストにサブドメイン を設定し「 1 アプリケーションに 1 サブドメイン」というようにするのが適切だと考えています。

手軽に PHP 環境を構築できる XAMPP (ザンプ) ですが、少しの手間でサブドメインを追加することがでることがわかりました。

XAMPP のサブドメイン設定方法

サブドメインを設定するには 2 つのファイルを変更します。

httpd.conf

はじめに Apache の基本的な設定を行う httpd.conf を編集します。

XAMPP の場合、次の場所に httpd.conf があります。

1/Applications/XAMPP/xamppfiles/etc/httpd.conf

VSCode などのプログラマ向けのエディタで開いて編集しましょう。

サブドメインの設定ファイルを読み込む

httpd.conf のなかに

1# Virtual hosts
2# Include etc/extra/httpd-vhosts.conf

という記述があります。

Include のコメントをアンコメントし

1# Virtual hosts
2Include etc/extra/httpd-vhosts.conf

としてください。

ディレクトリを許可

プロジェクトのトップとなる場所にアクセスできるよう、httpd.conf にディレクトリの設定を追加します。


設定例は次のとおりです。

1<Directory "/Users/[user_name]/Project/public">
2    Options Indexes
3    AllowOverride All
4    Require all granted
5</Directory>

上記の

1<Directory "/Users/[user_name]/Project/public">

の部分は、ご自身の環境に合わせて適宜置き換えてください。

httpd-vhosts.conf

2 つ目のファイルを編集します。

1Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf

を開き、サブドメインの設定を入れます。


設定例は次のとおりです。

1<VirtualHost *:80>
2    DocumentRoot "/Users/[user_name]/Project/public"
3    ServerName my-app.localhost
4</VirtualHost>

こちらも、 DocumentRootServerName を環境に合わせて適宜書き換えてください。

ServerName は、「この名前でアクセスする」という指定です。

localhost のサブドメインとして xxx.localhost という形が良いと思います。

再起動する

Apache Web サーバの 2 ファイルを編集し終わりましたら、設定を反映させるために再起動を行います。

XAMPP のコントロールパネルより restart を行ってください。


もし、Apache が起動しない場合は、今変更した設定ファイルに何かしら不備があるはずです。

設定を見直してみてください。

アクセス確認

Apache が起動していることを確認し、ブラウザのアドレスバーに追加したサブドメインを打ち込んでください。

今回の例では my-app.localhost ですね。

サブドメインにしないなら

localhost のサブドメインとして xxx.localhost ではなく、my-app のようなオリジナルなドメインにしたい場合は、「初めて遭遇するドメイン」のため、経路がわからずアクセスできなくなります。

そのような場合は、 hosts ファイルを開いて編集し、追加したドメインの対応表を入れて上げる必要があります。

ご注意ください。


設定例

 1hosts
 2
 3##
 4# Host Database
 5#
 6# localhost is used to configure the loopback interface
 7# when the system is booting.  Do not change this entry.
 8##
 9127.0.0.1       localhost
10127.0.0.1       my-app
11255.255.255.255 broadcasthost
12::1             localhost