背景

CloudFrontとS3でHugoのサイトをホスティングしたいです。

サブディレクトリにindex.htmlはあるのですが、Hugoで生成されるhrefにはディレクトリまで書かれた状態で、index.htmlまで記述されません。

なので、いざリンクをクリックすると、404 NOT FOUNDの扱いになってしまいます。ルートディレクトリはindex.htmlを返すので、同じようにサブディレクトリでもindex.htmlを返してくれればいいのにと思います。

apacheやnginxだと、何もしないでもでindex.htmlを返却するような定義がconfigで定義されています。一方、CloudFrontはCloudFront Functionsを実装しないと実現できません。

対応

CloudFront Functionsを実装して、サブディレクトリでもindex.htmlを返すようにします。

コードは以下のページのをそのまま使用します。AWSが提供しているコードなので、心配ないはず！

amazon-cloudfront-functions/url-rewrite-single-page-apps/index.js at main · aws-samples/amazon-cloudfront-functions

terraformのdefault_cache_behaviorの中にfunction_associationを追記します。

resource "aws_cloudfront_distribution" "doc_cfront" {

~~省略~~

  default_cache_behavior {
  
  ~~省略~~

    function_association {
      event_type   = "viewer-request"
      function_arn = aws_cloudfront_function.main.arn
    }
  }
}

そしたら、aws_cloudfront_functionを追記します。

resource "aws_cloudfront_function" "main" {
  name    = "function"
  runtime = "cloudfront-js-1.0"
  comment = "default directory index"
  publish = true
  code    = file("./CloudFront_Functions/function.js")
}