はじめに
S3 + CloudFront でホスティングしている静的サイトに、軽量なBasic認証を追加する方法を紹介します。
Lambda@Edgeを使わず、CloudFront Functionsだけで簡単に導入可能です。
また、必要に応じて「トップページだけに認証をかける」といった柔軟な制御も可能です。
この方法の特徴
- CloudFront Functionsのみで完結（無料枠あり・高速）
- AWSキー管理不要（サーバーレスな認証追加）
- 認証をかけるパスを自由にコントロールできる
- 静的ファイルベースのサイトならどんな構成でも対応可能
🔧 ステップ1：CloudFront Function を作成
- AWSコンソール → CloudFront → 「Functions」
- 「関数を作成」をクリック
- 任意の関数名（例：
static-site-basic-auth）を入力 - ランタイムは
cloudfront-js-1.0を選択 - 次のコードを貼り付けます：
🧑💻 関数コード（ユーザー名: demo_user、パスワード: demo_pass123）
function handler(event) {
var request = event.request;
var headers = request.headers;
// Base64("demo_user:demo_pass123")
var expectedAuth = "Basic ZGVtb191c2VyOmRlbW9fcGFzczEyMw==";
// 🔐 認証対象のパスをここで制御（例: index.html のみに認証）
if (request.uri === "/index.html" || request.uri === "/") {
if (
!headers.authorization ||
headers.authorization.value !== expectedAuth
) {
return {
statusCode: 401,
statusDescription: 'Unauthorized',
headers: {
'www-authenticate': {
value: 'Basic realm=\"Restricted Area\"'
}
}
};
}
}
return request;
}
💾 ステップ2：関数の保存と発行（両方必須！）
-
右上の「保存」ボタンをクリック
-
その後、必ず「関数を発行」をクリックして反映状態にします
これを忘れると、CloudFrontに適用されません！
🔗 ステップ3：CloudFrontビヘイビアに割り当て
- CloudFront → 対象ディストリビューションを選択
- 「ビヘイビア」タブを開き、認証をかけたいパス（例:
/）を選んで「編集」 - 「関数の関連付け」の「Viewer Request」に、作成した関数を割り当て
- 保存して反映
🔍 ステップ4：動作確認
ブラウザで以下のようにアクセスし、Basic認証ダイアログが出るか確認します：
https://<your-distribution>.cloudfront.net/index.html
| 項目 | 値 |
|---|---|
| ユーザー名 | demo_user |
| パスワード | demo_pass123 |
🧩 オプション：特定のパスだけに認証をかけたいとき
関数のこの部分👇を使えば、index.htmlやトップページだけに認証をかけることができます。
if (request.uri === "/index.html" || request.uri === "/") {
これにより、/index.html や / にアクセスしたときだけ認証が求められ、
CSS や JS、他のHTMLファイル（例: /page1.html, /assets/style.css）には影響しません。
たとえば「トップページは限定公開だけど、ドキュメント詳細は誰でも見ていい」といった用途にぴったりです。
✅ まとめ
CloudFront Functions を使えば、静的サイトに簡易なアクセス制限（Basic認証）をすばやく追加できます。
認証対象のパスも細かく制御でき、コストも実質ゼロ。ちょっとした社内公開や限定公開サイトに最適です。