![[CloudFront Functions] KeyValue ストアのチュートリアルを参考にリダイレクト処理をやってみた](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-f66629e23bafcf47fa6477fd0349a4f7/3e371b05917375d87daf613d54a600d8/amazon-cloudfront?w=3840&fm=webp)
[CloudFront Functions] KeyValue ストアのチュートリアルを参考にリダイレクト処理をやってみた
CloudFront Functions について、以下の公式チュートリアル「キー値を含む関数を作成する」をやってみました。
やってみた
前提準備
以下ブログに沿って CloudFront Functions 環境を準備します。
ディストリビューションドメイン名にアクセスしたときに、
以下のようにクラメソの DevelopersIO ブログページが表示されていれば準備 OK です。
KeyValue ストアを作成する
CloudFront 関数画面の KeyValueStores タブを選択し、「Create KeyValueStore」を選びます。
適当な名前を指定し、ストアを作成します。
作成できました。
ストアに Key と Value のペアを追加する
前項にて作成済みの KeyValue ストアの詳細ページを開き、「Key value pairs」セクションの「Add key value pairs」を選びます。
右上の「Add pair」より任意の Key と Value のペアを追加し、「Save changes」を選びます。
ここでは、以下のクラメソ技術ブログと採用ページの URL を記載しています。
追加できました。
KeyValue ストアを関数に関連付ける
作成済みの関数のページに移動し、「Associate existing KeyValueStore」を選びます。
ポップアップが出るので関連付けたいストアを選び、「Associate KeyValueStore」を選択します。
ストア（名称: TestStore）を関連付けることができました。
なお、関連づけると、「Example function」タブにサンプルコードが記載されます。この後、こちらのコードを参考にコードを修正していきます。
関数コードを修正する
前述の「Example function」のコードを参考にコードを修正します。
処理は以下の流れです。デフォルトでは、クラメソ企業ページが表示され、URLパスによっては技術ブログや採用ページを表示するようにしてみました。
- page_value 変数にはデフォルトでクラメソ企業ページの URL ( https://classmethod.jp/ ) を入れておく
- クライアントがアクセスする URL パスから key 文字列を取得する
- key 文字列が
dev,recruitなど KeyValueストアに格納されているものは、それぞれのページ（クラメソ技術ブログ, 採用サイト）の URL が page_value に上書きされる - key 文字列がストアに無い場合は、デフォルトのクラメソ企業ページのまま
- location 句で page_value にリダイレクトする
import cf from 'cloudfront';
// This fails if there is no key value store associated with the function
const kvsHandle = cf.kvs();
async function handler(event) {
// Use the first part of the pathname as key, for example http(s)://domain/<key>/something/else
const key = event.request.uri.split('/')[1]
let page_value = "https://classmethod.jp/" // Default value
try {
page_value = await kvsHandle.get(key);
} catch (err) {
console.log(`Kvs key lookup failed for ${key}: ${err}`);
}
var response = {
statusCode: 302,
statusDescription: 'Found',
headers: {
'cloudfront-functions': { value: 'generated-by-CloudFront-Functions' },
'location': { value: page_value }
}
};
return response;
}
修正したら、コード右上にある「変更を保存」します。
変更を保存後、発行タブから「関数を発行」します。
（今回は検証なのでコード修正後、すぐに関数を発行していますが、Functions にはテスト機能もあるので適宜テストするようにしましょう）
動作確認
最後に Chrome のシークレットウィンドウで動作確認をします。
まず、CloudFront のディストリビューションドメイン名にそのままアクセスしてみます。
クラメソ企業ページの URL ( https://classmethod.jp/ ) が表示されました。
次に ディストリビューションドメイン名/recruit にアクセスしてみます。
採用ページ（https://careers.classmethod.jp/requirements/ )が表示されました。
最後に ディストリビューションドメイン名/dev にアクセスします。
すると、クラメソ技術ブログ（https://dev.classmethod.jp/ ）が表示されました。
上記結果より関数コードの処理が適切に動いていそうですね。検証は以上です。
終わりに
今回は、以下公式ドキュメントのチュートリアルの内容を試してみました。
KeyValue ストアって何？と思っていましたが、関数コードから参照できるキー値のペアということがわかりました。個人的には、環境変数に近いイメージかなと思います。
本ペアを使うことでコードが簡潔に書けるだけでなく、公式ドキュメントの通り、以下のようなユースケースに使えますね。とても便利な機能だと思いました。
ユースケース
キーと値のペアは、以下の例に示すように使用できます。・URL の書き換えまたはリダイレクト — キーと値のペアは、書き換えられた URL またはリダイレクト URL を保持できます。
・A/B テストと機能フラグ – ウェブサイトの特定のバージョンにトラフィックの割合を割り当てることで、テストを実行する関数を作成できます。
・アクセスの認可 – 独自に定義した条件とキーバリューストアに保存したデータに基づいて、リクエストを許可または拒否するアクセスコントロールを実装できます。
本記事がどなたかのお役に立てば幸いです。
参考情報
