AWS S3+CloudFront+Lambda EdgeでサーバーレスBasic認証

社内用ドキュメント(HTMLファイル)をBasic認証付で見れるようにしたいという機会が発生したため、S3+CloudFront+Lambda Edge構成でホスティングしてみました。

この構成を使ったのは、

• サーバ固定費が不要
• サーバメンテも不要
• ApacheやNginxのようなWebサーバ設定も不要
• 単にAWSの勉強がしたかった

といった理由からです。

以下の記事を参考にしました。

https://qiita.com/m4fg/items/80db7ce0050e5f3ab801
https://qiita.com/BYAKheee/items/b3034df2443dde05f31b
https://qiita.com/takahashi-kazuki/items/688f5f736bd76682483c

おおまかな流れは、

• S3にHTMLファイルを設置
• S3のファイルをCloudFrontを通して見るようにする
• CloudFrontにファンクションを組み込めるLambda Edgeを使ってBasic認証を実装

というだけで非常にシンプルですが、各工程の要点をメモとして残しておきます。

S3のバケット作成はデフォルト設定でOKです。

パブリックにはしないで下さい。
上の設定になっていれば大丈夫です。

Static website hostingを有効にします。
インデックスドキュメント、エラードキュメントはそれぞれindex.html, error.htmlを入力します。

ホスティングしたいHTMLファイルをindex.htmlと命名してアップロードします。

error.htmlは必須ではないので無くても大丈夫です。

続いてCloudFrontの設定。
Create Distributionします。

Origin Domain Nameにカーソルを当てると自動的に選択肢が表示されるので、先ほど自分で作ったバケット名を選択して下さい。
Origin IDも自動入力されます。

• Restrict Bucket AccessはYes
• Origin Access IdentityはCreate a New Identity
• Grant Read Permission on BucketはYes, Update Bucket Policy

をそれぞれ選択します。

これでCloudFrontを通してS3のファイルが見れるようになります。

Viewer Protocol Policyはhttpsを強制したいのでRedirect HTTP to HTTPSを選択します。

Object CachingはCustomizeを選択し、各TTLを0にしました。
ホスティング対象が頻繁に変更のあるファイルのため、キャッシュさせたくなかったためです。

Default Root Objectはindex.htmlを入力します。

こうすることでルートURLでindex.htmlの内容を表示するようになります。
空欄にした場合、index.htmlを見るためにはxxxxxxxx.cloudfront.net/index.htmlにアクセスする必要があります。

最後に、Lambda Edgeです。
Lambda Edgeは最近リリースされた機能のため東京リージョンではまだ使えないようです。
Lambdaのコンソール画面に入ったら、右上のリージョン名表示部分をクリックしてバージニア北部を選択しておきます。

Lambdaファンクションは一から作成を選択します。

• 名前は任意の名前を入力
• ランタイムはNode.js 6.10以上を選択
• ロールはテンプレートから新しいロールを作成を選択
• ポリシーテンプレートでBasic Edge Lambdaアクセス権限を選択し、ロール名は任意の名前を入力

Lambdaファンクションの内容は以下を参考にしました。

authUser, authPassの各変数の値がそのままユーザ名、パスワードになります。
もしソースをgit等でバージョン管理する場合は環境変数にした方が良さそうです(そうでなくても環境変数にすべきなのでしょうが……)。

関数を書いたらアクションをクリック、新しいバージョンを発行します。

バージョンの説明は空欄可です。
発行すると次のスクリーンショットのようにファンクション名に「:1」が付きます。

後は右上に表示されているファンクションのARNをコピーして、先ほど作成したCloudFrontのDistributionのEditモードに入り、

• Lambda Function Associations Event TypeでViewer Requestを選択
• Lambda Function ARNにコピーしたファンクションのARNをペースト

として設定を保存すれば完了です。

CloudFront DistributionのStatusがIn Progress状態に入りますので、約15分待ちます。

StatusがDeployedに変わったら自動で付与されるDomain Name(xxxxxxxxx.cloudfront.net)にアクセスし、Basic認証付の静的サイトを構築できていることを確認します。