AWS CloudFrontとS3の組み合わせにSPAを置く方法

AngularもReactもGatsbyもなかなかちゃんと動いてくれずに盛大にハマりました。
しかもURLがサブディレクトリにしなくてはならず、余計にわかりませんでした。
https://www.example.com/sub-dir
こんなURLで設置する必要がありました。

問題ある現象として食らっていたのは以下の感じ。
・403出まくる
・0バイトのファイルがダウンロードされまくる
・SPA の Routingが効かない -> 403地獄 ・リロード出来ない
・リロードするとTOPに行ってしまう

そんな感じの現象と戦いました。

Googleで検索して、いろいろな事例などを読みあさって、試行錯誤するも、全然上手くいかず・・・・
古い情報に惑わされて・・・
公式ドキュメントも情報量が多すぎていまいちポイントが掴めずで、
試行錯誤を繰り返し、うまく行った設定がこれ。

ルーティング効く。
リロード問題なし、どこのページでもリロード出来る。 コンソールにエラー出ない。

JSフレームワーク+CloudFront+S3設定メモ

・Angular ng build --configuration=production --base-href=/sub-dir  
・S3 ビルドは /に置く
・S3 ビルド aseet だけ /sub-dir 下に置く(リダイレクトでもいいかもしれない)
・S3 静的Webホスティング 有効 index -> index.hrml error -> index.hrml
・S3 オブジェクトの読み取り はい
・S3 オブジェクトの読み取りアクセス権限 はい
・CloudFront Viewer Protocol Policy Redirect HTTP to HTTPS
・CloudFront Origin Path なにも設定しない  
・CloudFront Default Root Object index.html  
・CloudFront Custom Error Response Settings 403 Response Page Path /index.html  
・CloudFront Origin Damain Name backetName.s3-website-ap-northeast-1.amazonaws.com ←S3静的ホスティングエンドポイント