概要

こちらの記事でAWSサービスを使ったドメインリダイレクト手法についてまとめました。
その中でCloudFront関連の方法を試していこうと思い記事にします。
今回は「CloudFront Functions」編です。

実践

構成図

CloudFrontに代替ドメインでアクセス
ビューワーリクエストに対してCloudFront Functionsで処理(後述)
特定のPathの場合にリダイレクト先のALBにリクエストを転送

デプロイ

環境はGitHubで公開しています。
各コードとデプロイ方法を用意してますのでお試しください。

設定値

各ポイントとなる設定値を見ていきます。

CloudFront

ディストリビューションに代替ドメインを設定

オリジンはS3のリージョナルエンドポイント(REST API Endpoint)

S3オリジンにOAC(Origin Access Control)を設定

デフォルトビヘイビアのビューワーリクエストにFunctionsを適用

Functionsコード

リクエストのURI(Path)が「/test1/」or「/test2/」の場合に、ALBに設定した独自ドメインにリダイレクトさせるコードです。

function handler(event) {
  var request = event.request;
  var uri = request.uri;
  var newurl = `https://${リダイレクト先FQDN}/`;

  // Check uri
  if (uri === "/test1/") {
    newurl = `https://${リダイレクト先FQDN}/test1/`;
  }
  // Check uri
  else if (uri === "/test2/") {
    newurl = `https://${リダイレクト先FQDN}/test2/`;
  } else {
    return request;
  }
  var response = {
    statusCode: 301,
    statusDescription: "Moved Permanently",
    headers: {
      location: {
        value: newurl,
      },
    },
  };
  return response;
}

S3

バケットポリシーにCloudFront OACからのアクセス許可を追加

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::バケット名/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::アカウントID:distribution/ディストリビューションID"
                }
            }
        }
    ]
}

動作確認

まず、Functionsコードの条件にマッチしないリクエストを呼び出してみます。
ディストリビューションに設定したデフォルトルートオブジェクト(S3バケットにホストしたindex.html)がレスポンスとして返ってきます。

[cloudshell-user@ip-10-134-11-96 ~]$ curl -i https://ディストリビューション代替ドメイン/
HTTP/2 200 
content-type: application/octet-stream
content-length: 316
date: Mon, 10 Mar 2025 13:22:16 GMT
last-modified: Mon, 10 Mar 2025 12:50:35 GMT
etag: "0b51ba8caa5af4d214532a9912de1e23"
x-amz-server-side-encryption: AES256
accept-ranges: bytes
server: AmazonS3
x-cache: Miss from cloudfront
via: 1.1 6149f46c7356f1b6aa240cc7ba3d1060.cloudfront.net (CloudFront)
x-amz-cf-pop: NRT20-P1
x-amz-cf-id: MiduRvjAEhWmOJsnnIF3mWjekZN6Dty1F0fpQmBdU6_y_ja3JyVurw==

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>S3</title>
  </head>
  <body>
    <h1>S3 Default Page!</h1>
    <p>このページは S3 にホストされています。</p>
  </body>
</html>

続いて、Functionsコードの条件分岐にマッチするリクエストを送信してみます。

[cloudshell-user@ip-10-134-11-96 ~]$ curl -i -L https://ディストリビューション代替ドメイン/test1/
HTTP/2 301 
server: CloudFront
date: Mon, 10 Mar 2025 13:29:10 GMT
content-length: 0
location: https://リダイレクト先ドメイン/test1/
x-cache: FunctionGeneratedResponse from cloudfront
via: 1.1 829875449fd9f82be120d1fdf955d186.cloudfront.net (CloudFront)
x-amz-cf-pop: NRT20-P1
x-amz-cf-id: N9NH_JO3A9bCB_pqYfR40d-MxYi3ATFLsP0XfUi4r4GtNzAa7_y4Lg==

HTTP/2 200 
date: Mon, 10 Mar 2025 13:29:10 GMT
content-type: text/html; charset=UTF-8
content-length: 232
server: Apache/2.4.62 (Amazon Linux)
last-modified: Mon, 10 Mar 2025 12:52:26 GMT
etag: "e8-62ffc71bcbfa9"
accept-ranges: bytes

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EC2</title>
</head>
<body>
    <h1>Web Server Test1 Page!</h1>
</body>
</html>

まとめ

今回は「CloudFront Functions」を試してみました。
「CloudFront+S3リダイレクト機能」と比較し、セキュアに実装できる点はメリットだなと感じました。
次回は「CloudFront+Lambda@Edge」編を記事にしたいと思います。