概要

CloudFront で公開している Web に対しては、Lambda を使う方法や Origin 側で認証を行う方法などがありますが、CloudFront Functions を使って Basic 認証を設定する方法が最も手軽だと思います。今回は、この方法を紹介します。

この作業を進めれば、例えば LP などの軽い案件における社内確認やクライアント確認が、安心して手軽に行えるようになります。

前提

CloudFront Distributionの作成

まず、CloudFront Distribution を作成している必要があります。このリンクの下記三つセクションの手順を従って作成してください。

1.S3 バケットの作成
3.CloudFront のディストリビューション
4.S3 バケットのポリシー設定

下記のドメインに接続し、サイトが表示されれば成功です。
d3******an2x.cloudfront.net

手順

一、CloudFront 関数を作成

AWS コンソールにログインし、CloudFront サービスにアクセスします
CloudFront サービスに移動します。
左メニューから関数を選択し、関数を作成 をクリック。

4.フォルムを入力

名前：個人的な命名パータンはbasic-your-project-name-auth
説明：非強制ですが、わかりやすいため、記入しときましょう
ランタイムを選ぶの注意点：

cloudfront-js-1.0 は以下のような限られた機能をサポート：
- 基本的な JavaScript 構文 (ES5/ES6 相当)。
- 標準的な文字列操作、配列操作。
- 基本的なエラー処理 (try-catch など)。
cloudfront-js-2.0 は ES6 以降の機能をサポート:
- let、const などのブロックスコープ変数。
- arrow functions、template literals、destructuring。
- async/await。
- Promise。
- Map や Set。

5.入力終わってから右下の 関数を作成 をクリック。

二、関数コード

1.「構築」-> 「関数コード」-> 「開発」エディタで以下のコードを追加します：

function handler(event) {
    // Basic 認証のユーザー名とパスワード
    var authUser = 'your-username';
    var authPass = 'your-password';

    // Buffer を使って Base64 エンコード
    var authString = 'Basic ' + Buffer.from(authUser + ':' + authPass).toString('base64');

    var request = event.request;
    var headers = request.headers;

    // 認証失敗時のレスポンス
    if (
      typeof headers.authorization === "undefined" ||
      headers.authorization.value !== authString
    ) {
      return {
        statusCode: 401,
        statusDescription: "Unauthorized",
        headers: { "www-authenticate": { value: 'Basic realm="Please Enter Your Password"' } }
      };
    }

    // 認証成功時のレスポンス
    return request;
}

2.入力終わってから右上の 変更を保存 ボタンをクリック。

三、関数発行

1.「発行」-> 「関数を発行」
2.「関連付けられているディストリビューション」-> 「関連付けを追加」をクリック

ディストリビューション：自分のcloudfrontディストリビューションを選ぶ
イベントタイプ：Viewer request
キャッシュビヘイビア：Default (*)

四、ディストリビューションの設定

1.CloudFront のディストリビューションに移動します。該当ディストリビューションを開きます。
2.ビヘイビアタブから該当ビヘイビアを選択し、編集をクリックします。

3.画面一番下にスクロールして、関数の関連付け で以下を設定：

関数タイプ: CloudFront Functions
関数 ARN/名前: 作成した CloudFront 関数の名前を選択

4.変更を保存して設定を反映

テスト

認証が必要なリソースにアクセスし、ブラウザが Basic 認証のプロンプトを表示するか確認します
正しいユーザー名とパスワードを入力した場合にのみアクセスが許可されることを確認します