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

$ 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 の制限と制約のリストを確認しましたか？
• Fastly IO パラメーターの処理順序を確認しましたか？
• パラメーターに許可された値を使用していますか？確認するために、Fastly IO のドキュメントを再確認してください。
• クエリ文字列を適切にフォーマットしましたか？適切な場所に適切な文字が使用されていることを再確認してください。
• 想定通りに変換が正確に機能しない場合、別の変換処理を試してみましたか？例えば、cropの代わりに、fitを使用することができます。

他の問題を修正する

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

• オリジンサーバーにパスされないクエリ文字列で問題が発生していますか？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 に関するドキュメントをご覧ください。ご質問がございましたら、サポートチームまでお問い合わせください。