回到旧石器时代，对于软件来说，这意味着 30 年前，我们有 HTML、CSS 和 JavaScript，并且我们用 HTML 编写了网站的所有结构。当我们想要为我们的网站创建动态内容时，我们在 HTML 中间添加了 PHP 或 Java 代码，然后我们将在服务器上运行该代码，它将输出我们想要放在那里的 HTML。通过运行代码为网站生成最终 HTML 的过程称为渲染，当时它发生在服务器端。
然后出现了 Angular、React 和 Vue 等 Web 组件和框架，它们稍微改变了范式。现在，我们不再使用 PHP 或 Java 片段编写纯 HTML，而是编写 JavaScript 代码，然后输出整个 HTML 代码。由于它是 JavaScript，我们可以在用户计算机的浏览器上运行它。这就是所谓的客户端渲染。
客户端渲染的一个巨大好处是我们可以使用用户的 CPU。这对我们来说真是太棒了，我们不必为计算能力付费。然而，这意味着用户必须等待他们的计算机花费多长时间才能呈现该网站。请注意，当时这并不被认为是一个大问题。请记住，当时用户的期望非常不同：等待网站加载 3 或 5 秒被认为是正常的。如今，2秒多的时间似乎就像永恒一样。
随着计算能力变得越来越便宜，有人想到了将渲染带回服务器的想法。我们的想法是使用我们更强大的服务器来以比用户计算机所能达到的速度快得多的速度呈现网站，从而显着减少加载时间。当然，我们支付了额外的费用，但总的来说，改进的用户体验是值得花额外的钱的。云计算在那里也发挥了重要作用：不仅每 CPU 小时基础设施更便宜，而且创建和维护所需的工程时间也更少。
但我们没有带回旧语言！相反，我们开始在服务器中运行相同的 React 代码，就好像它是用户的浏览器一样。造成这种情况的一个重要原因是，虽然所有这些来回发生，但前端变得越来越复杂。这导致开发人员被分为前端或后端，虽然有全栈开发人员，但大多数只是一方面很强，另一方面很弱（我就是其中之一！）。因此，那些知道如何编写 UI 代码的人不知道 Java 或 PHP（甚至不知道像现在这样的后端开发人员），而那些知道这些语言的人也不知道如何编写 UI 代码。解决方案？让我们创建一个像 Next.js 这样的框架，在我们的服务器中运行相同的 React 代码。这样，我们就可以两全其美：具有服务器端渲染的前端框架！
这就是我们从服务器端渲染到客户端渲染，再回到服务器端渲染的方式。我经常说过，技术是循环的。
放大有什么帮助
AWS Amplify 是一组工具，可帮助前端开发人员使用 AWS 基础设施甚至构建后端，而无需对基础设施或后端了解很多。它分为两部分：Amplify Hosting是一项托管服务，为无服务器应用程序提供托管和 CI/CD。Amplify Studio是一个可视化开发环境，可让您像使用无代码工具一样构建 UI 和后端，并具有可重用的组件。我们将使用 Amplify Hosting，但您可能有兴趣查看 Amplify Studio。
为什么不是 EC2 实例？
我们知道 AWS Amplify 将在幕后使用 EC2 实例，对吗？那么，既然我们确实了解 AWS（我的意思是，您正在阅读有关 AWS 的时事通讯！），为什么我们不应该只使用 EC2 实例而不是依赖托管服务呢？你可以！这是我们经典的购买与构建决策，对吧？现在您知道了，我总是建议您默认使用托管服务，并且仅在有充分理由时才进行构建。我很想在这里推荐相同的内容，但 Amplify 采用托管服务中的托管并将其提高到 11，价格反映了这一点。
Amplify 作为一个自助服务平台，对云基础设施知之甚少或一无所知的人可以使用它来开发和部署他们的应用程序。这就像一项高度托管的大型服务：您不再只解决问题的一部分，而是解决在云中托管应用程序的整个问题。它确实非常昂贵，因此您可能需要考虑 EC2 或 Fargate 上的 ECS 集群（比普通 EC2 更昂贵，但更容易）。让我们计算一些数字，这样您就可以了解它实际上会花费您多少钱。
AWS 扩大定价
以下是 Amplify 向您收费的方式：
- 构建和部署：每分钟 0.01 美元
- 数据存储：每月每 GB 0.023 美元
- 数据传出：每 GB 服务 0.15 美元
- SSR 请求：每 100 万个请求 0.30 USD + 每 GB 小时 0.20 USD
例如，假设您是一家初创公司，有以下假设：
- 10,000 名日活跃用户
- 5 名开发人员，每人每天进行 2 次提交
- 平均构建时间为 3 分钟
- 团队周一至周五工作（20 天/月）<——这对于初创公司来说是最不现实的假设
- 该应用程序大小为 25 MB
- 平均页面大小为 1.5 MB
以下是我们的计算：
Total build time per month = devs * commits/day * days/month * avg. build time = 5 * 2 * 20 * 3 = 600 build minutes per month. 600 * $0.01 = $6
Monthly GB served = daily active users * average page size * days/month = 10,000 * (1.5/1024) * 30 = 439.45 GB. 439.45 * $0.15 = $65.92
Monthly GB storage = app size * builds/month = (25/1024)(5*2*20) = 4.88 GB. 4.88 * $0.023 = $0.11
总费用 = $6 + $65.92 + $0.11 = $72.03/月
好吧，那还不错，对吧？好吧，它主要是每月提供的 GB 数量，所以让我们使用 CloudFront 来运行这些数字：
- 对于最昂贵的地区：
439.45 * $0.12 = $52.73 - 对于最便宜的地区：
439.45 * $0.085 = $37,35
Amplify 贵 25% 到 75%！这么多吗？这取决于。0.10 美元多出 75% 的电量比我输入这句话所花费的电量要少（真丢脸！尤其是添加这个括号以使句子足够长以使该声明成立）。1.000 美元的 75% 多出 750 美元，我将用这笔钱为您设置 CloudFront！
用于后端的 AWS Amplify
Amplify 还允许您托管一个在 Lambda 函数中运行的后端。您对它没有太多的控制权，但它对其目标受众来说效果很好：如果对 Lambda 函数有很多控制权，他们就不知道该怎么做。Amplify 还允许您通过声明性且易于使用的库轻松使用其他 AWS 服务。这样，您就可以从前端使用 Cognito 或 S3，而无需对 Cognito 或 S3 了解很多。这是Amplify 库的完整列表，您可以查看JavaScript 库的自述文件作为其功能的示例。
设想
作为一名工程师，您每天工作 8 小时，并且您想在空闲时间创办一家初创公司。您知道您需要良好的实践，但您没有时间手动设置所有内容。您想要从使用 React 和 Next.js 构建的网站开始。您需要服务器端渲染，显然还需要 CI/CD 管道。您希望一切都是无服务器的，这样您就可以尽可能少地支付费用，同时掌握运行初创公司、获取用户以及所有这些（这实际上是最困难的部分）的窍门。
解决方案
在 AWS Amplify 中托管应用程序，由其处理托管和 CI/CD。在构建后端时，可以使用 Amplify 创建 Lambda 函数，也可以使用无服务器或 SAM 等更传统的功能，具体取决于您的专业知识。
分步说明
第 0 步：设置
- 从官方网站下载并安装Node.js。或者，安装 nvm 和您最喜欢的 Node.js 版本
- 如果 npm 没有附带 Node.js，请安装。
- 安装纱线：
npm install --global yarn - 安装git
第 1 步：创建 Next.js 应用程序
- 打开终端
- 运行以下命令：
yarn create next-app - 按照提示操作：你的项目叫什么名字？simpleaws 应用程序您想使用 TypeScript 吗？不您想使用 ESLint 吗？是的您想使用 Tailwind CSS 吗？不您想使用
src/目录吗？是的您想使用应用路由器吗？（推荐）是您想自定义默认导入别名吗？不 - 将目录更改为应用程序的目录：
cd simpleaws-app - 本地启动应用程序：
yarn dev - 打开浏览器，转到http://localhost:3000并检查页面是否正确加载。
第 2 步：为应用程序创建 git 存储库
- 转到https://github.com/new并创建一个新存储库
- 在本地初始化存储库：
git init - 添加 GitHub 存储库作为源（将
YOUR_USERNAME和替换PROJECT_NAME为您的值）：git remote add origin [email protected]\:username/project-name.git - 添加文件，提交并推送：
git add .git commit -m 'initial commit'git push origin main
第 3 步：创建 Amplify 项目
- 转到放大控制台
- 向下滚动到“开始使用”部分，然后在“Amplify Hosting”下单击“开始使用”
- 选择 GitHub 并单击继续
- 单击授权 AWS Amplify (us-east-1)（绿色按钮）
- 选择您的用户或组织，然后单击继续
- 选择仅选择存储库，单击下拉列表选择存储库，然后单击您的存储库。单击安装并授权
- 使用您的安全密钥向 GitHub 进行身份验证，或者单击“使用您的密码”（字体非常小）并输入您的密码。
- 单击最近更新的存储库下的下拉列表，然后选择您的存储库。将分支保留为主分支，然后单击“下一步”
- 验证构建和测试设置（它们应该没问题，它们是在初始化项目时由 Next.js 创建的）
- 选中允许 AWS Amplify 自动部署项目根目录中托管的所有文件
- 点击下一步
- 单击保存并部署
- 等待配置、构建和部署完成
第 4 步：测试应用程序
- 单击窗口图标下方带有亚马逊箭头的链接。验证网站是否正确加载。
第 5 步：删除应用程序
- 点击右上角的操作
- 单击删除应用程序
- 输入“删除”
- 单击删除
解释
第 0 步：设置
只需安装一些工具和依赖项。
第 1 步：创建 Next.js 应用程序
Next.js 有这个很棒的项目初始化程序，它可以创建您需要的所有基本脚手架。这有点固执己见，但我从未见过任何人不喜欢它（如果你不喜欢它，请告诉我，你将是第一个！）。此外，它也符合这样的场景：你只是想把事情做好。
第 2 步：为应用程序创建 git 存储库
我们需要 git 存储库中的应用程序，以便 Amplify 可以跟踪分支的更改并从那里提取代码。您可以使用 GitHub、GitLab、Bitbucket 或 CodeCommit。您也可以不设置 git 存储库并手动上传代码（或引用 S3 存储桶），但在这种情况下，Amplify 无法为您执行 CI/CD。
第 3 步：创建 Amplify 项目
这里唯一奇怪的是构建步骤。Amplify 会从您的 package.json 文件中自动检测它们，并创建您在该步骤中看到的配置文件。当然，您可以对其进行编辑。不过，我建议您使其与 package.json 文件保持一致。
第 4 步：测试应用程序
部署完所有内容后，Amplify 将通过类似 的 URL 为您的应用程序提供服务branch-name.d1m7bkiki6tdw1.amplifyapp.com。您可以通过 Amplify 控制台设置自定义域。不要只是转到 Route 53 并将域指向您的 Amplify URL，这会因为 SSL 证书而失败。
第 5 步：删除应用程序
我们不要假装我们总是记得删除我们部署的东西。这是友情提醒删除该应用！
最佳实践
卓越运营
- 为每个环境设置一个分支：创建一个开发环境，其中 Amplify 从开发分支部署，并创建一个产品环境，其中 Amplify 从主分支部署。仅通过拉取请求提交到这些分支。这样，合并 PR 就意味着在该环境中发布。
- 监控性能： Amplify 提供监控服务，允许您查看日志、构建事件和其他指标。
安全
- 使用 Amplify 的内置身份验证： Amplify 与 Cognito 集成以进行用户身份验证。这让您可以非常轻松地使用 Cognito 用户池。
可靠性
- 数据备份和版本控制：如果您使用 Amplify DataStore，请定期备份数据。
性能效率
- API 缓存：如果您将 GraphQL 与 AppSync 结合使用，请启用缓存以缩短 API 响应时间并减少后端的负载。
成本优化
- 考虑不使用 Amplify：我不想让自己支持或反对 Amplify，因为决定取决于您的场景和问题（请记住，没有单一的最佳解决方案！）。只需考虑成本、权衡，并分析什么是最适合您的解决方案。可能是Amplify，也可能是手动做事！总的来说，请记住，维护软件的成本远高于构建初始版本的成本。停止复制云解决方案，开始了解它们。通过Simple AWS 时事通讯，与超过 3600 名开发人员、技术主管和专家一起学习如何构建云解决方案，而不是通过考试。
- 真实场景及解决方案
- 解决方案背后的原因
- 改进它们的最佳实践
