CloudFrontでS3静的サイトwithベーシック認証 #AWS

概要

静的なサイトをS3に置いて手軽にアクセス
S3 のパブリックアクセスは許可しない
Basic認証で認証をかける

ポイント

CloudFrontのディストリビューションにデフォルトのルートオブジェクトを設定する
テスト中はキャッシュOFFにしておくと良いかも

Basic認証用関数

function handler(event) {
  var request = event.request;
  var headers = request.headers;

  // echo -n user:pass | base64
  var authString = "Basic <base64エンコード済文字列>";

  if (
    typeof headers.authorization === "undefined" ||
    headers.authorization.value !== authString
  ) {
    return {
      statusCode: 401,
      statusDescription: "Unauthorized",
      headers: { "www-authenticate": { value: "Basic" } }
    };
  }

  return request;
}

設定

S3バケット
- オブジェクト
  - ファイルをアップロードする
- プロパティ
  - 静的ウェブサイトホスティング
    - 無効
- アクセス許可
  - ブロックパブリックアクセス
    - 全てブロック
- バケットポリシー
  - 後ほど設定
CloudFront
- 関数
  - Basic認証用関数を作成
  - 作成した関数を発行
- ディストリビューション
  - 一般
    - デフォルトルートオブジェクト：サイトによる (index.html等)
      - index.html
  - オリジン
    - オリジンドメイン
      - S3バケットのドメイン
    - オリジンアクセス
      - Orgin access control settings
        
        Create New OAC
        
        デフォルト設定で生成
        
        このメニューが出ない場合、S3の静的ウェブサイトホスティングが有効になっている可能性
        
        S3 のポリシーをコピーすることができるのでコピー
        
        S3 のバケットアクセス許可へ移動
        
        S3 のバケットポリシーを編集
        
        コピーしたポリシーで置き換える
        
        S3 バケットポリシー設定を反映
  - ビヘイビア
    - オリジンとオリジングループ
      - 作成したオリジン
    - ビューワー
      - デフォルトでも可
    - キャッシュキーとオリジンリクエスト
      - デフォルトでも可
    - 関数の関連付け
      - ビューワーリクエスト
        
        作成した関数をセット
    - 変更を保存

以上、お疲れさまでした!