使用 React 和 AWS Amplify 构建无服务器架构：开发环境搭建
AWS Amplify 入门
结束了
根据维基百科的定义，无服务器计算是一种云计算执行模型，其中云服务提供商充当服务器，动态管理机器资源的分配。这意味着您可以专注于编写业务逻辑，独立构建可用于生产环境的应用程序，而无需操心服务器的配置、扩展或升级以及其他相关功能，这些工作通常都交给云服务提供商或第三方服务提供商。您可以利用这种模式构建几乎任何类型的应用程序或后端服务，所有运行和扩展应用程序所需的高可用性工作都由云服务提供商负责。
这种应用程序运行模式为我们带来了诸多好处，例如降低运营成本、缩短开发时间等等。如果您想了解更多关于无服务器架构及其优势的信息，请阅读这篇关于无服务器架构的文章。
读完这篇文章我能学到什么？
本文以及后续更多文章旨在教您如何利用无服务器架构和各种AWS服务构建 React 应用程序。我们将涵盖身份验证、创建和使用 REST API、分析和托管等领域，所有这些都将使用来自同一云提供商的服务。我们将使用AWS Amplify，它提供 CLI 工具和 UI 组件，让您能够轻松地在 AWS 上构建无服务器应用程序。
本文将引导您完成在 AWS 上构建开发环境的设置。这将为本系列后续文章奠定基础。
AWS Amplify 入门
AWS Amplify是一个库，它提供了一系列用于构建无服务器应用程序的工具。借助它，只需几行代码即可将各种 AWS 服务集成到您的应用程序中。您还可以获得 UI 组件来加速开发。要使用任何 AWS 服务或 Amplify 库，您需要一个 AWS 账户。如果您还没有账户，可以立即注册。注册后，您可以立即访问 AWS 免费套餐，无需预付任何费用。
安装并配置 Amplify CLI
Amplify CLI 是一款可用于创建和配置应用程序所需 AWS 服务的工具。它的目的是简化移动和 Web 应用程序的开发。该 CLI 使用AWS CloudFormation和嵌套堆栈，允许您在将配置推送到云端执行之前，在本地添加或修改配置。
要使用 CLI，您需要安装 Node.js（版本 8.11 或更高版本）和 npm（版本 5 或更高版本）。如果您尚未安装，请访问Node.js 下载页面。安装 Node.js 时也会同时安装 npm，但如果您只安装了 Node.js，也可以单独下载 npm。
通过在命令行运行命令来安装 CLI npm install -g @aws-amplify/cli。请勿使用 yarn 安装 CLI，因为它存在已知问题。安装 Amplify CLI 后，您需要对其进行配置，以指定必要的 AWS 凭证和区域。请按照以下说明配置 CLI。
- 打开命令行并运行该命令
amplify configure。这将在您的浏览器中打开 AWS 控制台，如果您尚未登录，则需要登录您的帐户。 - 登录后，返回命令行并按 Enter 键。
- 系统会提示您选择一个 AWS 区域。选择一个区域，然后按 Enter 键。
- 然后，您可以选择指定要与 CLI 一起使用的新 AWS IAM（身份和访问管理）用户的用户名。输入用户名并按 Enter 键。按下 Enter 键后，浏览器将打开并跳转到 AWS 控制台中的 IAM 控制面板。
- 在 IAM 控制面板中，系统会提示您创建新用户。用户名字段已预先填充了您在控制台中输入的用户名和
Programmatic Access已选择的访问类型。单击Next: Permissions按钮进入下一页。 - 保留默认选择的
Administrator Access策略，然后单击Next: Review按钮。 - 点击
Create User按钮创建用户。用户创建完成后，您将获得一个访问密钥 ID和一个秘密访问密钥。请妥善保管这些信息，因为您需要使用它们来设置 CLI。 - 返回命令行并按回车键。
- 系统会提示您输入访问密钥 ID。复制并粘贴该值，然后按 Enter 键。
- 另一个提示会要求输入秘密访问密钥。复制并粘贴该值，然后按 Enter 键。
- 现在系统会询问您是否要在本地计算机上创建或更新 AWS 配置文件。我们将使用默认配置文件。按 Enter 键选择默认配置文件并创建您的 AWS 配置文件。
创建 React 应用
现在 Amplify CLI 已经配置完毕，我们可以开始创建 React 应用了。我们将使用Create React App 来引导 React 应用的创建。这样我们就可以专注于编写代码，而无需担心 Babel 和 Webpack 的配置，因为它们已经预先配置好了。要创建 React 项目，请运行以下命令：
$ npx create-react-app serverless-react
这将创建一个serverless-react包含 React 应用所需文件的文件夹。下一步是初始化一个 Amplify 项目。为此，请按照以下说明操作。
cd serverless-react在命令行中运行命令，切换到项目目录。- 运行该命令
amplify init。系统会提示您回答一些问题。 - 选择你的代码编辑器，然后按回车键。
- 接下来的提示会询问您要构建的应用类型。请选择 JavaScript，然后选择 React，最后按 Enter 键，其余提示将使用默认值。
该amplify init命令使用 CloudFormation 堆栈在云端设置部署资源，并为 Amplify 准备好项目。它会将资源的配置详细信息提取到项目目录中。这些配置信息将用于向项目中添加 AWS 服务并更新服务配置。在项目目录的根目录下，您会找到一个.amplifyrc文件和一个amplify文件夹。它们包含我们将要使用的资源的 CloudFormation 配置信息。
项目设置的最后一步是将 Amplify 库添加到项目中。该库提供了一系列模块和 UI 组件，只需几行代码即可轻松集成 AWS 服务。运行以下命令即可通过 npm 安装它。
$ npm install -S aws-amplify && npm install -S aws-amplify-react
结束了
无服务器计算为我们带来了诸多优势，例如降低运营成本和缩短开发时间。它使我们能够专注于代码编写，为用户创造业务价值，而无需担心服务器的构建和维护。AWS 是众多无服务器计算服务提供商之一。配置和集成这些服务需要几个步骤，而 AWS Amplify 的构建旨在简化在 AWS 上构建无服务器应用程序的过程。它提供了一些工具，只需几个命令即可创建和配置服务，以及一些库组件，方便我们从代码中与这些服务进行交互。本文是介绍如何使用 AWS Amplify 构建无服务器应用程序系列文章的第一篇。我们已设置好 Amplify CLI 并创建了一个 Amplify 项目。
文章来源：https://dev.to/pmbanugo/going-serverless-with-react-and-aws-amplify-development-environment-set-up-43hj原文发表于我的博客。