LightFile Proxy 利用ガイド

CloudFront導入チュートリアル ​

CloudFrontとLightFile Proxyを接続し、運用を開始する方法を解説します。

ステップ 1 画像のWebP変換を行う ​

まずはCloudFrontで配信する画像をWebPに変換する方法を解説します。

導入前 ​

導入前はCloudFrontがオリジンサーバー(EC2やS3バケット)に直接リクエストを送信し、JPEG/PNG/GIF画像をキャッシュしつつ、ブラウザに配信しています。

導入後 ​

導入後はCloudFrontとオリジンサーバーの間にLightFile Proxyを配置し、JPEG/PNG/GIF画像をWebPに変換します。

LightFile ProxyはブラウザのWebP対応状況を判断し、非対応ブラウザの場合は従来のJPEG/PNG/GIF画像を配信します。

CloudFrontのキャッシュもWebP対応状況に応じて作られるため、画像データの混線はありません。

LightFile ProxyとCloudFrontの設定手順 ​

詳細は動画をご覧ください。(音声が出ます)

LightFile Proxy導入手順のポイント ​

  1. LightFile Proxyにオリジンルーティングを追加する。
    • x-routingヘッダにサイトに固有の識別子を指定する。
  2. CloudFrontにLightFile Proxyへのオリジンを追加する。
    • x-routingヘッダに同じ識別子を指定する。
  3. CloudFrontに画像用のビヘイビア(.jpgと.png)を追加し、オリジンをLightFile Proxyにする。
    • このときAcceptをキャッシュキーに加える。
    • それによりWebP対応状況に応じたキャッシュを持てる。

.jpegについて

サイトによってはJPEGの拡張子.jpegが混在する場合があります。その場合はビヘイビアとして*.jpegも別途追加してください。

なぜ x-routing を指定するのか ​

LightFile Proxyは、複数のCloudFrontディストリビューションの間で共有できます。

複数のディストリビューションからのリクエストに対し、どのオリジンサーバー/S3バケットから画像を取得するかを判別するため、x-routingリクエストヘッダを利用します。

ヘッダ名

x-routing というヘッダ名は便宜的なもので、CloudFrontからのリクエストとLightFile Proxyのオリジン設定で一致していれば他のヘッダ名(例 x-site)でも構いません。

オリジンがパブリックではないS3バケットの場合 ​

CloudFrontは一般公開されていないS3バケットもOAIやOACの仕組みにより、オリジンにすることができます。

LightFile Proxyではクロスアカウントアクセスなどの方法により、プライベートなS3バケットもサポートしています。詳しくは、プライベートなS3バケットをオリジンにする方法を参照ください。

ステップ 2 オリジングループ機能を使う ​

画像のWebPへの変換が確認できたら、CloudFrontのオリジングループ機能を必ず設定してください。運用の安全性が格段に向上します。

オリジングループ機能

複数のオリジンに優先順位をつけてグループ化し、ビヘイビア(今回は*.jpgと*.png)のオリジンに指定できる機能です。

オリジングループ利用前の問題点 ​

オリジングループを利用しないと、LightFile Proxyに問題が発生した際、サイトに画像が表示されない障害が発生します。

オリジングループ利用による改善 ​

オリジングループ機能を使うと、LightFile Proxyに異常が発生したときはCloudFrontがLightFile Proxyを迂回してオリジンを直接参照します。画像のWebPへの変換は行われないものの、画像が表示されない障害は回避できます。

オリジングループを設定する手順 ​

詳細は動画をご覧ください。(音声が出ます)

オリジングループ利用設定のポイント ​

  1. LightFile Proxyのオリジン設定変更。
    • 試行回数1、接続タイムアウト10、レスポンスタイムアウト15に変更する。
  2. オリジングループlightfile-proxyの追加。
    • 優先順位はLightFile Proxyオリジン → 元々のオリジンにする。
  3. CloudFrontの画像経路のビヘイビア(.jpgと.png)のオリジンを変更する。
    • オリジングループlightfile-proxyにする。

切り戻し ​

LightFile Proxyをアンインストールするには、これまでと逆の手順を行います。

  1. 画像ビヘイビア(.jpgと.png)を削除する。
    • 元から画像ビヘイビアがあった場合は、画像ビヘイビアのオリジンをオリジングループから元々のオリジンに戻す。
  2. オリジングループlightfile-proxyを削除する。
  3. LightFile Proxyオリジンを削除する。

CloudFrontとのAPI連携 ​

以上で最低限の導入手順は完了ですが、LightFile Proxyをフル活用するためCloudFront連携設定もぜひ行ってください。

さらに最適化するには ​

LightFile Proxyをさらに活用するには以下の項目も参照ください。