AWS S3 + CloudFrontでhtaccessのような「URL書き換え」や「Basic認証」をする方法

本記事ではS3 + CloudFrontでWEBサイトを公開できる状態であることを前提に記載します。S3 + CloudFrontでWEBサイトを公開する方法は以下の記事をご参照ください

http://54.95.217.231/it/aws-cloudfront-s3-oac.html

S3 + CloudFrontでWEBサイトを公開する場合、htaccessは使えませんが、htaccessの以下のような動作をさせたい場合の対応方法を記載します。

やりたいこと

URLの書き換え
Basic認証

対応方法は2つあります。

2つの対応方法

Lambda@Edgeを使用する
CloudFrontの関数を使用する

本記事ではCloudFrontの関数を使用して、「URL書き換え」や「Basic認証」をする方法を試してみます。

CloudFrontの関数の特徴として以下のようなことが挙げられます。

Lambda Edgeより手前で高速に動作する
- めっちゃ早いということ
実行時間は1ms 以内に収める必要がある
- 簡単な(すぐに終わる)処理にしか向かない
言語はJavaScriptのみ対応

めっちゃ早いというメリットがあるが、すぐに終わる処理にしか向かないという制約があります。

「URLの書き換え」や「Basic認証」はすぐに終わる処理なので、CloudFront 関数のメリットをうまく生かすことができます。

それでは、CloudFront関数の設定方法を記載していきます！
「URL書き換え」と「Basic認証」で共通する設定方法になります。
「URL書き換え」や「Basic認証」のソースコードは、設定方法の後に記載します。

CloudFront関数の設定方法

設定の大まかな流れは以下のようになります。

大まかな流れ

関数作成
関数を発行し、ディストリビューションのViewer Requestと紐付ける

具体的な設定方法は以下の通りです。

AWSマネージメントコンソール画面からCloudFrontダッシュボードを開き、関数をクリック
関数を作成ボタン押下
関数の名前を入力し、関数を作成
関数コードを編集する
- ソースコードの例は以降の章をご参照ください
発行タブから関数を発行する
関連付けられているディストリビューションの「関連付けを追加」ボタン押下
ディストリビューションを選択し、イベントタイプはViewer Requestを選択、関数の関連づけをしたいビヘイビアを選択
「関連付けを追加」ボタンを押下

次は、URLの書き換えのソースコードの例を記載します。

URLの書き換えのソースコード

「hoge」のパスが来たら「fuga」に書き換える例です。

「https://ドメイン/hoge」のアクセスを「https://ドメイン/fuga」に書き換えるイメージです。

この際、アクセスするパスが変更になるだけで、リダイレクトは発生しません。


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

  if (uri.startsWith("/hoge/")) {
    request.uri = "/fuga/";
  }
  return request;
}

リダイレクトさせたい場合は以下をご参照ください

リダイレクトさせるソースコード

「hoge」のパスが来たら「fuga」にリダイレクトさせる例です。

「https://ドメイン/hoge」のアクセスを「https://ドメイン/fuga」にリダイレクトします。


function handler(event) {
  var request = event.request;
  var host = request.headers.host.value;
  var uri = request.uri;
　var redirect_url;

  // 「hoge」のパスが来たら「fuga」に書き換える
  if (uri.startsWith("/hoge/")) {
    redirect_url = `https://${host}/fuga`;
  } else {
    // 「hoge」のパスはリダイレクトせず、そのままアクセス
    return request;
  } 

 // リダイレクト
 var response = { 
   statusCode: 301,
   statusDescription: 'Moved Permanently',
   headers: 
     { "location": { "value": redirect_url } }
  }
  return response;
}

次は、Basic認証について記載します。

Basic認証のソースコード

まず認証キーを用意します。

echo -n "{ID}:{パスワード}" | base64

{ID}、{パスワード}の部分は、使用するIDとパスワードに書き換えて実行します。

実行した結果は以下のソースの「{認証キー}」の部分と置き換えます。


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

  var authString = "Basic {認証キー}";

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