React Academy · 课时

在 AWS S3 与 CloudFront 上托管 React SPA

Q: 「在 AWS S3 与 CloudFront 上托管 React SPA」这节课中我会学到什么？

构建 React 应用并上传到 S3，配置 CloudFront 分发和缓存失效。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

构建 React 应用并上传到 S3，配置 CloudFront 分发和缓存失效。

在 AWS S3 与 CloudFront 上托管 React SPA 是 CoddyKit 上的免费 React Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

S3 静态托管概览

AWS S3 可以将静态文件（HTML、JS、CSS、图像）作为网站提供服务。结合 CloudFront（CDN）后，React SPA 可以获得全球分发、HTTPS 和低延迟。

构建 SPA

将您的 React 应用构建到静态输出目录中。

# Vite:
npm run build  # outputs to dist/

# Create React App:
npm run build  # outputs to build/

# Next.js static export:
next build && next export  # outputs to out/

创建和配置 S3 存储桶

创建 S3 存储桶，启用静态网站托管，并设置索引文档和错误文档。

# Create bucket (replace with your domain name):
aws s3 mb s3://my-react-app.com

# Enable static hosting:
aws s3 website s3://my-react-app.com --index-document index.html --error-document index.html
# Error doc = index.html handles client-side routing (React Router)

上传构建文件

将构建输出同步到 S3。为带哈希的资源设置积极的缓存标头，并为 index.html 设置不缓存。

# Upload hashed assets with long cache:
aws s3 sync dist/ s3://my-react-app.com/ \
  --exclude index.html \
  --cache-control "max-age=31536000,immutable"

# Upload index.html with no cache (always fresh):
aws s3 cp dist/index.html s3://my-react-app.com/index.html \
  --cache-control "no-cache,no-store"

创建 CloudFront 分配

创建指向 S3 存储桶的 CloudFront 分配。使用 S3 网站端点（而不是 REST 端点）以支持 SPA 路由。

# In AWS console or CDK:
# Origin: my-react-app.com.s3-website-us-east-1.amazonaws.com
# Default root object: index.html
# Viewer protocol: Redirect HTTP to HTTPS
# Error pages: 403 → /index.html (200) for SPA routing

SPA 路由修复

CloudFront 会对未知路径返回 403（S3 不知道 React 路由）。配置自定义错误响应：将 403 指向 /index.html，并将状态设置为 200。

自定义域名与 SSL

在 us-east-1 中为您的域名申请 ACM 证书（CloudFront 要求如此）。将证书附加到分配，并添加指向 CloudFront 域名的 CNAME DNS 记录。

部署时使缓存失效

部署新文件后，使 CloudFront 中的 index.html 缓存失效（虽然它在 S3 中设置为不缓存，但可能仍会被 CloudFront 缓存）。

aws cloudfront create-invalidation \
  --distribution-id EXXXXXXXXXXXXX \
  --paths "/*"

GitHub Actions 部署

在持续集成中自动化部署工作流：构建 → 同步到 S3 → 使 CloudFront 缓存失效。

- name: Deploy to S3
  run: aws s3 sync dist/ s3://my-react-app.com/ --delete
  env:
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_KEY_ID }}
    AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET }}

- name: Invalidate CloudFront
  run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_ID }} --paths "/*"

S3 存储桶策略

阻止存储桶的公共访问，并使用源访问控制（OAC）策略，使只有 CloudFront 能读取存储桶，这比公开存储桶托管更加安全。

成本估算

S3 静态托管非常便宜：存储费用约为 0.023 美元/GB，请求费用约为 0.0004 美元/1000 次。CloudFront 的费用因区域和数据传输量而异，但免费套餐每月前 1TB 免费。

快速检查

使用 S3 托管 React SPA 时，为什么应将错误文档设置为 index.html？

回顾

构建 SPA，将其以分级缓存策略同步到 S3（带哈希资源使用长期缓存，index.html 不缓存），然后通过 CloudFront 提供服务。将 403 错误映射到 /index.html，修复 SPA 路由。使用 GitHub Actions 自动化部署，并在每次部署时使 CloudFront 缓存失效。

常见问题解答

「在 AWS S3 与 CloudFront 上托管 React SPA」课时是免费的吗？

是的 — 「在 AWS S3 与 CloudFront 上托管 React SPA」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「在 AWS S3 与 CloudFront 上托管 React SPA」这节课中我会学到什么？

构建 React 应用并上传到 S3，配置 CloudFront 分发和缓存失效。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「在 AWS S3 与 CloudFront 上托管 React SPA」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy