CloudFront経由で配信しているコンテンツにBasic認証をかける

HTMLをCloudFront経由で配信することがあった
さらにアクセスする際にはBasic認証をかけたい!!

Lambda@Edgeを使うと実現できるという話を聞いたので実際にやってみた

S3の準備

任意の名前でバケットを作成する
今回はCloudFront経由でアクセスをさせるため、パブリックな設定やStatic website hostingなどの設定は必要ないです

index.htmlバケットのトップレベルにおいてS3側の準備は完了

Lambda関数の定義

CloudFrontのイベントをトリガーする際には現状はus-east-1で作成する必要があるようです

今回はランタイムでNode.jsで作成しました ロールはまだ作成していなければテンプレートから新しいロールを作成を選択して、ポリシーテンプレートから基本的な Lambda@Edge のアクセス権限 (CloudFront トリガーの場合)を選択します

関数は↓を使用しました

gist.github.com

保存した後はARNをどこかにメモしておきます

CloudFrontの設定

設定時のポイントとなる部分だけを書いていきます

  • Origin Domain NameでS3で作成したバケットを選択
  • Default Root Objectにindex.htmlを指定
    • この設定が入っていないと/にアクセスした際に403になってしまいます
  • Lambda Function AssociationsではCloudFront EventにViewer Request、Lambda Function ARNに先程とっておいてARNを指定します

これで作成したCloudfront経由でアクセスすると無事Basic認証を求められるはず