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 に掲載されているドキュメントをご確認ください。ご質問がございましたら、サポートチームまでお問い合わせください。