CloudFront+S3でPOSTで通信する

はじめに

CloudFront＋S3でHTMLを公開するというシンプルな構成の紙芝居サイトの構築中に発生しました。
Formでのページ遷移をしようとしたら、S3にPOST通信が弾かれてしまいました。
いままでECSとかAmplify使ったりとかしていたので、ただHTMLをS3に置くのにそんなトラップがあることに気づいてませんでした。

対応方法

CloudFrontFuncitonsのリクエストビューワにPOST通信できたときはリダイレクトするようにしました。

function handler(event) {
    var request = event.request
    if (event.request.method == 'POST') {
        var response = {
            statusCode: 301,
            statusDescription: 'Moved Permanently',
            headers:
              { "location": { "value": request.uri } }
        }

      return response;
    }
    return request
}

さいごに

解決方法はシンプルでした。あまり使う機会もなさそうですぐに忘れそうです。
HTMLの紙芝居を作る機会はあまりなさそうですが、ログからあまり把握できず意外と時間がかかったので同じことを繰り返したくないなと残します。