【CloudFront】index.html を省略してサブディレクトリへアクセスできるようにする

Terraform

 

index.html を省略して

CloudFrontのサブディレクトリへアクセスしたときにindex.htmlを表示させたい!

 

CloudFrontにデフォルトディレクトリインデックスというものを実装して実現していきます。

 

Terraformを使って設定していきます

・バージョン

 

 

index.html を省略してルートURLにアクセスする方法は↓をご覧ください

 

現状

 

CloudFrontのオリジンにしているS3バケットにはこんな感じでindex.htmlを配置しています

 

aboutというサブディレクトリにアクセスした場合、index.htmlを指定しないと表示しません

 

ただ、デフォルトルートインデックスにindex.htmlを設定しているため、

ルートURLにアクセスした場合にはindex.htmlが返ってきます

 

デフォルトディレクトリインデックスを実装するにあたって、
デフォルトルートオブジェクトが設定されている必要はない。

 

CloudFront Functions とは?

 

まずは、デフォルトディレクトリインデックスの実装に必要なCloudFront Functionsについて。

 

特定のイベントタイプに対して、事前に定義しているJavaScriptの関数を実行できる機能のこと。

 

イベントタイプには2種類あり、

  • ビューワーリクエスト:ビューワーからリクエストを受信したとき
  • ビューワーレスポンス:ビューワーにレスポンスを返す前

 

リクエスト(レスポンス)ヘッダーの操作やリダイレクト処理などを実現できます。

 

公式ドキュメントは↓です。目を通してみるといいと思います

 

デフォルトディレクトリインデックスとは??

 

デフォルトルートオブジェクトを設定しただけでは、サブディレクトリに対してはエラーを返してしまいます。

 

そこで、デフォルトディレクトリインデックスを実装し、
デフォルトインデックスファイル(今回は index.html)を返すようにします。

 

アーキテクト図はこちらです

引用:https://aws.amazon.com/jp/blogs/news/implementing-default-directory-indexes-in-amazon-s3-backed-amazon-cloudfront-origins-using-cloudfront-functions/

 

例えば、https://example.com/about にアクセスするとします。

  1. Cloudfront Fuctions で https://example.com/about/index.html に書き換え
  2. CloudFrontやオリジンからレスポンスを返す

 

このような機能(デフォルトディレクトリインデックス)を実装していきます。

 

CloudFront Functions の料金

 

公式サイトより、

100 万件の呼び出しあたり 0.10 USD です (1 回の呼び出しごとに 0.0000001 USD)。

 

また、無料枠として

各月 2,000,000 件の CloudFront Function 呼び出し

が設けられています。

 

実装

CloudFront Functions

 

CloudFront Functions で実行する関数はこちらのコードをそのまま使います

jsファイルを作成し、tfファイルから参照するようにします。

 

 

if文を使ってリクエストURIをindex.html を付与したものに書き換えます。

 

Terraform

 

 

aws_cloudfront_distribution > default_cache_behavior ブロック内で
CloudFront Functionsを紐づけていきます

プロパティ 説明
event_type どのイベントタイプで実行するか
viewer-request に対して関数を実行します
function_arn 後ほど定義するCloudFront Functions のARNを指定します

 

aws_cloudfront_function にて、CloudFront Functions を定義します。

プロパティ 説明
name CloudFront Functions の名前
runtime ランタイム。2023/07現在、cloudfront-js-1.0 のみ指定可能
comment コメント。
publish 関数をデプロイするかどうか。デフォルトはtrue。
テストなどをしたい方はデプロイしない(false) ことも可能。
code 関数のソースコード。先ほど作成したjsファイルを相対パスで指定。

は必須項目

 

plan , apply

 

 

ダウンタイムはなかったと思います。。。

 

動作確認

 

サブディレクトに対してもindex.htmlが返ってくればOKです!

 

参考文献

 

CloudFront Functions を使用して Amazon S3 の Amazon CloudFront オリジンでデフォルトディレクトリインデックスを実装 | Amazon Web Services
Amazon CloudFront Functions により、以前は AWS Lambda@Edge でしか
CloudFront Functions を使用してエッジでカスタマイズする - Amazon CloudFront
CloudFront Functions を使用して、Amazon CloudFront ディストリビューションをカスタマイズします。
料金 - Amazon CloudFront | AWS
AWS 無料利用枠を含む、Amazon CloudFront のグローバルコンテンツ配信ネットワーク (CDN) の料金の詳細。前払い料金や固定基本料金、長期使用契約、動的コンテンツの割増料金はありません。また、使用開始時の専門的なサービスも不要です。
Terraform Registry
Terraform Registry

コメント

タイトルとURLをコピーしました