關於AWS的使用方法，其實網路上有很多的解答
不過由於AWS更新的其實不慢，導致很多答案過沒兩三年會過時
剛好之前在發布前端網站時所遇到的坑，把它記錄下來
本篇的重點只會著重在於前端部署架構上的坑以及解決方法，並不會詳細介紹內部使用到的細節

架構

比較特別的部分只有根據環境將防火牆的部分區分成了 CloudFront Funciton 以及 WAF 去作防火牆的部分

1. 非生產環境直接在 CloudFront Funciton 指定 Source IP，如此一來就可以阻隔掉非公司內的 request，而且 CloudFront Function 一個月讓你免費兩百萬次，能打到要錢算你厲害
2. WAF 好處是不用寫程式，而且有多種條件可以讓你設定，還有 monitor 可以監控你的 metric
3. 前端的部分是 SPA

CloudFront

由於前端是 SPA 的關係，所以再指定 URI 進去 S3 找不到資源返回 404 的時候
錯誤響應的設置需要回傳 /index.html
這會跟 S3 Policy 有著非常大的關係

S3

原先實務上的需求是希望將 ALC 以及 Policy 全部鎖死，不將 Bucket 對外開放，僅能由 CloufFront存取
在這部分網路上的教學只會告訴你要開啟 S3 的靜態網站發布選項，但實務需求是做得到的

S3 ACL

預設就是全部都不公開，這沒啥大問題

S3 Policy 設定

在你設定 CloudFront 時可以指定你的 Source，也就是 S3
同時 CloudFront 會產生 Policy 會需要放到 S3 Policy 內，CloudFront 才能從 S3 抓取靜態資源
不過預設的 Policy 有個大坑，也就是請參考[1]的文件，這份文件告訴你如何對 S3 存取被拒絕的檢查方法
當初看到眼睛快凸出來，結果真的就漏看了一個最關鍵的 確認物件非缺失物件或不包含特殊字元
問了 Support 也說很多人死在這地方過

必須在 S3 Policy 內自行加上 s3:ListBucket 許可
不然你的 CloudFront 在你的 URI 進去 S3 找不到資源只會從收到 403 存取被拒
而不是你期待的 404

所以不是很直觀地用 URI Mapping 的方式，利用 GetObject 去找資源，沒有就回傳 404
當初被坑了一個禮拜
並且在 CloudFront 錯誤響應的地方原本是用 403/404 一起解決的
但是用 403 是被拒絕權限的情況，這並不合理
所以花了很多苦心只為了把一個不合理的條件給刪掉，不過也學到了很多

參考

1. [1]如何對來自 Amazon S3 的「403 存取遭拒」錯誤進行疑難排解？ https://repost.aws/zh-Hant/knowledge-center/s3-troubleshoot-403