AWS Amplifyを使ってて挙動がおかしくなった話～備忘録～

最近、はまっているゲームのキャラクター紹介SPAを作ろうと思って、React.jsとsemantic-ui-reactを使って作成しております。

せっかくなら、デプロイして他の人にも見てもらいたいと思い、が、バックエンドの知識が皆無なのでAWS Amplifyを使用して、ビルドからデプロイまでお任せすることにしました。

問題点

SPAのデプロイが出来たまではいいのですが、、、ページをリロードすると301,302ステータスコードがレスポンスされ、意図しない動きをしてしまいました。(locationの値がindex.htmlとなり、うまくリロードができていない)

原因

おそらく、ページ遷移した後のURIとリロードした時のURIが一致せず、index.htmlがリダイレクトされたことが原因だったと思います。

解決策

Amplify Consoleは、リダイレクト設定なるものがあるので、そこに指定された値を埋め込めばよしというものでした。以下、Amplifyのリダイレクトに関するページ https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/redirects.html

●送信元アドレス：
^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
●ターゲットアドレス：
/index.html
●入力
200(Rewrite)

これで解決されました。送信元アドレスが複雑ですが、リロードしても今のURIで更新するよって意味なのでしょうか。

とりあえず、備忘録。