# VuePressメモ. 07. 旧ページからのリダイレクト

# ディレクトリ構成を変えたときに、旧URLから飛ばせるようにする

(1) enhanceApp.js に記載する

export default ({
  Vue,
  options,
  router
  siteData
}) => {
  router.beforeEach((to, from, next) => {
    const redirectList = {
      '/'                 : '/ja/',
      '/test1.html'       : '/ja/test1.html',  // ← ★ この辺
      '/test1-en.html'    : '/en/test1.html',
      '/test2.html'       : '/ja/test2.html',
      '/test2-en.html'    : '/en/test2.html',
    }
    const redirect = redirectList[to.path]

    if (redirect) {
      next({ path: redirect })
    } else next()
  })
}

(2) これだけだと、AWS CloudFront で、403 エラーが出てしまうので、CloudFront でエラーページ設定をする

CloudFront > 該当のディストリビューション > エラーページ

カスタムエラーレスポンスを作成

設定項目 設定値
HTTPエラーコード 403: Forbidden
エラーレスポンスをカスタマイズ ● はい
レスポンスページのパス /index.html
HTTPレスポンスコード 200: OK
  • これで それっぽく動作する
  • ルーティングは Vue (index.html) に任せるという理屈だと思う。
  • パターンにない URL では、Vue 側で 404.html 出してくれる

[ 📩 ご意見 ]