Ubuntu18.04でApache静的ファイルキャッシングを最適化する方法

このガイドでは、Apacheを使用してヘッダーの有効期限設定を正しく構成し、画像、CSS、JavaScriptファイルなどの静的ファイルを提供する際のWebサーバーのパフォーマンスを最適化する方法を示します。

ファイルをキャッシュする最小の日付を設定することにより、サーバーの多くの帯域幅が節約されます。その結果、クライアントブラウザのキャッシュを使用することで、ホストされているWebサイトの読み込みが速くなります。

まず、SSH接続を介してサーバーに接続します。まだ行っていない場合は、SSHで安全に接続するために、ガイドに従うことをお勧めします。ローカルサーバーの場合は、次の手順に進み、サーバーのターミナルを開きます。

必要なモジュールを有効にする

必要なヘッダーの送信を有効にするには、最初に関連するApacheモジュールを有効にします。

$ sudo a2enmod expires

次に、サービスを再起動します：

$ sudo service apache2 restart

モジュール構成モジュール構成は次の場所に挿入できます：

Apache構成の場合：Apacheによって制御されるすべてのサイト（仮想ホストと非仮想ホスト）に継承されます
仮想ホストコンテナ内
ディレクティブまたは.htaccessファイル内

次の例では、デフォルトのサイト構成に挿入されています：

$ sudo vim /etc/apache2/sites-available/000-default.conf

次に、次の構成を追加します。

<IfModule mod_expires.c>

          <FilesMatch "\.(jpe?g|png|gif|js|css)$">

                      ExpiresActive On

                      ExpiresDefault "access plus 1 week"

          </FilesMatch>

</IfModule>

クライアントブラウザで保持する必要のあるファイル（この場合はcss、jpg、png、gif、js）をFilesMatchディレクティブで指定します。hile、ExpiresDefaultを使用して、保持する期間（この例では、1週間）が示されています。

変更を適用するには、Apacheを再起動します。

$ sudo service apache2 restart

FilesMatchおよびExpiresDefaultメソッドに加えて、ExpiresByTypeを使用して、すべてのタイプのファイルのヘッダー有効期限を設定できます。例：

<IfModule mod_expires.c>

 ExpiresActive on
 ExpiresByType image/jpg "access plus 60 days"
 ExpiresByType image/png "access plus 60 days"
 ExpiresByType image/gif "access plus 60 days"
 ExpiresByType image/jpeg "access plus 60 days"
 ExpiresByType text/css "access plus 1 days"
 ExpiresByType image/x-icon "access plus 1 month"
 ExpiresByType application/pdf "access plus 1 month"
 ExpiresByType text/javascript "access plus 1 week"

</IfModule>

この方法を使用すると、mime-type application / javascriptを挿入しないことで、キャッシュの期間をより細かく制御でき、Ajaxデータのキャッシュを取得できます。

どちらのディレクティブでも、キャッシュの期間を示す構文は同じです。つまり、次のようになります。

“[base] plus [valore] [tipo] [valore] [tipo] [valore] [tipo] …”

基本値は次のいずれかになります。

アクセス：クライアントリクエスト日
変更：ファイルの変更日

タイプには次の値を指定できます：

年：年
月：月
週：週
日：日
時間：時間
分：分
秒：秒

構成の例は次のとおりです。

# One year cache expiry 
ExpiresByType image/jpeg "access plus 1 year"

#Furthermore, more than one unit of measurement in sequence can be added. For example:

# Set 1-month, 15- day and 2-hour expiry
ExpiresByType text/html "access plus 1 month 15 days 2 hours"

# Cache expiry from the file modification date more than 5 hours and 3 minutes 
ExpiresByType image/gif "modification plus 5 hours 3 minutes"

キャッシュされたファイルの内容を変更する必要がある場合、キャッシュ時間が経過するまで、後者はクライアントによってダウンロードされないことに注意してください。これにより、Webサイトが誤動作する可能性があります。

クライアントに以前に保存されたキャッシュを無視させることはできませんが、この問題を回避するためにいくつかの手法を使用できます。

よく使用される方法は、変更したばかりのファイルの名前を変更するか（たとえば、style.cssからstyle-v2.cssに）、バージョン番号を追加してリンクを変更することです。たとえば、次のようになります。

<script src="https://www.domain.com/js/myScript1.js"></script>

次のように：

<script src="https://www.domain.com/js/myScript1.js?v=3.1"></script>