/ SPAのために403や404でindex.htmlを返すS3とCloudFrontの設定

概要

SPAのインフラにS3やCloudFrontを使用していると、ページを遷移したあとに、「NoSuchKey」となることがある。
S3で公開している場合、S3+CloudFrontで公開している場合で、それぞれ設定があるのでメモ。

S3の場合

S3の場合は、静的ホスティングの設定をしたら、最初に読み込むファイルとエラーファイルを指定できる。
そこで、いずれもindex.htmlにしてあげることでエラーを回避できるようになる。
下記はTerraformでの定義の仕方。

  website {
    index_document = "index.html"
    error_document = "index.html"
  }

上記はエラーに遭遇して調べたところ、下記記事を見つけて参考にしたもの。
Single-Page Apps on AWS, Part 1: Hosting a Website on S3

S3のみの環境であれば上記S3の設定のみでOK.

CloudFrontの場合

CloudFrontでもS3と同じような設定できることを最近知った。
下記はTerraformの定義だが、404でもindex.htmlを返すという設定。

  custom_error_response {
    error_code            = "404"
    response_code         = "200"
    response_page_path    = "/index.html"
    error_caching_min_ttl = "300"
  }

上記はS3の前段にCloudFrontをおいたら、またエラーが出るようになってしまい、調べたところ下記記事を参考に設定したもの。

SPAを S3+CloudFront で表示する方法

SPAは今までのサーバークライアント環境の知識だけだと全く成立しないことが多いので、知っておかないと中々衝撃をうけることが多いが、マネージドサービス側でそれらに対応できるようになっていたりするのでほんと便利。

<p style='padding: 5px;'>