使用react开发配置环境_使用React和AWS Amplify实现无服务器化：开发环境设置

使用react开发配置环境

by Peter Mbanugo

彼得·姆巴努戈(Peter Mbanugo)

使用React和AWS Amplify实现无服务器化：开发环境设置 (Going serverless with React and AWS Amplify: Development Environment Set up)

Serverless computing provides us with benefits such as reduced operation costs and development time. It allows us focus on our code to provide business value to the users without worrying about building and maintaining servers.

无服务器计算为我们提供了诸如降低运营成本和缩短开发时间的优势。 它使我们能够专注于代码，从而为用户提供业务价值，而不必担心构建和维护服务器。

AWS is one of the many providers of serverless computing services. In this post, I’ll walk you through setting up your development environment to build on AWS. This will be a primer for future posts in this series.

AWS是无服务器计算服务的众多提供商之一。 在本文中，我将引导您设置开发环境以在AWS上构建。 这将是本系列后续文章的入门。

According to Wikipedia, serverless computing is a cloud-computing execution model in which the cloud provider acts as the server, dynamically managing the allocation of machine resources. What this typically means is that you can single handedly build production-ready apps by focusing on coding the business logic, and leave off the task of provisioning servers, scaling or upgrading servers, and other functionalities to cloud providers or third-party service providers. You can utilise this to build nearly any type of application or backend service, and everything required to run and scale your application with high availability is handled for you.

根据Wikipedia的说法，无服务器计算是一种云计算执行模型，其中云提供商充当服务器，动态管理机器资源的分配。 这通常意味着您可以通过专注于对业务逻辑进行编码来单手构建可用于生产环境的应用程序，而无需为云提供商或第三方服务提供商配置服务器，扩展或升级服务器以及其他功能。 您可以利用它来构建几乎任何类型的应用程序或后端服务，并为您处理以高可用性运行和扩展应用程序所需的一切。

This model of running applications provides us benefits such as reduced operational costs, reduced development time, and many more. If you’d like to read more about what serverless is and its benefits, checkout this article on serverless architecture.

这种运行应用程序的模型为我们带来了很多好处，例如降低了运营成本，缩短了开发时间等等。 如果您想更多地了解什么是无服务器及其优势，请查阅有关无服务器架构的本文 。

我要学习阅读什么？ (What am I going to learn reading this?)

This post (and more to come in the near future) is intended to teach you how to build React applications utilising the serverless architecture and various AWS services. We will cover areas such as authentication, creating and consuming REST APIs, analytics, and hosting, all while utilising services from a single cloud provider. We will be working with AWS Amplify, which provides CLI tools and UI component to make it easy to build serverless applications on AWS.

这篇文章(以及不久以后的更多内容)旨在教您如何利用无服务器架构和各种AWS服务构建React应用程序。 我们将涵盖身份验证，创建和使用REST API，分析和托管等领域，同时利用单个云提供商的服务。 我们将与AWS Amplify一起使用，后者提供CLI工具和UI组件，使在AWS上轻松构建无服务器应用程序变得容易。

In this post, I’ll walk you through setting up your development environment to build on AWS.

在本文中，我将引导您设置开发环境以在AWS上构建。

AWS Amplify入门 (Getting started with AWS Amplify)

AWS Amplify is a library that provides you with tools to build serverless applications. With it, integrating various AWS services with your app can be done in few lines of code. You also get UI components to accelerate development.

AWS Amplify是一个库，为您提供构建无服务器应用程序的工具。 借助它，只需几行代码即可将各种AWS服务与您的应用程序集成。 您还将获得UI组件以加速开发。

To use any AWS services or the Amplify library, you’ll need an AWS account. If you don’t have one, you can sign up now. Signing up gives you immediate access to the AWS free tier and there are no upfront charges.

要使用任何AWS服务或Amplify库，您需要一个AWS账户。 如果您没有，请立即注册 。 通过注册，您可以立即访问AWS免费套餐，并且无需支付任何前期费用。

安装和配置Amplify CLI (Install and configure the Amplify CLI)

The Amplify CLI is a tool that allows you create and configure AWS services for your application. Its purpose is to simplify mobile and web application development for you. The CLI uses AWS CloudFormation and nested stacks, which allows you to add or modify configurations locally before you push them for execution in the cloud.

Amplify CLI是一种工具，可让您为应用程序创建和配置AWS服务。 其目的是为您简化移动和Web应用程序的开发。 CLI使用AWS CloudFormation和嵌套堆栈，这使您可以在将配置推送到云中之前在本地添加或修改配置。

You need Node.js (version 8.11 or greater) and npm (version 5 or greater) installed to use the CLI. If you don’t have them installed, visit the Node.js download page. Installing node will also give you npm, but if you have just node installed, you can also download npm separately.

您需要安装Node.js(8.11或更高版本)和npm(5或更高版本)才能使用CLI。 如果您尚未安装它们，请访问Node.js下载页面 。 安装节点也会为您提供npm，但是如果您仅安装了节点，则还可以单独下载npm 。

Install the CLI by running npm install -g @aws-amplify/cli in the command line. Do not use yarn to install the CLI as it has known issues. Once the Amplify CLI is installed, you will have to configure it to specify the necessary AWS credentials and region. Follow the instruction below to configure the CLI.

通过在命令行中运行npm install -g @aws-amplify/cli来安装CLI。 请勿使用yarn来安装CLI，因为它存在已知问题。 一旦安装了Amplify CLI，您将必须对其进行配置以指定必要的AWS凭证和区域。 请按照以下说明配置CLI。

1. Open the command line and run the command amplify configure. This will open the AWS Console in your browser, and if you're not signed in, you'll need to sign in to your account.

   打开命令行并运行命令amplify configure 。 这将在浏览器中打开AWS控制台，如果您未登录，则需要登录您的帐户。

2. When you’ve signed in, go back to the command line and press Enter.
   登录后，返回命令行并按Enter。
3. You’ll be prompted to select an AWS region. Select one and press Enter.
   系统将提示您选择一个AWS区域。 选择一个，然后按Enter。
4. Then you get the option to specify the username of a new AWS IAM (Identity and Access Management) user to use with the CLI. Enter a user name and press Enter. When you press enter, it opens your browser and takes you to the IAM dashboard in the AWS Console.
   然后，您可以选择指定要与CLI一起使用的新AWS IAM(身份和访问管理)用户的用户名。 输入用户名，然后按Enter。 当您按Enter键时，它将打开您的浏览器，并带您到AWS控制台中的IAM仪表板。

5. On the IAM dashboard you’re asked to create a new user. The username field is pre-populated with the username you entered in the console, and the Programmatic Access access type selected. Click Next: Permissions button to go to the next page.

   在IAM仪表板上，要求您创建一个新用户。 用户名字段预填充了您在控制台中输入的用户名，并选择了Programmatic Access访问类型。 单击“ Next: Permissions按钮转到下一页。

6. Leave the default selected Administrator Access policy and click Next: Review button.

   保留默认选择的Administrator Access策略，然后单击Next: Review按钮。

7. Click Create User button to create the user. When the user is created, you'll be given an Access Key ID and a Secret Access Key. Keep those information because you'll need it to set up the CLI.

   单击Create User按钮以创建用户。 创建用户后，将为您提供访问密钥ID和秘密访问密钥 。 保留这些信息，因为您将需要它来设置CLI。

8. Go back to the command line and press Enter.
   返回命令行并按Enter。

9. It’ll prompt you for the Access Key ID. Copy and paste the value then press Enter.

   它将提示您输入访问密钥ID 。 复制并粘贴值，然后按Enter。

10. Another prompt shows asking for the Secret Access Key. Copy and paste the value then press Enter.

    另一个提示显示询问秘密访问密钥 。 复制并粘贴值，然后按Enter。

11. Now you’ll be asked if you want to create or update the AWS profile in your local machine. We’ll be using default for this profile. Press Enter to select the default and create your AWS profile.
    现在，将询问您是否要在本地计算机上创建或更新AWS配置文件。 我们将为此配置文件使用默认值。 按Enter选择默认值并创建您的AWS配置文件。

创建React应用 (Create the React app)

Now that the Amplify CLI has been configured, we can begin creating the React app. We will bootstrap the React app with Create React App. This allows us focus on writing code and not worry about setting up Babel and Webpack because they’ll preconfigured for us. To create the React project, run the following command:

现在已经配置了Amplify CLI，我们可以开始创建React应用了。 我们将使用Create React App引导React应用程序 。 这使我们可以专注于编写代码，而不必担心设置Babel和Webpack，因为它们将为我们预先配置。 要创建React项目，请运行以下命令：

$ npx create-react-app serverless-react

This creates a folder serverless-react with necessary files for a react app. Next thing to do is to initialise an Amplify project. To do this, follow the instructions below

这将创建一个serverless-react的文件夹，其中包含用于React应用程序的必要文件。 接下来要做的是初始化一个Amplify项目。 为此，请按照以下说明进行操作

1. Switch directory to the project by running cd serverless-react in the command line

   通过在命令行中运行cd serverless-react将目录切换到项目

2. Run the command amplify init. This will prompt you to answer some questions.

   运行命令amplify init 。 这将提示您回答一些问题。

3. Select your code editor and press Enter.
   选择您的代码编辑器，然后按Enter。
4. The next set of prompts presents you with questions to determine the type of app you’re building. Select JavaScript, then React, and then press Enter for the remaining prompts to use the default values.
   下一组提示会向您提出问题，以确定要构建的应用程序的类型。 选择JavaScript，然后选择React，然后按Enter键以使其余提示使用默认值。

The amplify init command sets up deployment resources in the cloud with CloudFormation stacks, and prepares the project for Amplify. It pulls configuration details of the resources into the project directory. This configuration information will be used to add AWS services to the project and update service configuration. At the root of the project directory, you'll find a .amplifyrc file and a amplify folder. They contain CloudFormation configuration information for resources we'll be using.

amplify init命令使用CloudFormation堆栈在云中设置部署资源，并为Amplify准备项目。 它将资源的配置详细信息拉入项目目录。 此配置信息将用于将AWS服务添加到项目中并更新服务配置。 在项目目录的根目录下，您将找到一个.amplifyrc文件和一个amplify文件夹。 它们包含我们将使用的资源的CloudFormation配置信息。

The final bit we need to set up the project is to add the Amplify library to our project. The library provides us with modules and UI component that makes it easy to integrate AWS services in few lines of code. Run the following command to install it from npm.

我们需要设置项目的最后一点是将Amplify库添加到我们的项目中。 该库为我们提供了模块和UI组件，使您可以轻松地在几行代码中集成AWS服务。 运行以下命令从npm安装它。

$ npm install -S aws-amplify && npm install -S aws-amplify-react

这是一个包装 (That’s A Wrap)

Serverless computing provides us with benefits such as reduced operation costs and development time. It allows us focus on our code to provide business value to the users without worrying about building and maintaining servers.

无服务器计算为我们提供了诸如降低运营成本和缩短开发时间的优势。 它使我们可以专注于代码，从而为用户提供业务价值，而不必担心构建和维护服务器。

AWS is one of the many providers of serverless computing services. It takes a couple of steps to configure and integrate these services, and AWS Amplify was built to make it easier to build serverless applications on AWS. It provides tools to create and configure services with a few commands, and library components to easily interact with those services from our code.

AWS是无服务器计算服务的众多提供商之一。 配置和集成这些服务需要几个步骤，并且构建了AWS Amplify是为了使在AWS上构建无服务器应用程序变得更加容易。 它提供了使用一些命令来创建和配置服务的工具，并提供了库组件以轻松地通过我们的代码与这些服务进行交互。

This is the first post in a series to introduce you to building serverless applications with AWS Amplify. We set up the Amplify CLI and created an Amplify project.

这是系列文章中的第一篇，向您介绍如何使用AWS Amplify构建无服务器应用程序。 我们设置了Amplify CLI，并创建了一个Amplify项目。

翻译自: https://www.freecodecamp.org/news/going-serverless-with-react-and-aws-amplify-development-environment-set-up-9b15c3363bd/

使用react开发配置环境