Next.jsでStatic GenerationしたサイトをAWSでホスティングする

.
├── _next
├── about.html
└── index.html

uploading_directory="アップロードするルートディレクトリパス"
find "${uploading_directory}" -type f | while read file_path;do
  key="${file_path#${uploading_directory}}"
  if [[ "${file_path}" =~ \.html$ ]] && [[ "${file_path}" != "index.html" ]] && [[ ! "${file_path}" =~ /index\.html$ ]];then
    key="${key%.html}"
    aws s3api put-object \
      --bucket "バケット名" \
      --key "${key}" \
      --body "${file_path}" \
      --content-type "text/html"
  else
    aws s3api put-object \
      --bucket "バケット名" \
      --key "${key}" \
      --body "${file_path}"
  fi
done

aws s3 sync --exact-timestamps --delete "アップロードするルートディレクトリ名" "s3://バケット名/"

import { Handler } from "aws-lambda";

type Event = {
  Records: {
    cf: {
      request: {
        uri: string;
      };
    };
  }[];
};

type EdgeHander = Handler<Event, any>;

export const handler: EdgeHander = async (event) => {
  const { request } = event.Records[0].cf;

  // トップページのリクエストは加工せずにそのままリクエストを通す
  if (request.uri === "/" || request.uri === "") {
    return request;
  }

  const page = request.uri.split("/").pop();

  if (page === "") {
    // 末尾がスラッシュの場合は、スラッシュなしのページにリダイレクト
    return {
      status: "302",
      statusDescription: "Found",
      headers: {
        location: [
          {
            key: "Location",
            value: request.uri.replace(/\/+$/, ""),
          },
        ],
      },
    };
  }

  if (!page.match(/\.html$/)) {
    // .html拡張子がついてなければ.html拡張子をつける
    request.uri = `${request.uri}.html`;
  }

  return request;
};

.
├── _next
├── about
│   └── index.html
└── index.html

resource "aws_s3_bucket" "web" {
  bucket = "nextjs-web"
  acl = "public-read"

  versioning {
    enabled = false
  }

  server_side_encryption_configuration {
    rule {
      apply_server_side_encryption_by_default {
        sse_algorithm = "AES256"
      }
    }
  }

  website {
    index_document = "index.html"
  }
}

resource "random_id" "restriction_header_value" {
  # 推測不可能な値にしたかったため、ある程度長い値にしている
  byte_length = 50
}

data "aws_iam_policy_document" "web_bucket" {
  statement {
    effect = "Allow"
    actions = [
      "s3:GetObject"
    ]

    principals {
      type        = "AWS"
      identifiers = ["*"]
    }

    resources = [
      "${aws_s3_bucket.web.arn}/*"
    ]

    # Refererに特定の値がないとアクセスできないように制限
    condition {
      test     = "StringLike"
      values   = [random_id.restriction_header_value.b64_url]
      variable = "aws:Referer"
    }
  }
}

resource "aws_s3_bucket_public_access_block" "web_bucket" {
  bucket                  = aws_s3_bucket.web.id
  block_public_acls       = true
  block_public_policy     = false
  ignore_public_acls      = true
  restrict_public_buckets = false
}

resource "aws_s3_bucket_policy" "web_bucket" {
  /**
   * 「aws_s3_bucket_public_access_block」と「aws_s3_bucket_policy」を同時に作成または削除すると
   * 'A conflicting conditional operation is currently in progress against this resource'
   * と言われるため、同時には作成しないようにしている
   */
  depends_on = [
    aws_s3_bucket_public_access_block.web_bucket
  ]
  bucket = aws_s3_bucket.web.id
  policy = data.aws_iam_policy_document.web_bucket.json
}

resource "aws_cloudfront_distribution" "web" {
  aliases = [
    "<ドメイン名>"
  ]
  enabled         = true
  is_ipv6_enabled = true
  price_class = "PriceClass_100"
  default_root_object = "index.html"

  origin {
    domain_name = aws_s3_bucket.web.website_endpoint
    origin_id   = aws_s3_bucket.web.id

    custom_origin_config {
      http_port              = 80
      https_port             = 443
      origin_protocol_policy = "http-only"
      origin_ssl_protocols = ["TLSv1.2"]
    }

    # バケットポリシーのRefererの制限を突破するためにカスタムヘッダーを設定
    custom_header {
      name  = "Referer"
      value = random_id.restriction_header_value.b64_url
    }
  }

  restrictions {
    geo_restriction {
      restriction_type = "none"
    }
  }

  default_cache_behavior {
    ...
  }

  viewer_certificate {
    ...
  }
}