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認証付の静的サイトを構築できていることを確認します。