Fastly では Synthetic Response 機能を用いることで、オリジンに依存することなくエッジサーバーよりレスポンスを返すことができます。オリジンレスのアプリケーション開発や、オリジンダウン時のエラーページ生成に活用できます。

1. 基本的なSynthetic Response

Fastly ドキュメントの Creating the custom response カスタムレスポンスの作成 にあるとおり、Synthetic Response の作成はカンタン。

上記ドキュメントにしたがって、Fastly コントロールパネルの設定画面にて、HTMLのソースを入力し、条件を設定してください。オリジンレスのページが生成できます。

図1. Create a synthetic response でのレスポンス指定

2. 画像埋め込み

テキストのみの無味乾燥なレスポンスでは、サイトの中でそのページだけが、デザイン的に浮いてしまいます。画像ファイルを埋め込むことで、他のページと統一感のあるデザインにアップグレードしてみましょう。

画像ファイルの URL を HTML（例： <img src="/images/logo.png">）や CSS（例： background-image: url("/images/bg.png")）に指定すれば、埋め込み完了！

...といいたいところですが、画像の配信もオリジンレスにしなくて大丈夫ですか？オリジンダウン時にページは配信できても、埋め込まれた画像ファイルが配信不可となり、画像が表示されません。

図2. オリジンダウンで「壊れた」画像

3. Data URI で埋め込み画像をオリジンレス化

Data URI スキーム を用いると、別ファイルを参照する代わりに、BASE64でエンコードした画像をインラインで埋め込むことが可能です。

CSS 埋め込み例

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAKCAYAAACT+/8OAAAAEklEQVR42mP8z8AARAjAOFgFABmeE/cGzVQmAAAAAElFTkSuQmCC);

HTML 埋め込み例

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAKCAYAAACT+/8OAAAAEklEQVR42mP8z8AARAjAOFgFABmeE/cGzVQmAAAAAElFTkSuQmCC">

変換用ツールはオンラインで多数提供されていますが、ここでは2つ紹介しておきます。

• Data URI Scheme 変換
• data: URI Generator

4. Synthetic Responseのサイズ制限

Synthetic Responseのサイズには 64キロバイト の上限が設定されています。コントロールパネルにて、それをより大きい文字列を指定すると、超過部分を切り捨てた上で設定へ反映されます。

このサイズ制限に触れる場合には、複数の Synthetic Response に分割することで回避可能です。VCL ファイルそのものにも Fastly ではサイズ制限を設定しているため、分割による対応にも上限があります。ご注意ください。

※『日本語対応』『数値文字参照による日本語対応』は、Synthetic Response で Unicode (UTF-8) に対応したため、削除しました。Synthetic Response内で、UTF-8 にて日本語を直接記述することができます。Unicode in VCL (英文) をぜひご一読ください。