WinXPローカルでXAMPPを使ってMovable Typeを動かす―2010年3月版 その1

3年くらい前に書いたXAMPPとMTの記事に今でもアクセスがそこそこあるので、古い内容を見ていただいてもなぁ・・・と思い、最新の情報で記事を書き直すことにしました。2010年3月7日時点の情報となります。

概要は以下となります。

  • Windows XPのローカル環境にMovable Type 5の開発環境を構築する
  • 使用するソフトウェアとバージョン(2010年3月時点で最新)
  • Apacheのバーチャルホスト機能を使い、複数のサイトを管理できるようにします
  • XAMPP内包のPerlは使わず、ActivePerlを使用します
  • データベースには、XAMPP内包のMySQLを使用します
  • Movable Typeの画像を扱う機能を使うため、Image Magickを導入します

かなり長い記事となってしまうので、3つの記事に分割して投稿します。

  1. XAMPPのインストール、Apacheの設定
  2. ActivePerlのインストールと設定、MySQLの設定
  3. ImageMagickのインストール、Movable Typeのインストール

ではまず「その1」としてXAMPPのインストールから、Apacheの設定までです。

  1. http://www.apachefriends.org/jp/xampp-windows.html
    XAMPP for Windowsのサイト

    XAMPP for Windows ダウンロードページにアクセスし「XAMPP Windows版 1.7.4, 2009/12/23」のベーシックパッケージをダウンロードします。ここではEXE版を使用します。

    XAMPP for Windowsのサイト

  2. ダウンロードしたexeファイルを実行しましょう。インストールウィザードが始まります。

    XAMPP for Windowsのインストールウィザード

  3. 「Destination folder」でインストール先のディレクトリを指定することができます。今回はデフォルトの設定(C:\)をそのまま使用します。「Install」をクリックしてしばらく待ちます。

    XAMPP for Windowsのインストールウィザード

  4. インストール処理が終わると、コマンドプロンプトが立ち上がって初期設定を聞いてきます。

    コマンドプロンプトでXAMPP for Windowsの初期設定を行っているところ

    「Should I add shortcuts to the startmenu/desktop?」(スタートメニューとデスクトップにショートカットを追加するかい?)

    「y」が最初から入力されていますので、そのままEnterを押します。

  5. 「Should I proceed?」(続行する?・・・とかって意味かな)

    「y」でEnter。

    コマンドプロンプトでXAMPP for Windowsの初期設定を行っているところ

  6. 「Should I make a portable XAMPP without drive letters?」(ドライブレターを付けないで、XAMPPのポータブル版を作成するかい?)

    「n」のままEnter。「y」にするとUSBメモリとかにインストールできるXAMPPのポータブル版になるようですが、それだとドライブレターを付加できないのでWindowsの「サービス」が使えないみたいです。(超適当訳)

    コマンドプロンプトでXAMPP for Windowsの初期設定を行っているところ

  7. …中略
    XAMPP is ready to use.

    Enterキーを押します。

    コマンドプロンプトでXAMPP for Windowsの初期設定を行っているところ

  8. 「I have set the timezone in ‘php.ini’ and ‘my.ini’ to "Asia/Tokyo".
    Yous should correct these values if my guess was wrong.」
    (php.iniとmy.iniのタイムゾーンを「Asia/Tokyo」に設定したよ。違っていたら修正することができるよ。)

    Enterキーを押します。

    コマンドプロンプトでXAMPP for Windowsの初期設定を行っているところ

  9. これでセットアップは完了となります。「1」を入力してEnterを押します。

    コマンドプロンプトでXAMPP for Windowsの初期設定を行っているところ

  10. XAMPPのコントロールパネルが起動します。

    XAMPPのコントロールパネル

  11. ApacheとMySQLの「Start」ボタンをクリックして起動させます。

    XAMPPのコントロールパネル

  12. Apacheの「Admin」ボタンをクリックします。するとブラウザが立ち上がってXAMPPのスタート画面が表示されます。

    XAMPPのコントロールパネル

  13. 「日本語」をクリックしましょう。

    XAMPPの管理画面にアクセス

  14. これがXAMPPの管理画面です。
    一応サーバーソフトウェアなので、万が一のことも考慮して最初にセキュリティの設定を行いましょう。左のメニューから「セキュリティ」をクリックします。

    XAMPPの管理画面

  15. 最初はなんのセキュリティ対策も施されていない状態なので、5くらいあるステータスが全て「要注意」か「不明」になっています。対策にはXAMPPのツールを使います。ページの中程に
    http://localhost/security/xamppsecurity.php
    というリンクがあるので、クリックします。

    XAMPPのセキュリティ管理画面

  16. するとMySQLと、XAMPPのディレクトリにパスワードを設定するためのフォームが現れます。
    「MYSQL項目:”ROOT”パスワード」というフォームから、MySQLのrootユーザーのパスワードを設定しましょう。 なお、(File: C:\XAMPP\security\mysqlrootpasswd.txt)にチェックを入れておくと、変更したパスワードがテキストファイルに書き出されます。万が一パスワードを忘れてしまったときにこれを見ればいい、というわけです。
    このディレクトリは公開ディレクトリではないので安全なハズ

    XAMPPのセキュリティ管理画面

  17. 次に「XAMPPのディレクトリ制御(.htaccess)」でユーザとパスワードを入力します。これで、この管理画面自体にベーシック認証がかかります。

    XAMPPのセキュリティ管理画面

    設定が終わったら、左のメニューの「セキュリティ」をクリックします。

    XAMPPのセキュリティ管理画面

  18. するとたった今設定したベーシック認証が行われます。ユーザー名とパスワードを入力してログイン。

    管理画面にベーシック認証がかかった

  19. 今度はセキュリティのステータスの「要注意」が「安全」に変わったことを確認します。

    XAMPPのセキュリティ管理画面

  20. では実際にWebサーバーのディレクトリにアクセスしてみましょう。ブラウザで、http://localhost/index.html にアクセスします。「It works!」というページが見えたら、正常に動作しています。
    ちなみに http://localhost/ でアクセスしようとすると、XAMPPの管理画面に飛ばされてしまいます。

    http://localhost/index.html にブラウザでアクセス

    さて、これだけだとWebサーバーを通じて見ることができるのは C:\xampp\htdocs ディレクトリだけです。これをバーチャルホスト機能を使って拡張し、複数のサイトを管理できるように変更します。

  21. C:\xampp\apache\conf\extra\httpd-vhosts.conf をテキストエディタで開きます。これがバーチャルホスト設定用のファイルです。まず ##NameVirtualHost *:80 となっている部分の ## を削除して、コメントアウトされた状態を解除します。

    httpd-vhosts.conf をエディタで開いたところ

  22. このファイルにはコメントアウトされた状態で設定の例文が示されています。このような感じで。

    ##<VirtualHost *:80>
        ##ServerAdmin postmaster@dummy-host2.localhost
        ##DocumentRoot "C:/xampp/htdocs/dummy-host2.localhost"
        ##ServerName dummy-host2.localhost
        ##ServerAlias www.dummy-host2.localhost
        ##ErrorLog "logs/dummy-host2.localhost-error.log"
        ##CustomLog "logs/dummy-host2.localhost-access.log" combined
    ##</VirtualHost>

    httpd-vhosts.conf ファイルをエディタで編集する

    ただ、動作させるだけなら DocumentRootServerName を設定するだけで良いようです。仮に site1.localhost というドメインで D:\htdocs\site1 ディレクトリを、site2.localhost というドメインで D:\htdocs\site2 ディレクトリを参照できるようにしたいとすると、以下のようにファイル末尾に設定を追加します。書き換えたら、上書き保存します。

    <Directory "C:/xampp/htdocs">
        Options +ExecCGI
        AddHandler cgi-script .cgi .pl 
        order allow,deny
        Allow from all
    </Directory>
    <Directory "D:/htdocs">
        Options +ExecCGI
        AddHandler cgi-script .cgi .pl 
        order allow,deny
        Allow from all
    </Directory>
    
    <VirtualHost *:80>
        DocumentRoot "C:/xampp/htdocs"
        ServerName localhost
    </VirtualHost>
    <VirtualHost *:80>
        DocumentRoot "D:/htdocs/site1"
        ServerName site1.localhost
    </VirtualHost>
    <VirtualHost *:80>
        DocumentRoot "D:/htdocs/site2"
        ServerName site2.localhost
    </VirtualHost>
  23. 今度はそのURLの名前解決をできるようにするための設定を行います。C:\WINDOWS\system32\drivers\etc\hosts※1)をテキストエディタを開きます。

    hostsファイルをエディタで編集する

  24. 127.0.0.1 localhost
    となっているところの次に以下の行を追加し、上書き保存します。
    127.0.0.1 site1.localhost
    127.0.0.1 site2.localhost 

    hostsファイルをエディタで編集する

  25. ここまで行った設定を反映するため、Apacheを再起動します。XAMPPコントロールパネルで Apache の「Stop」ボタンをクリックし、しばらく待ちます。すると左の「Running」表示が消えるので、再度「Start」ボタンをクリックします。

    XAMPPコントロールパネルでApacheを再起動

  26. 設定したディレクトリにブラウザでアクセスしてみましょう。D:\htdocs\site1\ に適当なhtmlファイルを置き、http://site1.localhost/ファイル名 としてアクセスし、ページが正常に表示されるか確認します。また、同様に http://site2.localhost も確認しましょう。

    バーチャルホストで設定したURLにブラウザでアクセス

    もしもサーバーエラー画面が表示される場合、httpd-vhosts.conf ファイルの記述が誤っている可能性があります。また、ブラウザのステータスバーに site1.localhost のアドレス解決をしています とか ホストを解決しています とかいうメッセージが表示される場合、hostsファイルの設定が誤っています。それぞれ設定を見直してみましょう。

以上でXAMPPのインストールからApacheの設定までが完了です。次回の記事ではActivePerlのインストールと設定、MySQLの設定を取り上げる予定です。

[XAMPP]WinXPローカル環境で複数ドメイン管理

XAMPPを使うと、ローカル環境でサイトの動作確認ができて大変便利です。
複数のサイトを制作・管理する場合、ローカル環境に複数のドメインがあったら便利だと常々思っていました。実際にやってみたところ、うまくいったのでその方法をご紹介します。

環境:
Windows XP SP2
XAMPP for Windows Version 1.6.6a
XAMPPのインストールディレクトリはデフォルト設定のまま(C:\xampp)です。
  1. C:\xampp\apache\conf\extra\httpd-vhosts.confをテキストエディタで開き、 #NameVirtualHost *:80 となっているところの先頭の#を取り除きます(コメントアウトを外す)。
  2. 仮にD:\htdocs\hogeというディレクトリをhttp://hoge.localhost/というサブドメインで参照したい場合、同ファイルに以下のように記述を追加します。

    <VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs"
    ServerName localhost
    </VirtualHost>
    <VirtualHost *:80>
    DocumentRoot D:/htdocs/hoge
    ServerName hoge.localhost
    </VirtualHost>
    <Directory "D:/htdocs/hoge">
    order deny,allow
    allow from ALL
    </Directory>

    他にもドメインを追加したい時は、同ファイルに続けて以下のように書きます。

    <VirtualHost *:80>
    DocumentRoot D:/htdocs/fuga
    ServerName fuga.localhost
    </VirtualHost>
    <Directory "D:/htdocs/fuga">
    order deny,allow
    allow from ALL
    </Directory>

    ファイルの修正が終わったら上書き保存します。

    同ファイルに<VirtualHost>の書き方のお手本がコメントアウトされた状態で書いてあります。それを見ると、ServerAdminやらErrorLogといった項目が書いてありますが、動かすだけならこれらを省略しても支障はないようです。

  3. C:\WINDOWS\system32\drivers\etc\hostsをテキストエディタで開き

    127.0.0.1       localhost

    となっているところを次のような感じに修正し、保存します。

    127.0.0.1       localhost
    127.0.0.1       hoge.localhost
    127.0.0.1       fuga.localhost
  4. apacheを再起動します。XAMPPコントロールパネルから「停止」ボタン→しばらく待ってから「開始」ボタン で再起動になります。そもそも起動していないなら、「開始」ボタンを押して起動させます。
  5. ブラウザでhttp://localhost/http://hoge.localhost/にアクセスし、正常な表示ができるかどうかを確認します。
参考にさせていただいたWebサイト:
[xampp]ローカルにサブドメイン切ったらaccess forbidden食らった – うえちょこ@ぼろぐ
apache:ローカル環境で複数ドメイン(サイト):VirtualHost

Continue reading