lycheejam's tech log

チラ裏のメモ帳 | プログラミングは苦手、インフラが得意なつもり。

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

概要

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

目次

環境

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

f:id:HM_Atlas:20190219120626p:plain

参考サイト様

事象

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

Createを押下し作成完了。

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

雑感

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