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

AWS運用自動化サービス「Cloud Automator」



はじめに

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

事前準備

S3 バケットの作成

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

Serverless Framework のインストール

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

セットアップ

Serverless Framework の設定

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

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

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

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

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

Basic 認証用コード作成

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

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

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

デプロイ

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

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

試してみる

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


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

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

おわりに

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

AWS運用自動化サービス「Cloud Automator」