5. まとめ

5 of 5

このページは、Fastly イメージオプティマイザーの導入ガイドの一部です。同ガイドは、実際のWebサイトに Fastly のイメージオプティマイザー (Fastly IO) をセットアップする方法を分かりやすくステップバイステップで解説するチュートリアルです。このチュートリアルでは、Fastly CDN 導入ガイドでご紹介した概念をベースに、前に例として使用した静的Webサイト「Taco Labs」の画像を最適化する手順について解説します。詳細については、こちらをご覧ください。

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

$ 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){ } で変換をラップしてください。

トラブルシューティング手順を実行しても問題が解決しない場合は、サポートチームまでお問い合わせください

最後に

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

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

次のステップ

Fastly のプロダクトと機能についてより詳しく理解するため、https://docs.fastly.com および https://developer.fastly.com に掲載されているドキュメントをご確認ください。ご質問がございましたら、サポートチームまでお問い合わせください。


翻訳についての注意事項
このガイドは役に立ちましたか?

このフォームを使用して機密性の高い情報を送信しないでください。サポートが必要な場合は、サポートチームまでご連絡ください。このフォームは reCAPTCHA によって保護されており、Google のプライバシーポリシー利用規約が適用されます。