【Ubuntu】Nginx でgzipとブラウザキャッシュを使う方法

Google PageSpeed Insightsでgzipとブラウザキャッシュが上手く有効化されてておらず、エラーになっていたので、設定しました。

nginxでgzipを有効化する。

JSやCSSにもgzipを適応させる場合、3行目のgzip_typesをコメントアウトする必要がありました。

location ~* \.(css|js)$ {:q
        gzip on;
        gzip_disable "msie6";
        gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}

以下のコマンドを実行し、Content-Encoding:gzipと表示されていれば成功です。

#curl -I -H 'Accept-Encoding: gzip,deflate' http://example.com/sample.js //jsファイルのパス
 
HTTP/1.1 200 OK
Server: nginx/1.10.3 (Ubuntu)
Date: Tue, 19 Jun 2018 01:44:38 GMT
Content-Type: application/javascript; charset=UTF-8
Last-Modified: Thu, 14 Jun 2018 02:23:34 GMT
Connection: keep-alive
ETag: W/"5b21d1a6-14180"
Strict-Transport-Security: max-age=15768000; includeSubdomains
Content-Encoding: gzip

ブラウザキャッシュの設定

autoptimizeプラグインでCSSやJSを圧縮した際、ブラウザキャッシュが上手く動作しなかったので以下のように修正。

location ~ .*\.(jpg|jpeg|gif|css|png|js|ico)$ {
                expires 7d;
}

以下のようにExpiresヘッダが出力されるようになれば完了です。

HTTP/1.1 200 OK
Server: nginx/1.10.3 (Ubuntu)
Date: Tue, 19 Jun 2018 02:06:18 GMT
Content-Type: application/javascript; charset=UTF-8
Last-Modified: Thu, 14 Jun 2018 02:23:34 GMT
Connection: keep-alive
ETag: W/"5b21d1a6-14180"
Expires: Tue, 26 Jun 2018 02:06:18 GMT
Cache-Control: max-age=604800
Strict-Transport-Security: max-age=15768000; includeSubdomains
Content-Encoding: gzip