概要
S3などを使って静的なページでサイトを公開している場合、CloudFront Functionsを使うと、条件に一致する場合に別ページ(休業案内やメンテナンスページなど)へリダイレクトする仕組みをエッジ側だけで実現可能です。年末休業中にメンテナンスページに転送したいニーズが出てきたので、お試しで動かしてみました
Docs -> https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/cloudfront-functions.html
※ 注意点として、ページを開きっぱだとそのまま表示されたままになるので、ページからのAPI実行などは全て止められるわけではありません
実施内容
- CloudFront + S3(など)で静的サイトを配信している
- 普段は通常ページを見せたい
- 年末期間は特設ページへ 302 リダイレクトしたい
(今回は即席なのでIaCなどは使ってません...)
実装の考え方
- CloudFront の実行環境の時刻は UTC
- -> JST は UTC+9 なので「
getUTCHours() + 9」でおおよそ JST の時刻が出せる - -> 営業時間内ならそのまま
requestを返す - -> 営業時間外なら 302 レスポンス + Location ヘッダーを返す(特設ページはすでにある前提)
CloudFront Function のサンプルコード
runtime2.0を利用
// タイムスタンプに変換
const toJstTimestamp = (year, month, day, hour, minute) => {
return Date.UTC(year, month - 1, day, hour - 9, minute, 0);
};
function handler(event) {
const request = event.request;
// 年末年始の休業期間(JST)
// ここでは 2025-12-29 〜 2026-01-03 を休業とする
const CLOSED_START = toJstTimestamp(2025, 12, 29, 0, 0);
const CLOSED_END = toJstTimestamp(2026, 1, 3, 23, 59);
// 休業期間中に飛ばす先
const closedUrl = 'https://hogehoge.com/closed';
const nowMs = Date.now();
const isClosed = nowMs >= CLOSED_START && nowMs <= CLOSED_END;
// 休業期間外ならそのままオリジンへ
if (!isClosed) {
return request;
}
// 休業期間中は特設ページに 302 リダイレクト
return {
statusCode: 302,
statusDescription: 'Found',
headers: {
location: { value: closedUrl }
}
};
}
コンソールでの設定手順(AWS Consoleより)
- コンソールで CloudFront > Functions を開く
- Create function を押して名前を付ける
- 作成後、エディタが出るので先ほどのコードをペーストする
- 問題なければ Publish ボタンで関数を公開
- Functions の画面で Add association から既存のディストリビューションに紐づけて保村
まとめ
年末年始だけ CloudFront Functions でリダイレクトする簡易的な仕組みを入れてみました。IaC化や定数を外部かしてパラメータをバックエンドと連動させるなど改善できるポイントはいくつかあると思いますが、今回は簡易的な仕組みとして参考にいただければと思います!