🐥

AWS CloudFrontとS3を使用した静的サイトのサブディレクトリのindex.htmlの有効化

に公開
AWS
CloudFront
CloudFront function
tech

概要

index.htmlへパスでアクセスしたい場合があると思いますが、
(例えば、/hoge/index.htmlへ、https://exmaple.com/hoge でアクセスする)
CloudFrontではサブディレクトリのindex.htmlへはフルパス（https://exmaple.com/hoge/index.html） を指定しないとアクセスできません。
アクセスできるように、CloudFrontFunctionを使用してサブディレクトリのindex.htmlを有効化するための設定になります。
※CloudFrontとs3を使用した、静的サイトの設定は別で手順を作成していますので、以下を参照してください
https://zenn.dev/zizo_kuma/articles/1b26776a6325c1

1. CloudFrontFunctionを作成

CloudFrontの関数画面から関数を作成ボタンをクリックし、
名前を入力し、関数を作成ボタンをクリックしてください。
構築タブでコードを入力し、変更を保存ボタンをで保存してください。
5-1

コードの内容になります。

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で利用できるようになります。
5-2

2. CloudFrontにCloudFrontFunctionを適用する

CloudFrontのコンソールから対象のDistributionを選択し、
Behaviorsタブから、behaviorを選択、Editボタンをクリックする。
編集画面が表示されるので、関数の関連付けのエリアで、
ビューワーリクエスト項目で、CloudFrontFunctionsを選択し、先ほど作成した関数を指定し保存してください。
5-3

3. サブディレクトリのindex.htmlの有効化されていることを確認

S3バケットにディレクトリを作成して、index.htmlを保存してください。（例えば、/hoge/index.htmlみたいな)
https://host名/hoge でアクセスして、問題なく/hoge/index.htmlの内容が表示されれば完了です。
5-4

※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