S3に配置したVueプロジェクトで更新するとNoSuchKeyエラーが発生する。
概要
AWS S3 + CloudFrontでホスティングしたポートフォリオサイトで画面を更新すると403
や404
エラーが発生したのでその回避策メモ
目次
環境
- Vue.js: 2.5.22
- Vuetify: 1.3.0
- AWS S3 + Cloud Front
参考サイト様
- amazon web services - CloudFront + S3 Website: "The specified key does not exist" when an implicit index document should be displayed - Stack Overflow
- amazon s3 - Vue.js Router: history mode and AWS S3 (RoutingRules) - Stack Overflow
事象
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> <Code>NoSuchKey</Code> <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
- HTTP Error Code:
Create
を押下し作成完了。
即時反映されない場合はInvalidation
でキャッシュを削除してください。
※過去の事象なので反映タイミングの記憶が少し曖昧。
雑感
日本語のサイトが無くて辛かった。みなさんこの問題にぶち当たってないのかな?