menu

Web制作のTipsとかアレコレ。

WAMPにバーチャルホストを設定してテストサーバーと同じ環境にする

2014.02.26

前回の続きです。

簡単に言えば、ローカルの開発環境とクライアントのテストサーバーなどのディレクトリ階層を合わせてやろうという話し。

【例】クライアントhogehoge様の案件とする

クライアントの(テスト)サーバーが http://www.hogehoge.com/test/

自分の開発環境が localhost/hogehoge/html/ だとする。

localhost(WAMPでいうとwwwディレクトリ)の中には、クライアント別にフォルダがずら~っとあるので、もちろんlocalhost(www)直下で開発したりはしない。

hogehogeフォルダの中にはドキュメントやらデザインカンプやらいろいろあるので、/hogehoge/直下にウェブ構築はしたくない。という状態。

やりたいことは、自分の開発環境で構築したサイトの表示を、

localhost/hogehoge/html/ではなく、

www.hogehoge.dev/で行うとします(URLは何でもいい)。

ようは、hogehoge/html/をトップディレクトリとして扱いたいということですね。

何故こうしたいかというと、ドキュメントルートからのパス(ドットなしの”/”から始まるパスね)を自由に使いたいから。そんだけなんですけど。

さて、実際に作業します。まずは、一回だけやることです。

 C:\wamp\bin\apache\Apache2.4.4\conf\httpd.conf

(WAMPのインストール場所やApache2.4.4の部分は自分の環境によって読み替えてください)をテキストエディターで開きます。

バージョンにもよると思いますが、470行目~500行目あたりに

# Virtual hosts
# Include conf/extra/httpd-vhosts.conf

という記述があると思います。
この2行のうち、下の行の#を削除してアンコメントしてやります。

# Virtual hosts
Include conf/extra/httpd-vhosts.conf

で、保存。これで仕込みは完了です。

次に、クライアントが増えたりする度に毎回記述の必要があるファイルは2つ。

(1)WAMPフォルダの中

 C:\wamp\bin\apache\Apache2.4.4\conf\extra\httpd-vhosts.conf

(WAMPのインストール場所やApache2.4.4の以下略)

(2)Windowsフォルダの中

 C:\Windows\System32\drivers\etc\hosts

まずは(1)です。基本的に、WAMPがどーしたこーしたというよりは、単純にApacheの設定ですので、よく分からなかったらApacheの「バーチャルホスト設定」あたりを学習していただければ。

まずは、こういう記述があると思います。

<VirtualHost *:80>
    ServerName localhost
    ServerAlias localhost
    VirtualDocumentRoot "C:\wamp\www"
    ErrorLog "logs\errors.log"
    <directory "C:\wamp\www">
        Options Indexes FollowSymLinks
        AllowOverride all
        Order Deny,Allow
        Deny from all
        Allow from all
    </directory>
</VirtualHost>

とにもかくにもさっさと設定したい人は、この<VirtualHost *80>~</VirtualHost>をコピペです。

というか、そうしましょう。

で、やりたいことを再確認。

ブラウザのアドレスバーに「 www.hogehoge.dev 」と入れたら「 C:\wamp\www\hogehoge\html\ 」に構築したサイトが表示される

ということで、以下の部分を書き換えましょう。

・ServerName : アクセスさせたいURLのようなもの。この場合はwww.hogehoge.dev

・ServerAlias : 同じでよろし。

・VirtualDocumentRoot : ドキュメントルート。 C:\wamp\www\hogehoge\html

・ErrorLog : ログファイルの格納場所とファイル名。errors_hogehoge.log とでもしておきましょう。

・directory : 同じものですな。

で、以下のようになります。

<VirtualHost *:80>
    ServerName hogehoge.dev
    ServerAlias www.hogehoge.dev
    VirtualDocumentRoot "C:\wamp\www\hogehoge\html"
    ErrorLog "logs\errors_hogehoge.log"
    <directory "C:\wamp\www\hogehoge\html">
        Options Indexes FollowSymLinks
        AllowOverride all
        Order Deny,Allow
        Deny from all
        Allow from all
    </directory>
</VirtualHost>

んで、保存。簡単。

次は、(2)です。CドライブのWindowsフォルダを掘っていきます。

該当するhostsファイルを開くと、一番下の行に

127.0.0.1       localhost

とあると思いますので、この「localhost」の右側に半角スペースを一つ入れて

127.0.0.1       localhost www.hogehoge.dev

と追記します。
んで、保存。

これも考えずにやっちゃいましょか。127.0.0.1の意味を知りたい方は、「ローカルループバック」とかでググったらよろしいかと思います。

ここで、Apacheを再起動することを忘れないで下さい。タスクトレイのWAMPアイコンをクリックしたらメニューがでますので、Restart All Servicesしましょう。なんかよう分からんかったら一度WAMPを終了させて立ち上げ直したらよろし。

さて、これでブラウザから http://www.hogehoge.dev にアクセスして表示を確認してください。ほら、幸せになったでしょ。

もちろんですが、「実在しないURL」にしてくださいね。このサンプルでトップレベルドメインを [ .dev ]にしているのにはそういう意味もあったりします。何でもいいです。何なら自分の名前でも。

ちなみに僕はsublime textを使っているので、上記2つのファイルを開いた状態でプロジェクトとして保存しちゃってます。面倒なのはごめんだぜ。

以上でございます。

Comments

please leave your comment...

▲ Page Top