SPAをS3でホスティングすると404が出てしまうのの対策
何回か遭遇しているので備忘録として書いておく。
問題
S3でホストしているSPAでURLのルーティングをしたい場合、とくに何も設定しないとS3側のルーティングが優先されるのでSPAでのルーティングがされる前にエラーになってしまう。
例えば、http://example.com/user/account_settings というアカウント設定画面のURLがあった場合、これをWebブラウザでHTTPリクエストしたらSPA上のアカウント設定画面が表示開くことを期待する。
しかし、S3としてはこのURLがSPAのものかどうかなんて分かるはずもなく、ただの /user/account_settings へのリクエストとして捌くので、そんなS3オブジェクトは無いということで404エラーを返してしまう。
普通にindex.htmlを開いた後に画面遷移したりする分には、SPA内での遷移として扱われるのだが、直リンで指定した場合等にはエラーとなってしまうので少しわかりづらい。
対策
Cloud Frontを挟んで、S3の404レスポンスを全てを200に書き換えて、index.htmlを返すようにする。
少しトリッキーだが、こうすることでユーザーにはindex.htmlが返り、ルーティングの処理は全てSPA側に任せることができる。
S3のerror pageとしてindex.htmlを指定することでも実現できそうだが、多分レスポンスコードがエラーのままになるのでダメ（だと思う。たぶん。試してはいない。）
感想
SPAだとなるほど確かにという感じ。S3に限らず他のWebサーバーでホスティングする時にも同じような設定は必要そうだ。
これだけのためにCloud Frontを挟むことに若干の抵抗感があって、S3だけでできないもんかねーという気持ちにもなったが、S3はStorageサービスであって、Webサーバーとして扱えるのはあくまでオプションだということを考えると、贅沢言ってんな自分とか思ってました。
