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 ボタンをクリックすると以下の画面となり、コンテンツが表示されないことがわかります。