CountryRank是一个基于React（Vite）构建的国家数据探索与对比应用。我将它部署到了AWS上，采用了一套生产级的静态托管方案：私有S3存储桶承载构建产物，前方由CloudFront提供HTTPS、缓存加速及客户端路由的正确处理。 技术栈包含以下组件：应用层使用React+Vite，通过npm run build构建为静态资源；存储层使用AWS S3私有存储桶，完全关闭公共访问；分发层由CloudFront充当S3前方的CDN，提供HTTPS支持和SPA路由的自定义错误处理；安全层通过IAM存储桶策略配合服务主体与条件实现精细化访问控制；衔接层使用Origin Access Control（OAC）机制，让CloudFront能够安全读取私有存储桶中的内容。 整个项目被刻意设计为两个阶段推进。第一阶段先搭建纯S3静态托管以理解基线架构，第二阶段在发现S3单点方案的局限后，再引入CloudFront与OAC。 第一阶段的S3存储桶搭建包含几个关键步骤：创建存储桶时，名称必须全局唯一，仅允许小写字母与连字符。这里有一个容易踩坑的细节——名称中的点号会在后续接入CloudFront时破坏SSL证书匹配。配置初期需要关闭Block Public Access选项，AWS在这一步要求输入一段确认短语而非简单勾选复选框，这个设计很有深意，它在提醒操作者这是一个会产生重大后果的决定，而非日常的开关切换。随后需要在存储桶上启用静态网站托管，将索引文档和错误文档都设置为index.html。最后附加一条允许公共读取的存储桶策略。 其中有两个细节值得深入理解。策略中的Resource字段必须带上/*后缀，原因在于s3:GetObject操作作用于单个对象而非存储桶本身；不带/*的存储桶ARN指向的是容器本身（其配置与列表），而非内部的真实内容。另外，S3会将策略中填写的存储桶名称与实际挂载的存储桶进行校验比对，因此名称拼写错误会被直接拒绝，从机制层面杜绝了误配置的可能。
热门跟贴