【Hugo】CloudFront+S3構成で404(Not Found)ページを作成する

前提

CloudFront+S3構成でサイトを公開していること。

AWS CloudFrontの設定

コンソールでの作成

CloudFrontディストリビューションのエラーページの設定で以下のように404ページを設定する。

エラーコード: 404
最小TTL: (適宜)
レスポンスページをカスタイマイズ: はい
- レスポンスページのパス: /404.html
- HTTPレスポンスコード: 404

CloudFrontカスタムエラーレスポンス

念の為エラーコード403についても同様に設定する。

設定すると以下のように一覧される。

CloudFrontの設定

Terraformでの設定

Terraformで設定する場合はaws_cloudfront_distributionリソースの設定で以下のように指定する。

resource "aws_cloudfront_distribution" "example" {
  # (省略)

  custom_error_response {
    error_caching_min_ttl = 10
    error_code            = 403
    response_code         = 404
    response_page_path    = "/404.html"
  }

  custom_error_response {
    error_caching_min_ttl = 10
    error_code            = 404
    response_code         = 404
    response_page_path    = "/404.html"
  }

  # (省略)
}

hugoの404ページを作成

layouts/404.htmlを作成する。

以下は当サイトの404ページ。

{{ define "main" }}
  <article class="detail-article">
    <header class="article-header">
      <h1 class="title">ページが見つかりません</h1>
    </header>
    <div class="article-body">
      <div class="not-found">
        お探しのページは見つかりませんでした。<br>
        <a href="/">トップページ</a>より目的のページをお探しください。<br>
      </div>
    </div>
  </article>
{{ end }}

layous/404.htmlを作成してビルドするとpublic/404.htmlが作成されるので、URLのパスで/404.htmlを指定するとこのページが表示される。

表示例

上記構成で存在しないパスにアクセスすると、例えば当サイトの場合は以下のように表示される。

404ページの表示例