Apache をポート番号でサイトを振り分ける(DocumentRoot を変更)

公開サーバーの運用時には必要ないと思いますが、今回は開発用のサーバーでポート毎に DocumentRoot を設定すると円滑に行くかなと思ったので、ポート毎に別の DocumentRoot を割り当てるように Apache を設定してみました。

今回は Apache の mod_vhost_alias を使用することにします。

NameVirtualHost のディレクティブに全てのポートを利用するように設定

/etc/httpd/conf/httpd.conf (CentOS 6.3)

NameVirtualHost *:*

バーチャルホストの設定

以下を一番下に追加します。
/etc/httpd/conf/httpd.conf (CentOS 6.3)

<VirtualHost *:*>
	ServerAdmin [email protected]
	ServerAlias *
	VirtualDocumentRoot /var/www/html/%p

	<Directory /var/www/html/*>
		Options All
		AllowOverride All
	</Directory>
</VirtualHost>
%p
アクセスしたポート番号に変換されます

この状態で
http://ホスト:81/index.html
にアクセスすると
/var/www/html/81/index.html
が読みこまれます。

これで振り分けられるようですが何故か DocumentIndex が効かないようで localhost:81 としても読まれるファイルは何故か /var/www/html/80/index.html になってしまうようです…何かが間違ってそうです

問題点

この設定で CakePHP を動かそうとすると無限リダイレクトが発生して正常にアクセス出来ないようです。その場合は ルート /app/ /app/webroot/ .htaccess の <IfModule mod_rewrite.c> の中に RewriteBase / を追加します。
参考:
http://stackoverflow.com/questions/10392258/cakephp-and-virtualdocumentroot-issue
http://bakery.cakephp.org/articles/tim_m/2007/09/20/500-errors-with-1and1-hosting-apache-1-x

ここまでの状態で、アクセスは可能になっているようですが私の環境では


Forbidden
You don't have permission to access /app/webroot/ on this server.

というエラーが出てきました。直接 /app/webroot にはアクセス出来るのでパーミッションは問題なさそうです。
しばらく調べていると以下の情報がありました。

http://www.lost-in-code.com/server-management/403-forbidden-you-dont-have-permission-to-access-on-this-server/

どうやら DirectoryIndex に index.php を追加すれば動くらしいです。
VirtualDocumentRoot を使用する前は問題なく CakePHP が動いていたので問題ないんじゃないかな?と思いつつもとりあえず設定してみると…動きました…

今まで動いていたのはなぜでしょうか…
まあ動いたので問題なさそうです。

IE8 未対応・不具合・注意点 まとめ

スクリプトを書いてて出てきたものや、調べ物しながら出てきたものなど未確認のもありますが、まとめてみました。

基本的にCSS3の要素は使用出来ない

css3 transition, transform
css3: :first-child 以外の擬似クラス (未確認)
css3: text-shadow (未確認)
css: rgba で指定した色

opacity は効かない

IE 独自の filter を使用する必要があります
filter: ‘alpha(opacity=0)’;

・jQuery のアニメーションを行う場合
$dom.css({filter: ‘alpha(opacity=0)’}).animate({opacity: 1}):
私の環境では上記のようにする必要がありました。

background-size・background-clip・複数の背景画像(未確認)

jQuery(JS)で画像のロードをする場合に attr(‘src’, ‘image.png’); 等を load の前に置くと動かない

// 動かない
$(img).attr('src', url).on('load', function() {
	...
});

// 動く
$(img).on('load', function() {
	...
}).attr('src', url);

width, height のパーセンテージ

良くは調べていないのですが
width: 500%; height: 500%;
等と指定すると綺麗に拡大されないようです

透明度指定がある子要素に position absolute か relative があるとその子要素に透過がされない

#id * 等で全選択かけるか * { filter: inherit; } を使うと適用されるようになります

・max-width: 100% で画像が表示されなくなる(詳細不明)
参考: http://creatorclip.info/2013/09/ie8-img-max-width-bug/

jQuery の $(‘‘).attr(‘src’, ‘image.png’); 等で要素を指定すると height, width 属性が勝手に追加される

$(‘‘);
など、何かを追加することで追加されなくなりましたが…原因がよくわかりません…

他のブラウザでは動作する状態でIEでのみ動かない状況で、デベロッパーツールを開くと問題なく動いてしまうプログラム

スクリプトの最後に

if (!window.console){
    window.console = {
        log : function(msg){
            // do nothing.
        }
    };
}

を追加すると動くようです(未確認)

スクロールアニメーションのセレクター

他のブラウザでは $(‘body’) で問題無いが、IEだと $(‘html,body’)としないと動作しませんでした。

※1 http://creatorclip.info/2013/09/ie8-img-max-width-bug/