CloudFront と Lambda@Edge による S3 内コンテンツの Basic 認証を Serverless Framework で実現する

はじめに

技術一課の山中です。
S3 のコンテンツに対して CloudFront と Lambda@Edge を利用して Basic 認証をかけたいとの要望があったので、検証してみました。

事前準備

S3 バケットの作成

静的コンテンツを配置するための S3 バケットを作成してください。
作成後、配信するコンテンツを配置します。

Serverless Framework のインストール

以下を実行し Serverless Framework をインストールしておいてください。

$ npm install serverless -g

セットアップ

Serverless Framework の設定

今回は以下 のプラグインを利用します。

• GitHub – silvermine/serverless-plugin-cloudfront-lambda-edge: Adds Lambda@Edge support to Serverless

このプラグインを利用することで Serverless Framework で Lambda@Edge をデプロイすることができます。

npm install --save-dev --save-exact @silvermine/serverless-plugin-cloudfront-lambda-edge

具体的な利用方法は、プラグインの README を参照ください。
serverless.yml は以下のように記載しました。

また、 config.yml を作成しバケット名を外出ししています。

s3:
  bucket_name: your-bucket-name

your-bucket-name は自身のバケット名に変更してください。

Basic 認証用コード作成

今回この検証を行っていて知ったことは以下です。
やっぱり何事も事前調査は大事ですよね。

• Lambda は US-East-1 に作成する必要がある
  • Lambda@Edge を使用したエッジでのコンテンツのカスタマイズ – Amazon CloudFront
• Python がサポートされてない
  • nodejs6.10 または nodejs8.10 のみサポート
  • Lambda 関数の要件と制限 – Amazon CloudFront
• 環境変数がサポートされてない
  • Lambda 関数の要件と制限 – Amazon CloudFront

コードは以下の方のものをそのまま使わせていただきました。
これをコピーして auth.js として保存します。

※ authUser にユーザ名、 authPass にパスワードを記載します。

デプロイ

準備が終わったので、デプロイします。

$ sls deploy

以下のように表示されるとデプロイ完了です。

Serverless: Checking Stack update progress...
........................
Serverless: Stack update finished...
Service Information
service: basic-auth-sample
stage: dev
region: us-east-1
stack: basic-auth-sample-dev
resources: 8
api keys:
  None
endpoints:
  None
functions:
  basic-auther: basic-auth-sample-dev-basic-auther
layers:
  None

試してみる

マネジメントコンソールから作成された CloudFront の URL を確認しアクセスしてみましょう！

想定通り Basic 認証のポップアップが表示されています。
Lambda に設定したユーザ名とパスワードを入力し Sign In ボタンをクリックすると

S3 に保存した HTML ファイルが表示されています！
ちなみに、 Basic 認証画面で Cancel ボタンをクリックすると以下の画面となり、コンテンツが表示されないことがわかります。

おわりに

Basic 認証を必要とする機会はそこまで多くはないと思いますが、 Serverless Framework を利用すると簡単に実現可能ですので、かなり便利ですね！