在管理缓存的同时使用 CloudFront 在 S3 上部署 React 应用程序的步骤? [英] Steps to deploy a React app on S3 with CloudFront while managing caching?

问题描述

我需要使用 SSL 和管理缓存在 AWS S3 上部署 React 应用程序.需要哪些步骤，我可能会遇到哪些问题?

I need to deploy a React App on AWS S3 using SSL and managing caching. What are the required steps, and what are some of the problems I might encounter?

推荐答案

很好的问答@charlie-hileman，感谢分享！关于我可能会遇到的一些问题"，我正在探索这种方法的相关成本，我认为这可能会帮助其他人解决这个问题.

Great question and answer @charlie-hileman, thanks for sharing! In regards to "some of the problems I might encounter", I was exploring the associated costs of this approach, and I thought it might help someone else coming to this question.

CloudFront 文档:

CloudFront docs:

对请求的前 1,000 条路径不收取额外费用每月失效.此后，每个请求的路径 $0.005无效.

No additional charge for the first 1,000 paths requested for invalidation each month. Thereafter, $0.005 per path requested for invalidation.

简单的公式，但在没有实际项目的情况下很难分解.

Easy formula, but tricky to factor without a real-world project.

公式:

0.005 * ((files * deployments) - 1000)

我相当普通的 create-react-app 生成了 202 个文件(由于默认的分块策略，其中很多是 webpack 块).为了便于数学计算，我会将其四舍五入到 200.这意味着我每个月可以免费获得大约 5 次失效:

My fairly modest create-react-app generates 202 files (a lot of which are webpack chunks due to the default chunking strategy). I'll round it down to 200 for easy maths. That means I get roughly five invalidations per month for free:

0.005 * ((200 * 5) - 1000)      // $0.00

除此之外，每次部署的成本为 1 美元.

Beyond that, each deployment costs $1.

让我们扩展一下.假设我每月工作大约 20 天(每周工作 5 天，每月平均工作 4 周).按照这个速度，如果我平均部署 1 次、2 次、3 次，这就是成本...

Let's scale that. Say I work roughly twenty days a month (five days a week, avg four weeks per month). At that rate, here's the cost if I deploy on average 1x day, 2x day, 3x...

0.005 * ((200 * 20 * 1) - 1000) // $15/mo
                   * 2          // $35/mo
                   * 3          // $55/mo
                   * 4          // $75/mo
                   * 5          // $95/mo

考虑到好处，这实际上仍然相对经济，现在我正在了解成本.此外，如果项目随着时间的推移趋于稳定并且部署更少，这可能是一个摊销成本.我会将此与(例如)保持 Node 服务器以托管该项目的运营成本进行比较.

That's actually still relatively economical considering the benefits, now that I'm going into it understanding the costs. Plus, it might be an amortized cost if the project will stabilize and have fewer deployments over time. I would factor this against comparison operating costs of (for example) keeping a Node server up to host this project.

这篇关于在管理缓存的同时使用 CloudFront 在 S3 上部署 React 应用程序的步骤?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！