CloudFront Functions を使ってリダイレクト処理をしてみた
CloudFront Functions を触ったことが無かったので、以下公式のチュートリアルをやってみました。
チュートリアルの内容は、CloudFront の URL にアクセスすると、別のサイトにリダイレクトするというものです。
やってみた
前提準備（CloudFront + S3 環境の作成）
以下ブログの「S3 バケットの設定」および「CloudFront 設定」の項目を参考に、CloudFront + S3 環境を作成しておきます。
以下のように、CloudFront のディストリビューションドメイン名にアクセスしたときに S3 にアップロードした index.html の内容が表示されていれば準備 OK です。
CloudFront Functions 作成
CloudFront コンソールより「関数を作成」します。
適当な名前を指定し、作成します。
作成できました。
続いて、以下のコードをコピーします。
（本コードは、公式ドキュメントに記載されているコードをコピーしたものです。location の値のみ クラスメソッドの DevelopersIO ブログの URL を指定しています。）
function handler(event) {
// NOTE: This example function is for a viewer request event trigger.
// Choose viewer request for event trigger when you associate this function with a distribution.
var response = {
statusCode: 302,
statusDescription: 'Found',
headers: {
'cloudfront-functions': { value: 'generated-by-CloudFront-Functions' },
'location': { value: 'https://dev.classmethod.jp/' }
}
};
return response;
}
関数の詳細画面に移動し、既存コードの代わりに上記コードを貼り付け、「変更を保存」します。
コードは作成できたので、「発行」タブに移動し、「関数を発行」します。
すると、「関連付けられているディストリビューション」が表示されるので、「関連付けを追加」します。
ポップアップが表示されたら、前項にて作成済みの CloudFront ディストリビューションを選択し、その他は以下設定にし、関連付けます。
関連付けることができました。これで設定は全て終了です。
（※関数の関連付けが終わっても、ディストリビューションのデプロイが完了するまで数分かかります。動作確認はしばらく待った後に行なってください。）
ちなみに、関連づけられた関数は、ディストリビューションのビヘイビアの編集画面を表示し、
「関数の関連付け - オプション」からも確認ができます。
動作確認
前項までで、CloudFront Functions を作成し、CloudFront ディストリビューションに関連づけるところまで行いました。
最後に、CloudFront ディストリビューションドメイン名にアクセスしたときにちゃんと別のサイトにリダイレクトされるのか確認します。
ディストリビューション名をコピーします。
コピーした URL を Chrome のシークレットウィンドウで開いてみます。
その結果、S3 にある index.html ではなく、関数コードで指定したクラスメソのブログサイトにリダイレクトされました。ちゃんと動いてそうですね。
これで検証は以上です。
終わりに
今回は CloudFront Functions のチュートリアルをやってみました。Functions を使うことで簡単な処理であれば工数を少なく、作成することができそうで驚きました。
本チュートリアルは30分〜1時間もあればすぐにお試し可能だと思いますので、Functions 使ったことないという方はぜひ取り組まれてみるといいかもと思いました!
本記事がどなたかのお役に立てば幸いです。
参考情報
