Apache ～ .htaccess設定方法と使い方 ページ表示の高速化～

.htaccessファイルは、分散設定ファイルとも呼ばれ、Webサーバーの挙動を設定することができるファイルのひとつで、WebサーバーとしてApacheが使用されていて、管理者が.htaccessファイルの設置を許可していれば使用することができます。

設定方法

Apacheは、http.confにディレクティブという命令を記述することで設定しますが、http.confは管理者にしか編集できなくなっています。それに対して、.htaccessファイルは各ユーザーがディレクトリ単位に設定することができます。ファイルの構文は、主設定ファイルのhttp.confファイルと同じです。

注意事項

• 基本的に、http.confファイルにアクセスできない場合以外は極力使用しない

• FTPで転送する場合、ASCIIモードまたは、テキストモードを使用する

• Windowsで編集する場合、一旦htaccess.txtなどに置き換え、サーバーに配置後にリネームする

• 設置されたディレクトリと配下ディレクトリ全てに影響する

• 構文誤りや管理者が許可していないディレクティブを使用した場合、該当ディレクトリ配下のファイルアクセスが、500 Internal Server Errorになる

• 最終行には、改行を入れる

使い方

いろんな使い方ができるみたいですが。ざっくりとですが、こんなことができるみたいです。勉強しながら少しずつ記事にしていきたいと思っています。

使い方概要

• セキュリティ関連

• エラーページ制御

• キャッシュ制御

• ページ表示の高速化

• 多言語対応

今回は、ページ表示の高速化について記事を書きます。

ページ表示の高速化

• ファイルを自分で圧縮する方法
• ファイルをサーバーで圧縮する方法

gzipというデータ圧縮プログラムを使ってファイルサイズを小さくすることで、Webサーバーとブラウザ間の通信データ量を減らして、ページの表示をより高速にすることができるそうです。gzipで対象とするのは、HTML,CSS,JavaScriptなどのテキストファイルで、画像やpdfなどの圧縮済みファイルをgzipしても効果はなく、ファイルサイズが増えてしまい逆効果になる場合もありあます。

ファイルを自分で圧縮する方法

更新頻度の少ない静的なWebページのファイル（HTML、CSS、JavaScript）に向いている方法なんです。いっぽうで、PHPなどで動的にWebページのファイルが生成される場合には、事前にファイルをgzipで圧縮できないのでファイルをサーバーで圧縮する方法を使います。その場合には、gzipに対応していないブラウザを考慮して非圧縮のファイル（style.cssなど）と圧縮済みのファイル（style.css.gzなど）の2種類のファイルをサーバーに準備します。

gzipファイルの作成方法

gzip圧縮をするには、専用のアプリケーション（例:Windowsの7zip、lhaplus）を使用するか、HTML、CSS、JavaScriptを使用するならOnline JavaScript/CSS/HTML Compressorを利用することもできます。

ファイルを圧縮してできる、拡張子が.gzのファイルをサーバーにアップロードします。

link要素やscript要素の記述には、gzip圧縮していないファイルを指定し、ファイル読み込みのHTMLタグの記述を変更する必要はないです。

記述例

<link rel="stylesheet" herf="css/style.css"> 

<script type="text/javascript" src="js/core.js"> </script>

.htaccessの記述追加

作成したgzipファイルの転送を有効にするためには、.htaccessに記述を追加します。gzip圧縮対応のブラウザにはgzipファイルを転送し、対応していないブラウザには圧縮されていないファイルを転送する設定をします。

記述例

RewriteEngine On

RewriteCond %{HTTP:Accept-Encoding} gzip

RewriteCond %{REQUEST_FILENAME} !\.gz$

RewriteCond %{REQUEST_FILENAME} \.gz -s

RewriteCond %{REQUEST_FILENAME} (\.js|\.css|\.html)$

RewriteRule .+ %{REQUEST_URI} .gz [L]

<FileMatch "\.html\.gz$">

    ForceType text/html

    AddEncoding x-gzip .gz

</FileMatch>

<FileMatch "\.css\.gz$">

    ForceType text/css

    AddEncoding x-gzip .gz

</FileMatch>

<FileMatch "\.js\.gz$">

    ForceType application/x-javascript

    AddEncoding x-gzip .gz

</FileMatch>

 

RewriteEngine On

mod_rewrite機能のOn/Offを指定する。URL書き換え処理を行う場合にはOnにする。

RewriteCond %{HTTP:Accept-Encoding} gzip

RewriteCondで、gzipが許容されていれば...という条件を設定する。

RewriteCond %{REQUEST_FILENAME} !\.gz$

リクエストされたファイルの拡張子が.gzでなければ...という条件を設定する。

RewriteCond %{REQUEST_FILENAME} \.gz -s

ファイルの末尾に.gzを付与したファイルが存在すれば...という条件を設定する。

RewriteCond %{REQUEST_FILENAME} (\.js|\.css|\.html)$

ファイルの拡張子が.jsまたは、.cssまたは、.htmlの場合には...という条件を設定する。

RewriteRule .+ %{REQUEST_URI} .gz [L]

RewriteRuleで、上記全ての条件を満たす場合には...リクエストされたURIの末尾に.gzを追加する。

<FileMatch "\.html\.gz$">～</FileMatch>など

FileMatchを使い拡張子が一致するファイル毎にMIME-TYPEとgzエンコードを指定する。

ForceTypeディレクティブは、一致するファイルが指定のMIMEコンテントタイプで送信されるように設定する。

AddEncodingディレクティブは、与えられた拡張子で指定されたエンコーディングに関連付けをする。AddEncoding x-gzip .gzは拡張子.gzを含むファイルがx-gzipエンコーディングでエンコードされるという設定。

gzip圧縮されたファイルで通信されていることの確認方法

レスポンスヘッダーのContent-Encodingがgzipになっていることで、gzip圧縮されたファイルで通信ｎされていることが確認できます。

圧縮ファイルをサポートするブラウザの場合には、HTTPリクエストにAccept-Encoding:gzip,deflateを付加してgzip圧縮やDeflate圧縮を受け付けできることをサーバーに通知し、これを受信したサーバーが圧縮ファイルを返却できる場合には、Content-Encoding:gzipを付加したHTTPレスポンス、圧縮ファイルを返却します。

ファイルをサーバーで圧縮する方法

mod_deflateを利用する方法

mod_deflateを利用することで、サーバーが自動でgzip圧縮をするようになりますがリクエストがある度にサーバーが圧縮を行うので、CPUやメモリーを消費します。レンタルサーバーによっては、この機能をサポートしていない場合もあるそうなので、利用する場合には、利用中のサーバーがmod_deflateをサポートしていることを確認する必要が有ります。

mod_deflateモジュールがサポートされているかを調べられるサイトもあるそうです。

特定のMIMEタイプのみ圧縮したい場合には、AddOutputFilterByTypeディレクティブで設定することができます。text、xml、html、css、JavaScriptを圧縮して転送するには.htaccessに次のように設定します。ただし、mod_deflateが既に有効な場合には、IfModuleディレクティブは不要です。

<IfModule mod_deflate.c>

    AddOutputFilterByType DEFLATE text/text text/xml text/html text/css text/plain application/x-javascript application/javascript

</IfModule>

 

mod_filterを利用する方法

mod_filterを利用することで、xml、html、css、JavaScript、jsonなどのファイルを圧縮することができます。ApacheのバージョンによってFilterProviderの構文が異なります。2.4.4以降のバージョンを利用する場合には構文を確認して下さい。

<IfModule filter_module>

    FilterDeclare   COMPRESS

    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/xml

    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/html

    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/css

    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/plain

    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/x-component

    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/javascript

    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/json

    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xml

    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xhtml+xml

    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/rss+xml

    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/atom+xml

    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/vnd.ms-fontobject

    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $image/svg+xml

    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/x-font-ttf

    FilterProvider  COMPRESS  DEFLATE resp=Content-Type $font/opentype

    FilterChain     COMPRESS

    FilterProtocol  COMPRESS  DEFLATE change=yes;byteranges=no

</IfModule>

 

FilterDeclareディレクティブには、出力するフィルタを設定する。

FilterProvider、FilterChain、FilterProtocolディレクティブには、使用するフィルタ名を設定する。

FilterProviderディレクティブには、スマートフィルタのプロバイダを登録する。

2.4.4以降のバージョンとそれより前のバージョンで構文が異なるので構文を確認して下さい。