2. Fastly IO の設定

2 of 5

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

Fastly の CDN の紹介の続きから始めましょう。以前のチュートリアルが終了した際には、Fastly CDN を使用するように設定された、完全に機能する Web サイト (Taco Labs) ができていました。このチュートリアルでは、同じ Fastly サービスと設定を使用することから始めます。

注意

皆さまにお知らせしておくべきいくつかの変更を行いました。変更の具体的な内容は以下のとおりです。

  • Fastly サービスの設定を新しいサービスに複製
  • Taco Labs コードをフォークし、Web サイトを更新するために新しいブランチを作成
  • 新しい Amazon S3 バケットを作成
  • ルート 53 に関連する DNS レコードを持つ新しいドメイン (io.tacolabs.com) を追加
  • ドメインに新しい TLS 証明をプロビジョニング

設定とコードの機密保持のためにこれを行いましたが、Fastly の CDN の紹介チュートリアルを通じて使用した同じ Fastly サービスとドメインを使用し続けることができます。io.tacolabs.com でなく、既存のドメインを使用することを忘れないでください。

Fastly IO を有効にする

早速、アカウントで Fastly IO を有効にしてみましょう。Fastly のコントロールパネルにログインし、サービスの有効なバージョンを複製して、サイドバーからImage Optimizerを選択します。以下の画面が表示されます。

Fastly コントロールパネルで Fastly IO を有効にする

Contact me をクリックして、プロセスを開始します。Fastly チームが価格設定の詳細を提示し、お客様のアカウントに対して Fastly IO を有効にします。アカウントで Fastly IO を有効にすると、特定のサービスでいつ有効にするかを選択できます。その方法を知る前に、Fastly IO を使用するサービスでシールドが有効になっていることを確認する必要があります。

シールドが有効であることを確認する

Fastly IO を使用するサービスでは、シールドを有効にする必要があります。Fastly IO でシールドを使用すると、元の画像が1 回のみ変換され、レイテンシと必要なオリジンフェッチの数が削減されます。Fastly の CDN の紹介に沿って実行すると、サービスでシールドをすでに有効にしていることになります。

Fastly コントロールパネルで Origins ページにアクセスしてホストの詳細を表示することで、シールドが有効であることを確認できます。シールドが有効である場合、下記に示すように、指定されたシールド POP が表示されます。

Fastly コントロールパネルのシールド設定

ヒント

一般的に、オリジンに近いシールド POP を選択することをお勧めします。オリジンに近いシールド POP を選択するのに役立つドキュメントをご覧ください。

初めてオリジンシールドを有効にする場合は、Activate をクリックして、サービス設定の新しいバージョンを有効化します。

特定のサービスで Fastly IO を有効にする

サービスでシールドが有効になっていることを確認すると、その特定のサービスでイメージオプティマイザーを有効にする準備ができていることになります。これはいつでも、Edit configuration をクリックしてサービスをクローンし、新しいドラフトバージョンを作成することで実行できます。次に、Image Optimizer ページでスイッチをクリックして Fastly IO を有効にすると、準備は完了です。

特定のサービスで Fastly IO を有効にするスイッチ

スイッチをフリップすると、以下のように Fastly IO ページにデフォルト設定が表示されます。

デフォルトの Fastly IO 設定

Taco Labs でこれらの設定をカスタマイズする際に後で説明します。ここでは、Fastly コントロールパネルでこれらの設定を確認できれば、Fastly IO が有効になっていると考えて問題ありません。しかし、Fastly IO がサービスで機能する前に、私たちが行うべきことがあります。

Fastly IO ヘッダーとリクエスト条件を追加する

サービスに Fastly IO ヘッダーを追加することも、Fastly IO を有効にするのに必要な前提条件のひとつです。

Fastly コントロールパネルでヘッダーを設定することができます。Edit configuration をクリックしてサービスを複製し、新しいドラフトバージョンを作成します。次に、Content ページで Create a header をクリックします。下記に示すようにヘッダーを作成ページが表示されます。

Fastly IO のヘッダーを作成する

以下の要領で、Create a headerページの各フィールドに入力します。

  • Name フィールドに分かりやすいヘッダー名を入力します。
  • 次にType / Actionメニューから、RequestSetを選択します。
  • Destination フィールドに http.x-fastly-imageopto-api と入力します。
  • Sourceフィールドに"fastly"と入力します。
  • Ignore if setメニューからNoを選択します。
  • Priority フィールドに 1 を入力します。

Create をクリックしてヘッダーを保存します。

次に、画像アセットのみが Fastly IO を介してルーティングされるようにリクエスト条件を作成する必要があります。Fastly IO を介して画像以外のコンテンツを送信した場合、最適化はされませんが、料金は発生します。画像のみを最適化するためには、作成したヘッダーの横にあるAttach a conditionをクリックして条件を作成します。下記に示すように、新しい条件を作成ページが表示されます。

Fastly IO の条件を作成する

以下の要領でCreate a new condition設定画面の各フィールドに入力します。

  • Typeメニューから、Requestを選択します。
  • Nameフィールドに、分かりやすい条件の名前を入力します。
  • Apply if フィールドに、req.url.ext ~ "(?i)^(gif|png|jpe?g|webp)$" と入力します。

Save and apply to Fastly Image Optimizer をクリックします。次に、Activate をクリックして、サービス設定を有効化します。

代案として VCL を検証する

Fastly の CDN の紹介では、Web インターフェイスが当社サービスの Varnish Configuration Language (VCL) コードを変更することを学びました。ヘッダーと条件を作成したときに、これが起こりました。コントロールパネルには複雑な仕組みが隠れています。見えないところで、取り込んだ設定を使用してカスタム VCL コードを生成し、サービス設定を有効化するたびにその生成されたコードが使用されます。

VCL を使用する経験が増えるにつれて、より自信を持って VCL を直接変更できるようになります。例えば、このガイドを読み進めていく際、コントロールパネルのコントロール機能を使用する代わりに、ヘッダーと条件を VCL に追加することができます。それがどのように機能するかを見てみましょう。

注意

これは例に過ぎません。コントロールパネルを使用してヘッダーと条件をすでに追加したので、これらの手順に従う必要はありません。しかしこれらの手順から、コントロールパネルの代わりに VCL を使用して簡単にタスクを実行できることが分かります。

Fastly コントロールパネルを使用して、VCL スニペットを作成することができます。Edit configuration をクリックしてサービスを複製し、新しいドラフトバージョンを作成します。VCL スニペットページで、Create snippet をクリックします。スニペットに名前を追加し、タイプにwithin subroutineを選択し (recv (vcl_recv))、以下の VCL コードをコピー&ペーストします。

1if (req.url.ext ~ "(?i)^(gif|png|jpe?g|webp)$" {
2 set req.http.x-fastly-imageopto-api = "fastly";
3}

Fastly IO の VCL スニペットを作成する

この VCL を追加すると、前のセクションで行った、コントロールパネルでヘッダーと条件を追加する手順と同じ効果があります。前述したように、実際にこの VCL をサービスに追加することはしません。Cancel をクリックしましょう。

Fastly IO が機能していることを確認する

シールドを有効にし、Fastly IO に必要なヘッダーと条件を追加しました。これで、Fastly IO がサービスで機能しているかどうかを確認できます。

$ curl -sI "https://io.tacolabs.com/assets/tacos.jpeg?width=200"

このコマンドは、Taco Labs Web サイトから画像を読み込み、Fastly IO を使用してリサイズします。?width=200パラメーターは、Fastly IO に画像の幅を200 ピクセルにリサイズするように指示します。出力で以下のように表示されます:

fastly-io-info: ifsz=98106 idim=720x467 ifmt=jpeg ofsz=12494 odim=200x130 ofmt=jpeg

すべてが機能している場合、ターミナルコマンドの出力には画像の寸法 ( odim) が含まれ、幅は200に設定されます。これで、Fastly IO がサービスで有効になり、画像を変換する準備ができました。


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

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