AWS CloudFrontとS3を使用した静的サイトのサブディレクトリのindex.htmlの有効化
概要
index.htmlへパスでアクセスしたい場合があると思いますが、
(例えば、/hoge/index.htmlへ、https://exmaple.com/hoge でアクセスする)
CloudFrontではサブディレクトリのindex.htmlへはフルパス(https://exmaple.com/hoge/index.html) を指定しないとアクセスできません。
アクセスできるように、CloudFrontFunction
を使用してサブディレクトリのindex.htmlを有効化するための設定になります。
※CloudFrontとs3を使用した、静的サイトの設定は別で手順を作成していますので、以下を参照してください
1. CloudFrontFunctionを作成
CloudFrontの関数画面から関数を作成
ボタンをクリックし、
名前
を入力し、関数を作成
ボタンをクリックしてください。
構築タブでコードを入力し、変更を保存
ボタンをで保存してください。
コードの内容になります。
function handler(event) {
var request = event.request;
var uri = request.uri;
if (uri.endsWith('/')) {
request.uri += 'index.html';
} else if (!uri.includes('.')) {
request.uri += '/index.html';
}
return request;
}
発行タブで、関数を発行
ボタンをクリックすると、CloudFrontで利用できるようになります。
2. CloudFrontにCloudFrontFunctionを適用する
CloudFrontのコンソールから対象のDistributionを選択し、
Behaviors
タブから、behaviorを選択、Edit
ボタンをクリックする。
編集画面が表示されるので、関数の関連付け
のエリアで、
ビューワーリクエスト
項目で、CloudFrontFunctions
を選択し、先ほど作成した関数を指定し保存してください。
3. サブディレクトリのindex.htmlの有効化されていることを確認
S3バケットにディレクトリを作成して、index.html
を保存してください。(例えば、/hoge/index.html
みたいな)
https://host名/hoge でアクセスして、問題なく/hoge/index.html
の内容が表示されれば完了です。
※Basic認証やリダイレクトなど、複数の処理と併用したい場合
ビューワーリクエスト
には、一つの関数しか設定できないため、併用したい場合は、
一つの関数に、複数の処理を記入する必要があり、下記のようになります。
function handler(event) {
var request = event.request;
var headers = request.headers;
var uri = request.uri;
var newuri = uri;
var response = {};
var params = '';
// echo -n user:pass | base64
var authString = "Basic [base64でエンコードした内容を入力]";
// ---------Basic認証チェック
if (
typeof headers.authorization === "undefined" ||
headers.authorization.value !== authString
) {
return {
statusCode: 401,
statusDescription: "Unauthorized",
headers: { "www-authenticate": { value: "Basic" } }
};
}
// ---------サブディレクトリのindex.htmlチェック
if (uri.endsWith('/')) {
request.uri += 'index.html';
} else if (!uri.includes('.')) {
request.uri += '/index.html';
}
return request;
}
Discussion