2. Fastly IO の設定

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

Fastly IO を有効にする

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

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

Contact me ボタンをクリックすることでプロセスを開始できます。Fastly チームが価格設定の詳細を提示し、お客様のアカウントに対して Fastly IO を有効にします。サービスで Fastly IO が有効になると、以下のようなデフォルト設定が Fastly IO のページに表示されます。

デフォルトの Fastly IO 設定

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

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

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

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

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

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

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

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

Fastly コントロールパネルでヘッダーを設定することができます。Edit configurationボタンをクリックして、サービスを複製し、新しいドラフトバージョンを作成します。次に、コンテンツページで、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 に追加することができます。それがどのように機能するかを見てみましょう。

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

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

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

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

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

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

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

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

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

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



Back to Top