イメージオプティマイザーの VCL ボイラープレート

      Last updated August 07, 2019

    Fastly イメージオプティマイザー (IO) をカスタム VCL と共に利用する場合は、IO VCL ボイラープレートの利用を考慮してください。このボイラープレートは、IO 用に特化して設計されています。また、デフォルトの VCL ボイラープレートを IO と共に利用した場合に起こり得るいくつかの潜在的な課題についても修正しております。

    IO VCL ボイラープレート

    IO VCL ボイラープレートをご利用になる前に、イメージオプティマイザーのドキュメントおよびカスタム VCL に記載されている内容を再度ご確認ください。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    
    sub vcl_recv {
    #FASTLY recv
      if (req.method != "HEAD" && req.method != "GET" && req.method != "FASTLYPURGE") {
        return(pass);
      }
    
      # Enable IO for image file-types
      if (req.url.ext ~ "(?i)^(?:gif|png|jpe?g|webp)$")  {
        set req.http.X-Fastly-Imageopto-Api = "fastly";
      }
    
      return(lookup);
    }
    
    sub vcl_fetch {
    #FASTLY fetch
    
      # Unset headers which reduce cacheability for images
      if (req.http.X-Fastly-Imageopto-Api) {
        unset beresp.http.Set-Cookie;
        unset beresp.http.Vary;
      }
    
      # Check origin caching headers and override / apply defaults
      if (beresp.http.Expires || beresp.http.Surrogate-Control ~ "max-age" || beresp.http.Cache-Control ~ "(s-maxage|max-age)") {
        # Keep origin TTL
    
      } else {
        # Apply a default where origin does not provide TTL
        if (beresp.status == 200) {
          set beresp.ttl = 604800s; # 7 days
          set beresp.http.Cache-Control = "max-age=604800, public";
    
          # Apply a longer default TTL for images
          if (req.http.X-Fastly-Imageopto-Api) {
            set beresp.ttl = 2592000s; # 30 days
            set beresp.http.Cache-Control = "max-age=2592000, public";
          }
    
        } else {
          # Apply short TTL for non-200 responses
          set beresp.ttl = 60s;
        }
      }
    
      return(deliver);
    }
    
    sub vcl_hit {
    #FASTLY hit
    
      return(deliver);
    }
    
    sub vcl_miss {
    #FASTLY miss
    
      return(fetch);
    }
    
    sub vcl_deliver {
    #FASTLY deliver
      return(deliver);
    }
    
    sub vcl_error {
    #FASTLY error
    }
    
    sub vcl_pass {
    #FASTLY pass
    
    }
    
    sub vcl_log {
    #FASTLY log
    }
    

    IO VCL ボイラープレートのカスタマイズについて

    IO VCL ボイラープレートを変更する前にこのセクションをご確認ください。

    オリジンシールド

    IO を利用する場合には、オリジンシールドを必ずご利用ください。画像の特定バリエーションがキャッシュされてない場合、シールディング POP はイメージオプティマイザー経由で、オリジナル画像を取得するためにオリジンサーバーにリクエストを送信します。オリジンシールドが重要となる理由は、シールド POP でオリジナル画像と画像バリエーションをキャッシュさせることができるためです。オリジンシールドを有効化しない場合には、より多くのリクエストがオリジンサーバーに送られることになります。

    画像へのリクエストに IO を制限する方法

    最も容易に画像以外のファイルへのリクエストを IO に送るのを防ぐには、ファイル拡張子により当該ヘッダー付与を制限することです。

    1
    2
    3
    4
    5
    6
    
    sub vcl_recv {
      if (req.url.ext ~ "(?i)^(?:gif|png|jpe?g|webp)$") {
        set req.http.X-Fastly-Imageopto-Api = "fastly";
      }
      return(lookup);
    }
    

    もしオリジナル画像がファイル拡張子がない場合や、有効なファイル拡張子がない場合には、別の方法を用いて対応する必要があります。1つな有効な方法としては、パスにより画像を特定することです:

    1
    2
    3
    4
    5
    6
    
    sub vcl_recv {
      if (req.url.path ~ "/images/") {
        set req.http.X-Fastly-Imageopto-Api = "fastly";
      }
      return(lookup);
    }
    

    他の方法としては、画像ファイルのみを配信する専用サービスを用意することです。

    X-Fastly-Imageopto-Api header

    IO へのリクエストには、エッジ及びシールディング POP 両方で X-Fastly-Imageopto-Api ヘッダーを無条件に設定する必要があります。ヘッダーの詐称を防ぐため、送信元からの当該ヘッダーはデフォルトで削除されます。エッジのみで適用 (if (!req.http.Fastly-FF) 条件で適用) をした場合には、予期せぬ動作になる可能性があります。IO 有効か無効かでキャッシュキーが異なるため、エッジのみでヘッダーを適用した場合には、同じリクエストでシールド POP とエッジ POP で違うキャッシュキーになる可能性があります。

    クエリーパラメータのパススルー

    デフォルトでは、IO API に含まれないどのようなクエリーパラメータもオリジンサーバーを保護するため、 master vcl_recv で取り除きます。クエリーパラメータを追加することは、キャッシュキーの観点からすると各クエリーパラメーター毎に画像バリエーションが存在することになります。

    クエリーパラメータのパススルーの無効化 (デフォルト) の場合には、次のような状態になります:

    1
    2
    3
    
    Fastly:    ?width=100&something=else
    Fastly IO: ?width=100
    Origin:    [none]
    

    クエリーパラメータのパススルーの有効化をした場合には、次のような状態になります:

    1
    2
    3
    
    Fastly:    ?width=100&something=else
    Fastly IO: ?width=100&something=else
    Origin:    ?something=else
    

    クエリーパラメータのパススルーを有効にすることは、オリジンサーバーへの攻撃を生む可能性があります。このため、クエリーパラメータのパススルーは、次のヘッダを使うことで明確に選択していただいた場合にのみ許可されます:

    1
    
    set req.http.X-Fastly-Imageopto-Api = "fastly; qp=*";
    

    デフォルト TTL

    標準の VCL ボイラープレートでは、デフォルト TTL として3600秒が適用されてます。 画像コンテンツに対しては、より長い有効期限を適用することが理想的といえます。IO を利用する場合、短い TTL が悪影響を及ぼす可能性があります。キャッシュの無効化によるオリジンサーバーからの画像取得だけではなく、全ての画像バリエーションが無効化されるため、再処理が実行され、結果としてキャッシュミスリクエストの処理遅延が増加します。

    Back to Top