S3に配置したVueプロジェクトで更新するとNoSuchKeyエラーが発生する。

概要

AWS S3 + CloudFrontでホスティングしたポートフォリオサイトで画面を更新すると403や404エラーが発生したのでその回避策メモ

環境

Vue.js: 2.5.22
Vuetify: 1.3.0
AWS S3 + Cloud Front

参考サイト様

事象

SPAプロジェクト（Vue.jsで作成されたSPAの静的なサイト）をAWS S3 + Cloud Frontでホスティングしています。
ブラウザで画面を表示しルート（index.html）以外のページで更新（F5）すると下記の404エラーが表示される。（スクショ取り忘れ。）

<?xml version="1.0" encoding="UTF-8"?>
* Connection #0 to host kitigai.org left intact
<Error>
    `NoSuchKey`
    <Message>The specified key does not exist.</Message>
    <Key>about</Key>
    <RequestId>AA1A87E7D4659171</RequestId>
    <HostId>PYJ1pdk3i+Jj9rLmNNBimm2ZJ7ex7EpO2W3GtH9bGrGpZfzDSH+fnGqr5KqQo5CKDsf84mT4olY=</HostId>
</Error>

原因

※すみません。完全理解してるわけじゃないので間違ってるかもです。

SPAの場合、ページごとの静的なファイルは存在していない。
そのため、URLを直打ち（もしくはページの更新）をするとCloudFrontがS3の（URLで指定された）該当のパスを取得しようとするためエラーとなっている。
（取得しようとしたパスにファイルが存在しない。）

対策

CloudFrontのDistributions（一覧画面）より該当のDistributionを選択しDistribution Settingsを押下、Error Pagesタブを選択。

Create Custom Error Responseを押下し新規に作成する。

Custom Error Response Settings _ HTTP Error Code: 404: Not Found _ Customize Error Response: Yes _ Response Page Path: /index.html ## 環境により変化する場合がある。適宜変更のこと。 _ HTTP Response Code: 200: OK

Createを押下し作成完了。

即時反映されない場合はInvalidationでキャッシュを削除してください。
※過去の事象なので反映タイミングの記憶が少し曖昧。

雑感

日本語のサイトが無くて辛かった。みなさんこの問題にぶち当たってないのかな？

S3に配置したVueプロジェクトで更新するとNoSuchKeyエラーが発生する。

概要

目次

環境

参考サイト様

事象

原因

対策

雑感