AWS Amplify を公開する前に SPA 用のリダイレクト設定を行う

AWS Amplify

AWS Amplifyでサイトを公開するには、amplify hosting というコマンドを打つか、AWS Amplify Consoleにブラウザでアクセスして、githubのレポジトリを登録する方法の2つがある。

githubレポジトリを登録する方法を使うと、SPA用のリダイレクト設定を行う必要がある。

SPAでは、index以外へのアクセス時はindexアドレスにリダイレクトする必要がある。

この設定をしていないと、index以外のアドレスへアクセスすると、/index.htmlという謎のアドレスに飛んで表示されなくなったり、リロードするとエラーになったりする。

設定の変更の仕方

AWS Amplify Consoleの左の欄のリダイレクトのタブを押す。

下記の内容で、リダイレクトの設定を行う。

元のアドレス : </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
送信先アドレス : /index.html
リダイレクトの種類 : 200

公式ドキュメント https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/redirects.html

AWS Amplify

Posted by opvel