vue-routerで指定したパスで404エラーが発生したときの対応方法（Vue.js, AWS S3 + CloudFront）

フレームワーク/環境

• Vue.js + vue-router
• AWS S3 + CloudFront

事象

以下のようにvue-routerで指定したパスにアクセスすると404エラー（not found）が発生する。
ただし、localhost上やS3のみ（CloudFront無し）で公開する場合は、404エラーは発生せず正常にアクセスできる。

router.ts

import Vue from 'vue';
import Router from 'vue-router';
import Tools from './views/Tools.vue';
import Info from './views/Info.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'tools',
      component: Tools,
    },
    {
      path: '/info',
      name: 'info',
      component: Info,
    },
  ],
});

対応方法

概要

「CloudFront」で「Custom Error Response」を作成して、HTTP Error Codeが404（not found）の場合は、レスポンスコードを200にしてindex.htmlを返すようにする

詳細

1. AWSのコンソールから「CloudFront」を開く
2. メニューの「Distributions」＞対象のIDをクリック
3. 「Error Pages」タブ＞「Create Custom Error Response 」ボタンをクリック
4. 「Custom Error Response Settings」画面で以下のように設定して、「Yes, Edit」ボタンをクリック

項目名	値
HTTP Error Code	404: Not Found
Customize Error Response	Yes
Response Page Path	/index.html
HTTP Response Code	200: OK

感想

エラーが解消されるとテンションが上り、別のエラーに直面してまたテンションが下がる

参照

• Vue.js Router: history mode and AWS S3 (RoutingRules)