手順 n. SPAで動的URLをCloudFrontで受け付けたいが403エラーになる

問題

CloudFront で SPA を動かして、動的URLを受け付けたいが、 動的なパスの先に実ファイルは無いので、403 エラーになってしまう。

解決策

CloudFront の設定でエラーページの向き先を SPA の index.html にしてしまう。 なんとも乱暴な感じがする。

もう1つの問題

別ディレクトリのパスを指した場合にも、SPA 側に飛ばされてしまう。

回避

根本解決ではないが、 Router で違う方のディレクトリに来たら、もう一方の route に飛ばすことにした。 こんなので良いのかは不明だが、まあいいや。

router/index.ts

ts

router.beforeEach((to, from, next) => {
  const path = to.fullPath;
  if (path.startsWith('/x/') || path === '/x') {
    location.href = '/x/';
    return;
  }
  next();
});