5. まとめ

これで終わりです!Taco Labs で Fastly IO を正常に有効化し、設定できました。ぜひhttps://io.tacolabs.comへアクセスするか、またはこの作業で使用したドメイン名を参照し、画像読み込みの驚きの速さを確認してください。自分の努力をほめてあげてください!

ただし、カバーすべき項目はまだあります。まず、キャッシュから最適化された画像をパージする方法について理解する必要があります。また、トラブルに遭遇した場合に参照できる Fastly IO のトラブルシューティングの手順を説明する必要があります。最後に、Fastly IO の機能をさらに活かすのに役立つさらなるステップについてご説明します。

変換された画像をパージする

Fastly IO は、Fastly の Full-Site Delivery を使用して変換された画像をキャッシュしますが、最適化された画像のパージは、他のオブジェクトのパージとは少し違って機能します。その理由を理解するには、Fastly のネットワーク内で Fastly IO がどのように機能するかについて、もう少し詳しく知る必要があります。

オリジンサーバーから配信される画像は、シールドフェッチノードを 2 回通過します。元の画像と変換された画像は両方がシールドでキャッシュされますが、下記に示すように、変換された画像のみがエッジでキャッシュされます。

Fastly IO による画像のキャッシュプロセス

Fastly IO 設定を変更した後、パージする必要はありません。パージする必要があるのは、オリジンサーバーに保存されている画像が変更された場合のみです。元の画像とすべてのバリアントをパージするには、次のコマンドを使用します(パラメーターは含みません)。

1
$ curl -X PURGE https://example.com/image.jpg

変換された画像の単一のバージョンをパージすることはできません。また、変換された画像をパージすることなく、元の画像をパージすることはできません。

Fastly IO で問題をトラブルシューティングする

Fastly IO が期待する方法で機能しないというのは、イライラするものです。幸い、ほとんどの問題は、設定エラーに起因し、少し調べれば簡単に解決されます。Fastly IO で問題が発生した場合は、こちらを確認してください。

一般的な問題の解決策

Fastly IO が機能しない場合、次のことを確認します:

  • Fastly サポートは、サービスにおいて Fastly IO を有効にしていますか?
  • サービスにおいてシールドを有効にしていますか?
  • サービスに適切なヘッダーと条件を追加して、Fastly IO を有効にしていますか?
  • サービス設定を有効にしていますか?
  • Fastly CDN は、オリジンサーバーの画像アセットにアクセスすることができますか?
  • レスポンスにfastly-io-infoヘッダーが存在しますか?そのヘッダーが存在するということは、Fastly IO が有効で、機能していることを示しています。
  • レスポンスにfastly-io-warningまたはfastly-io-errorヘッダーが存在するか確認しましたか?これらのヘッダーの1つまたは両方が存在する場合、Fastly IO に問題があることを意味します。

変換の問題を修正する

Fastly IO の変換が機能しない場合、次のことを確認します:

他の問題を修正する

変換とは関係ない問題が発生している場合、以下を確認してください。

  • オリジンサーバーにパスされないクエリ文字列で問題が発生していますか?Fastly IO は、デフォルトですべてのクエリパラメーターをストリップしますが、X-Fastly-Imageopto-Apiヘッダーの値を変更して、その動作をオーバーライドすることができます。
  • Fastly IO に渡すパラメーターを公に非表示にしようとしていますか?変換クラスを使用します。
  • x-fastly-imageopto-montageヘッダーを使用していますか?その場合、他のすべての Fastly IO パラメーターとヘッダーは無視されます。
  • VCL を使用して IO クエリパラメーターをストリップまたは変更しようとしていますか?vcl_recv リクエストがエッジとシールド POP の両方にヒットした場合、2 回実行されます。vcl_recvでリクエストに対する変更がべき等であることを確認するか、またはif(fastly.ff.visits_this_service == 0){ }で変換をラップしてください。

トラブルシューティングの手順を経ても問題が解決されない場合、サポートチーム (support@fastly.com) までお問い合わせください。

結論

このチュートリアルでは、さまざまなトピックを扱いました。画像最適化の基本と、Fastly IO を使用するメリットについてお分かりいただけたと思います。Fastly サービスを更新して、デフォルトの Fastly IO の変換を適用しました。また、クエリ文字列を使用して画像の変換処理を適用する方法を学び、これらの変換処理をサポートするために Taco Labs の HTML を更新しました。

これで、ご自身の Web サイトや Web アプリケーションで Fastly IO の使用を開始するのに必要なことはすべて理解できたことになります。若干の調整が必要かもしれませんが、このチュートリアルで紹介された手順はあらゆる Web サイトやアプリケーションに適用できます。セットアップの際は、いつでもこのチュートリアルでご確認ください。皆さんがどのように Fastly IO を活用するのか楽しみです!

次の内容

Fastly のプロダクトと機能について詳しくみていきます。https://docs.fastly.comhttps://developer.fastly.comに関するドキュメントをご覧くださいご質問等がありましたら、サポートチーム (support@fastly.com) までご連絡ください。



Back to Top