Nuxtアプリにおいて、キャッシュを利用するメリットについて

Question

NuxtアプリをPM2を用いてデプロイする際のことでお聞きしたいことがあります。
以下のNginxファイルは公式ドキュメントからの引用になります。

map $sent_http_content_type $expires {
    



"text/html"                 epoch;
    "text/html; charset=utf-8"  epoch



    

    

        ;
    default                     off;
}

server {
    listen          80;             # the port nginx is listening on
    server_name     your-domain;    # setup your domain here

    gzip            on;
    gzip_types      text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;

    location / {
        expires $expires;

        proxy_redirect                      off;
        proxy_set_header Host               $host;
        proxy_set_header X-Real-IP          $remote_addr;
        proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                          http://127.0.0.1:3000; # set the address of the Node.js instance here
    }
}

疑問な点なのですが、$expiresを調べてみますと、キャッシュの設定をする項目とのことなのですが、"text/html" をキャッシュするメリットはなんなのでしょうか...?
また、キャッシュの期限にepochとありますが、epochは一番最古の値を指定する項目であるとこちらに記載があったのですが、期限を現在の時間よりも前に指定するのは何故なのでしょうか。
どなたか、ご助言頂けましたら幸いです。

Answer 1

自分で一から構成を作るときにどう考えているのかなぁ、と設定を入れて行く感じで説明します。

まず、アプリケーション・サーバーを直接見せるのはあまり良くないのでリバプロとしてNginxを噛ませます。

なぜなら、(あれば)404のコントロールや、SSL処理などについては、大抵の場合はアプリケーション・サーバーよりも単純で高速なWebサーバーのほうが得意だからです。
アプリケーション・サーバーのスケールや分散、一時的なアクセス制限にも有利です。
なので、Nginxなどの何かをアプリサーバーの前に置きます。

これは、どの種類のファイルへのリクエストでも同様に処理します。

つぎに、ずっと変更がないファイルや、アプリケーションサーバーが一度生成してしまえばしばらくは変更がないなど、ブラウザやCDN、場合によってはWebサーバーでCacheするとアプリケーションサーバーが楽になってくれるファイルの事を考えます。

Nuxt.jsでアプリを作る場合、ベースのHTMLは一度生成されてしまえば変更されないものが多いのでHTMLはキャッシュしてしまえそうです。
とりあえず、その設定を入れます。

ブラウザへのキャッシュ指示ヘッダーには、以下のようなものがあります。

• キャッシュ有効期限の設定 Cache-Control / Expires
• キャッシュ対象の変更検知 ETag / Last-Modified

なお、 Cache-Control がなく、 Expires もなく Etag もなく Last-Modified もなければ、ブラウザはキャッシュを利用できません。
有効期限が切れている(もしくはどちらのヘッダもない)場合、変更検知を行い、キャッシュを使用するべきかを判断します。

有効期限の指定について、 Cache-Control は Expires ヘッダーよりも優先されます。
変更検知について、 ETag は Last-Modified ヘッダーよりも優先されます。

なので、手前側にある Nginx はリクエストを包括的に処理してしまうので、細かいコントロールが出来ません。
そこで、 Nginx には優先されない設定を入れます。

• Expires
• Last-Modified ※ ただし Nuxt.js はデフォルトで ETag を付けるので別になくても、Nginxのデフォルトでもよい

を設定しておき、アプリ側で

• Cashe-Control ※ 大体はNuxt.jsと組み合わせた Express などのサーバーFWで指定
• Etag ※ デフォルトで生成される／外したり、自分で計算したりはアプリ次第

を付けるようにします。

Expires には期間の指定が必要ですが、ここではいつまで有効なのかの考慮はアプリ側でするので、Ngix側 では考慮せずに、適当な過去の時間を指定しておきます。

この場合、Expiresはブラウザでは常に有効期限切れと判断して、LastModified や Etag から判定するようになります。

これにより、HTMLに関しては常に問い合わせるけど、変更を検知した場合にのみアプリサーバーで新しく作成したファイルを使用する。
という比較的無難な初期設定が出来上がるはずです。

といった感じで設定していると、質問の例のような形の設定が出来上がる気がします。

Comments

[jjj001]

ご回答ありがとうございます。
大変、勉強になりました。
度々の質問で恐縮なのですが、実は一点お聞きしたいことがあります。。
現在、pm2を使用し、「npm run start」の代わりに「pm2 start」コマンドを使用し、アプリを稼働させているのですが、こちら「 https://ja.nuxtjs.org/docs/2.x/get-started/commands/ 」公式ドキュメントによりますと、「nuxt start」コマンドは本番サーバーを稼働する為のコマンドと説明が記載されておりました。
ここでいう「本番サーバー」とは、「Node.js」のことなのでしょうか...?
自分としましては、「Node.js」 = アプリケーションサーバーといった認識でなのですが、そういった訳ではありませんでしょうか...?

[aya-eiya]

本番サーバーと呼ぶのはnuxt devで起動する開発サーバーの存在が前提となります。
両者ではデバッグ情報やビルドスイッチが異なります