(cache)Serverless Frameworkで静的サイトをBASIC認証付きでホスティングするためのボイラープレートを作った

※注意 2018/1/18時点ではCloudFrontに紐付けたLambda@Edgeを削除することができなくなります（結果Serverless Framework内で動いているCFnスタックの削除などにも失敗します）。 https://forums.aws.amazon.com/thread.jspa?threadID=260242&tstart=0#jive-message-824818

ときどきページデザインなどの確認のためにモックサイトを作成することがあったりします。

動くモックが必要なのであれば（PHPやRubyを動かすために）サーバの用意が必要ですが、静的サイトなのであればS3の静的ウェブサイトホスティングの機能を使いたいところです。

ただ、確認用ページをパブリックに公開するのもアレなので、BASIC認証くらいは欲しいです。

というわけで

S3静的ウェブサイトホスティング環境
1のS3バケットにコンテンツを同期アップロードするためのコマンド
1の環境にBASIC認証を付与

という環境を一撃で構築するためのServerless Frameworkのボイラープレートを作りました

github.com

使い方

インストール

serverlessコマンドを利用するか、git cloneでインストールします

$ serverless install --url https://github.com/k1LoW/serverless-static-hosting-with-basic-auth --name my-static-page
or
$ git clone https://github.com/k1LoW/serverless-static-hosting-with-basic-auth.git ./my-static-page

BASIC認証のUSERNAMEとPASSWORDを設定する

handler.js 内のBASIC_AUTH_USERSにBASIC認証のUSERNAMEとPASSWORDを設定します。

const BASIC_AUTH_USERS = {
    k1low: 'passpass'
};

認証ユーザは複数設定できます。

デプロイ

S3のバケット名を環境変数で指定しつつ（ WEBSITE_S3_BUCKET_NAME ）静的ウェブサイトホスティング環境をデプロイします。

$ npm install
$ AWS_PROFILE=XxxxxXXX WEBSITE_S3_BUCKET_NAME=sls-static-basic npm run deploy

CloudFrontの設定やLamda@Edgeの設定も含まれるので少し時間がかかります。

デプロイが完了すると src/ 内のコンテンツがS3バケットに同期されて、CloudFront経由でBASIC認証付きの静的サイトの確認をすることができるようになります。

コンテンツの再同期

コンテンツを再度同期したいときは npm run sync コマンドで同期します（ WEBSITE_S3_BUCKET_NAME の指定は忘れずに）。

$ AWS_PROFILE=XxxxxXXX WEBSITE_S3_BUCKET_NAME=sls-static-basic npm run sync

まとめ

Lambda@Edge面白いですね。