AWS CloudFront 関数を使用して Basic 認証を設定する


# 概要


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

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

# 前提

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


https://qiita.com/hiranuma/items/814a50569a59b59b04d3

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

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

# 手順

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

![スクリーンショット 2024-11-25 17.31.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3827838/0d546ae2-b985-4477-0cd5-1d0b82b6e6a3.png)

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`。



![スクリーンショット 2024-11-25 17.45.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3827838/09343e52-ec15-eacc-abfd-b3967f573f72.png)

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




###  二、**関数コード**

![スクリーンショット 2024-12-10 15.37.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3827838/c94d4b76-8e4e-03ef-6643-d6d37ad508c4.png)



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

```javascript
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 (*)

![スクリーンショット 2024-12-10 15.35.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3827838/d9290ef3-062f-a99d-8a67-756c356ffb34.png)


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

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


![スクリーンショット 2024-11-25 18.45.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3827838/ea2fa48b-6c4c-c7a2-caf9-335593613ba1.png)


3.画面一番下にスクロールして、**関数の関連付け** で以下を設定：
   - **関数タイプ**: `CloudFront Functions`
   - **関数 ARN/名前**: 作成した CloudFront 関数の名前を選択

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


# テスト

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