关于AWS的使用方法，其实网路上有很多的解答
不过由于AWS更新的其实不慢，导致很多答案过没两三年会过时
刚好之前在发布前端网站时所遇到的坑，把它记录下来
本篇的重点只会着重在于前端部署架构上的坑以及解决方法，并不会详细介绍内部使用到的细节

架构

比较特别的部分只有根据环境将防火墙的部分区分成了 CloudFront Funciton 以及 WAF 去作防火墙的部分

非生产环境直接在 CloudFront Funciton 指定 Source IP，如此一来就可以阻隔掉非公司内的 request，而且 CloudFront Function 一个月让你免费两百万次，能打到要钱算你厉害WAF 好处是不用写程式，而且有多种条件可以让你设定，还有 monitor 可以监控你的 metric前端的部分是 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]如何对来自 Amazon S3 的「403 存取遭拒」错误进行疑难排解？ https://repost.aws/zh-Hant/knowledge-center/s3-troubleshoot-403