DEV Community
·
在AWS S3上使用CloudFront托管React应用
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
本文介绍了如何在AWS上构建和托管React项目，包括创建React应用、上传文件到S3桶、配置静态网站托管及权限，以及设置CloudFront以安全交付项目。
🎯
关键要点
- 在命令提示符中导航到项目目录并创建React项目。
- 使用npx create-react-app命令创建React应用并安装依赖。
- 启动开发服务器后，可以在本地IP地址上查看应用。
- 登录AWS管理控制台并创建一个唯一名称的S3桶。
- 禁用ACL选项，确保桶中的所有对象由该账户拥有。
- 禁用阻止所有公共访问选项并创建桶。
- 将React项目文件上传到S3桶。
- 在S3桶的属性标签中启用静态网站托管并设置主文件名。
- 在权限标签中生成新的桶策略以授予公共读取访问权限。
- 在CloudFront服务中创建分发并选择S3桶作为源域。
- 启用HTTP到HTTPS的重定向和适当的缓存及安全选项。
- 禁用Web应用防火墙（WAF）选项（如果不需要）。
- 等待CloudFront分发部署完成后，复制CloudFront域URL并在新浏览器标签中打开。
❓
延伸问答
如何在AWS上创建一个React应用？
在命令提示符中导航到项目目录，使用npx create-react-app命令创建React应用并安装依赖。
如何在AWS S3上上传React项目文件？
登录AWS管理控制台，创建一个唯一名称的S3桶，然后将React项目文件上传到该桶。
如何配置S3桶以托管静态网站？
在S3桶的属性标签中启用静态网站托管，并设置主文件名，例如index.html。
如何设置CloudFront以安全交付React项目？
在CloudFront服务中创建分发，选择S3桶作为源域，并启用HTTP到HTTPS的重定向。
在创建S3桶时需要注意哪些权限设置？
禁用ACL选项，确保桶中的所有对象由该账户拥有，并禁用阻止所有公共访问选项。
如何生成S3桶的公共读取访问权限策略？
在权限标签中生成新的桶策略，使用策略生成器创建一个允许公共读取访问的策略，并保存更改。
🏷️
标签
➡️
