fastly

FastlyでESI(Edge Side Includes)を利用する

FastlyではESI(Edge Side Includes)を利用できます。

CDN側でパーツ化されたHTMLやJSONなどを結合してレスポンスとして返してくれます。

SEO要件などでAjaxを利用できない場面、キャッシュ切れのタイミングが異なる情報で利用できる場面があるかと思います。


Paid Accountではない状態でESIを利用する

無料の状態だとクライアントへのレスポンスをCDN側でgzip圧縮することができません。

また、Originへのレスポンスが圧縮されていると、ESIを利用することはできません。

VCL Snippet

sub vcl_fetch {

esi;
}

OriginのHTML


index.html

<!DOCTYPE html>

<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
</head>
<body>
<h1>Hello ESI</h1>
<esi:include src="/child.html" /><br>
<esi:include src="/hoge.txt"></esi:include>
</body>
</html>


child.html

<b>child</b>



hoge.txt

hoge


クライアントにレスポンスされるHTML


index.html

<!DOCTYPE html>

<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
</head>
<body>
<h1>Hello ESI</h1>
<b>child1</b>
<br>
hoge

</body>
</html>



Paid AccountでTLSの契約をした状態でESIを利用する

今まではESIを利用した状態でクライアントへのレスポンスをCDN側でgzip圧縮することはできませんでしたが、サポートに連絡することによりESIを利用した状態でもgzip圧縮できるようにしてもらえます。

本機能を有効にしてもらうとCDNからのレスポンスの圧縮をbrotliも対応してくれるようです。 2018/08/17追記

詳しくはコミュニティの情報を参考にしてください。

また、Originへのレスポンスが圧縮されていると、ESIを利用することはできません。

VCL Snippet

sub vcl_fetch {

if (beresp.http.Content-Type ~ "htm") {
esi;
}
#FASTLY fetch
}

sub vcl_miss {
unset bereq.http.accept-encoding;
#FASTLY miss
}

sub vcl_pass {
unset bereq.http.accept-encoding;
#FASTLY miss
}

sub vcl_deliver {
if (req.is_ssl) {
set resp.http.x-compress-hint = "on";
}
#FASTLY deliver
}


参考文献