Zenn
📝

Amplify Hosting のリダイレクトでステータスコードが常に 200 で返却される挙動について

に公開
AWS
Amplify
tech

404 rewrite not working for SPAs like React · Issue #2524 · aws-amplify/amplify-hosting
上記 GitHub Issue でも報告されていました。
SPA などの一部のアプリケーションでは Amplify Hosting のリダイレクトで 404 (Rewrite) を指定しても HTTP ステータスコードは 200 で返却されてしまうという事象です。

試してみた

Vue.js のデフォルトアプリで試したところ、上記挙動を確認できました。
Amplify Hosting のリダイレクトの設定は以下の通りです。

[
  {
    "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>",
    "status": "404-200",
    "target": "/index.html"
  }
]

コンソール上だと以下の定義です。

この状態で Amplify のデフォルト URL へアクセスした結果、HTTP ステータスコードは 200 で返却されました。

$ curl -s -D - https://main.d34r4hc1lq4p4e.amplifyapp.com | grep "HTTP/2 200"
HTTP/2 200

本記事執筆時点では GitHub Issue はオープンなので、上記事象については未解決のようでした。

単純なアプリケーションの場合

/
├── test/
│   └── index.html
└── index.html

Vue などのフレームワークを使用せずに上記のような単純なアプリケーション構造で試したところ、ステータスコードが 404 で返却されました。
そのため、フレームワークと Amplify Hosting の組み合わせによる事象であると思われましたが、網羅的な検証はしていないため、参考程度にとどめて頂ければ幸いです。

まとめ

今回は Amplify Hosting のリダイレクトでステータスコードが常に 200 で返却される挙動について紹介しました。
どなたかの参考になれば幸いです。

参考資料

Discussion