S3 + CloudFrontの静的サイト内の所定のパスにおいてBasic認証を導入する

西藤です。

静的なコンテンツのみで構成されるサイトを高い耐久性と高速なコンテンツ配信するためには S3 + CloudFront という構成による静的サイトホスティングが可能です。
これによりEC2で立ち上げるサーバーの管理が不要になるので、より安心感を持ってサイト運用ができます。

さらには弊社ブログにおいて、
S3静的ウェブホスティング+CloudFront+Lambda@EdgeでBasic認証をかける
の記事にて、その静的サイトホスティングとそのサイトにBasic認証をかける方法が紹介されていますが、

今回はそのS3とCloudFrontの組み合わせでホストされた静的サイトにおいて、「特定のパスにおいてBasic認証をかける」ということを実現してみたいと思います。

これにより「ID・パスワードを知っている人だけがアクセスできる専用ページ」をサイト内の特定のパスにて作ることができます。

構成

まず作ろうとしているサイトの構成としましては以下のようになります。

これを S3バケットにアップロードして、静的サイトホスティングを設定、CloudFront経由からアクセスするようにします。

そして、今回は Directory_B/ 配下にのみBasic認証を適用して、「特定のパスにおいてBasic認証をかける」の実現を目指します。

S3 + CloudFront での静的サイトホスティングの表示確認

まず、最初にS3 + CloudFront で構成されている静的サイトホスティングが表示されることを確認します。
（S3 + CloudFrontの静的サイト構築の手順は割愛いたします）

問題なく、サイトディレクトリ直下の index.html　が静的サイトホスティングてホストされたサイトのページとして表示されました。

また、

• Directory_A
• Directory_B

それぞれディレクトリ配下に置かれているindex.htmlも同様に表示ができています。（まだ、Basic認証の設定をしていないので、そのまま表示される）

CloudFrontのBehavior設定をする

次に先ほどの静的サイトホスティングをするために設定したCloudFrontにおいて、「所定のパス（URL）ごとに動作を指定する」ための設定 Behavior を設定します。
今回は、

• Directory_A
• Directory_B

でのディレクトリ配下にて、それぞれ異なる動きをさせたいので、

• Directory_A/*
• Directory_B/*

のPath PatternにBehavior設定をします。

内容はデフォルトで作成します。

これでAとBそれぞれのPath PatternのBehaviorができました。

Basic認証用のLambda関数を作成する

次に、上記の記事を参考にCloudFrontへ適用するLambda関数を作成します。
今回は Basic-Auth-test という名前の関数を作るものとします。
（関数の内容・ロールの設定などは割愛いたします）

Basic認証を適用したいパスにだけLambda@edgeを適用する

そして、今回のポイントとなる部分です。
関数の作成ができたら、Lambda@edgeのデプロイを行いますが、設定の際に キャッシュ動作 の欄を選択します。
ここで出てくる選択肢が先ほど、CloudFrontのBehavior設定で作ったPath Pattern と合致しています。
今回、Basic認証をつけたい Directory_B/* を選択します。

これでLambda@edgeがDirectory_B/*のパスにのみデプロイされたことになります。

CloudFrontのDirectory_B/*のPath PatternのBehaviorを見ると、Lambda関数が関連づけられていることがわかります。

表示の確認

では、この状態で再びサイトの表示を確認してみます。

ルートディレクトリはBasic認証もなく、表示されます。

次に Directory_A/ の中を開きます。

こちらもBasic認証が出ることなく、表示されます、

そして、最後に Directory_B/ の中を開きます。

すると、Basic認証の確認画面が表示され、認証に失敗した場合は

と失敗の表示になります。
正しく認証された場合は

という具合に表示されます。
これで、特定のパスのみでBasic認証が動作していることが確認できました。

まとめ

以上の方法によりS3 + CloudFrontで構成している静的サイト内において、パス位置を指定してBasic認証を設置することができました。
S3 + CloudFrontの静的サイトホスティングではなく、たとえばEC2でApacheサーバーにて同様の運用しようとすると、所定のディレクトリの位置に .htpasswd の設置をしたり、インスタンスサイズの選定、アップデートなどの運用面にも気を使う必要が増えてきます。
動的な要素を含まない静的なサイトで、運用面の負担をできるだけ小さい形でBasic認証を導入したい。しかもサイト内で所定のパスの中でのみ導入したい、という時に、上記が参考になれば幸いです。

sho