弊社でサーバーレスの開発を行う際には、Vue.jsを利用したSPA（シングルページアプリケーション）を利用しています。
今回もお恥ずかしい話ですが、SPA環境におけるリダイレクトの設定をしていないために、リロード時にURLの実体が存在しないというエラーが発生させてしまいました。
SPA環境では、index.htmlにリダイレクトする必要があり、その設定を行っていなかったためのエラーとなります。
SPA フレームワークは通常、HTML5 history.pushState() をサポートしており、サーバーリクエストをトリガーせずに、ブラウザの場所を変更できます。この方法は、ユーザーがルート (または /index.html) から作業を開始する問題ありませんが、他のページに直接ナビゲートする場合は失敗します。
単一ページのウェブアプリケーション (SPA) のリダイレクト から
そこで、Amplifyのリダイレクト設定にて以下の様に設定することで解決する事ができます。詳細はこちらのサイトをご確認ください。
| 元アドレス | 送信先アドレス | リダイレクトの種類 |
|---|---|---|
| </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/> | /index.html | 200 |