Macにおける、簡単ローカル環境のすすめ-Virtual Host編-

こんばんは、Webプログラマの篠田です。

6月が終わり、2017年も半分が過ぎてしまいましたね。

楽しい仕事が多いと、時間がすぎるのも早く感じてしまいます。

今回は、前回の「Macにおける、簡単ローカル環境構築のすすめ -hosts編-」に続いて、ローカル環境の構築方法をご紹介していきます。

今回は、XAMPPによるVirtualHost（ヴァーチャル・ホスト）の設定方法です。

Virtual Hostとは

「Virtual Host」とは、「XAMPP」で動いている「Apache」の機能の１つです。

「Virtual Host」は、１つのIPアドレスに対して複数の「ドメイン」を割り当てる役割を果たしてくれます。

普段、「XAMPP」を動かす時に「localhost」をブラウザに入力して、ローカルサイトを動かしていると思います。

これは、１つのIPアドレスが、１つの「localhost」というドメインに割り当てられているために動作している状態を指します。

ですが、「localhost」以外では、ローカルサイトを動かすことができないのではないでしょうか？

この問題を「Virtual Host」を使って「localhost」以外の名前で、ローカルサイトを表示させることができるようにしようというのが、今回の趣旨です。

事前準備

「Virtual Host」の設定の前に、ブラウザで表示させる場所である「ドキュメント・ルート」を用意しておきましょう。

ドキュメント・ルートの用意

普段、「localhost」として利用している「XAMPP」の「htdocs」内に、ドキュメント・ルートとして分かりやすいディレクトリを用意します。

私の場合は「local.●●」としています。

今回は「local.alaki」としておきます。

ディレクトリが用意できれば、ドキュメント・ルートの準備はバッチリです！

Virtual Hostの設定の仕方

では、「XAMPP」にあるVirtual Hostの設定を変更してみましょう。

Virtual Hostの設定ファイの場所

「Virtual Host」の設定ファイルは下記の場所にありますので、「Finder」等で進んでください。

■Virtual Hostの設定ファイの場所
「/Applications/XAMPP/etc/extra/httpd-vhosts.conf」

この「httpd-vhosts.conf」というファイルが、「Virtual Host」の設定ファイルになります。

見つからないという場合は、Macの画面右上にある虫眼鏡アイコンの検索窓に「httpd-vhosts.conf」と検索してもたどり着けます。

Virtual Hostをエディタで開く

「httpd-vhosts.conf」は、だいたいのエディタで開くことができます。

手に馴染んでいるエディタで開きましょう。

私の場合は、「CotEditor」で作業をしています。

設定は３行でOK！

「httpd-vhosts.conf」を開くと、いきなり40行ぐらい書かれていますが、すべて無視してもらって大丈夫です。

重要なのは最終行に下記の３行を追記するだけです。

詳しい内容を見ていきましょう。

（１）【ドキュメント・ルートまでのフルパス】
先程、「htdocs」に用意した「local.alaki」ディレクトリまでのフルパスを記述してください。

私の場合だと「/Applications/XAMPP/xamppfiles/htdocs/local.alaki/」になります。

（２）【表示させたいドメイン】
これは、ドメインでなくても問題ありません。

チェックしたいローカルサイトを識別できる文字列であれば、なんでもOKです。

私の場合は「local.alaki」としておきます。

上記の内容を踏まえて、私の「httpd-vhosts.conf」の最終行に下記のコードを追記します。

記述が終れば、ファイルを保存してください。

忘れてはいけないApacheの再起動

「httpd-vhosts.conf」ファイルを保存しただけでは、ローカルサイトを表示させることはできません。

記述した設定内容をApacheに理解させる必要があります。

理解させる方法は「XAMPP」を再起動させるだけです。

一度、「XAMPP」を停止して立ち上げるなおすか、「Manage Servers」から「Apache Web Server」を「Restart」することで、設定内容が反映されます。

hostsの設定も合わせて行う

最後に、前回ご紹介したアプリケーション「Hosts」を起動させて下記を追記します。

■設定内容
IP: 127.0.0.1
hostname: local.alaki

「127.0.0.1」は、「XAMPP」のIPアドレスになります。

これで、ローカル環境ができあがりです。

まとめ

「hosts」+「Virtual Host」を使うことで、本番環境に限りなく近い状態で、ブラウザチェックをすることができるようになります。

慣れないうちは、失敗も多いかと思いますが、ローカル環境の構築を覚えれば作業効率は「localhost」だけでサイトを作っていたときよりも、格段にアップするはずです。

是非、皆さんの環境でためしてみてください。