= 在 30 分钟内使用 AWS 托管您的 React 应用程序 =
本教程非常形象，面向初学者。它解释了如何使用完整的授权系统在网站上托管 React 应用程序。它通过 Mobilehub CLI（命令行界面）调用 AWS MobileHub 的功能。本教程不需要 AWS 服务方面的技能，还将向您展示如何设置 React 样板应用程序。
如果你已经有一个 React 应用程序，
**您可以跳到我们安装 awsmobile-cli 并将其添加到我们的应用程序的第 2 部分
= 在我们开始之前，我们需要在您的计算机上设置一些东西 =
**你电脑上安装的Node 8.x环境**
- 这是 Javascript 应用程序服务器的运行时环境。它跟在节点包管理器 (NPM) 之后。
- NPM 用于安装节点包，例如 React、AWS Amplify、AWS-JS 连接器包，基本上就是这样。
- httpsnodejs.org/en/download/
**一个 AWS 免费套餐账户
- 您可以通过免费套餐免费访问 AWS 服务。对于本教程，这应该绰绰有余。但是，请注意，每项服务每月都有使用限制，这可能会让您付出真金白银。
- httpsaws.amazon.com/free/
**安装 AWS CLI（命令行界面）以直接从您的控制台调用 AWS 服务** **在本课程中，我们将使用 React 的创建者 Facebook 维护的样板 **您选择的编辑器
- 我建议从 Visual Studio Code 开始，这是一个高度可修改的轻量级编辑器，可以运行大多数编程语言和框架。
专业提示：在 VS Code 的安装过程中，确保选中将其添加到环境路径名的框。这使您可以通过键入 âïÂïÂcode filename.jsÃâ¢ÃÂà或Â代码很舒服
- 大多数开发人员应该在他们的计算机上安装 Git。这使您可以访问许多开发人员首选的终端 Git Bash。
让我们开始！
**1。创建React应用，通过terminal进入项目文件夹**
输入终端并找到您存储应用程序的文件夹。我建议使用一个名为 âïÂÃÂdevâÃÂà的文件夹。
npx create-react-app 项目名称&& cd 项目名称
或者
npm -g install create-react-app create-react-app 项目名称
在这里，我们基于样板文件创建了一个 React 应用程序。 âÃÂÃÂnpxâÃÂà是一个 Node 工具，它使用 npm 服务器调用远程包。第二个代码片段在本地安装 create-react-app
*npm -g install create-react-app* **然后创建应用程序。我建议使用 npx 始终与 create-react-app 保持同步，然后创建应用程序。我建议使用 npx 始终与 create-react-app 保持同步。 **2。将 awsmobile CLI 安装到您的计算机并在项目中运行它**
从这一点来看，您应该在代码编辑器中注意您的 React 应用程序。将添加 /awsmobile 等文件夹，并向 package.json 文件添加一些内容。
在终端窗口中，键入
npm 安装-g awsmobile-cli
全局安装 awsmobile-cli。我们将在 AWS Mobile Hub 控制台中完成一些工作后使用它。
确保你在你的项目中并输入
awsmobile 初始化
系统会提示您一系列问题，其中默认设置很好，因此在每个设置中按 Enter 键，直到它在您的默认浏览器中自动打开 AWS。如果您还没有登录，请使用您的免费套餐帐户登录。
这向 awsmobile-cli 保证我们已连接到正确的 AWS 账户。返回您的终端并按 Enter 键继续。
AWS 需要设置一个用户来控制应用程序。当您继续按 enter 键时，awsmobile-cli 将自动完成此操作。
完成此操作后，您将被带到 AWS IAM，在那里您将只是 [下一步]用你的方式通向完整性！在第二步中，它应该自动选中“管理员访问权限”，让用户可以访问我们需要的所有 AWS 功能。
完成后，下载包含您的秘密凭证的 .csv 文件非常重要，因为它们只会在 AWS 中显示一次。这些键将在终端窗口的后续步骤中使用。
这成功创建了您的 AWS MobileHub 应用程序并自动安装 aws-amplify& aws-amplify-react 到你的本地 React 项目
完成此过程后（约 1 分钟），您可以键入
awsmobile控制台
在您的默认浏览器中查看您的 Mobile Hub 应用程序。您还可以键入 âÃÂÃÂawsmobileâÃÂï 以查看不同操作的列表。从这里开始，我们将使用浏览器添加 Cognito 登录，但您可以从 awsmobile CLI 执行此操作。
**3。实际添加 Cognito 登录和托管**
对于最后一步，我们将通过 AWS MobileHub 控制台将 AWS Cognito 添加到我们的项目中。您还可以查看默认情况下已启用的托管。
要测试托管，请单击您的控制台中的功能，然后单击为您提供的 URL。此处的内容是 AWS 的模板，但您很快就会用 React 应用程序覆盖它。
**要添加 Cognito 用户登录，向下滚动找到“用户登录”并单击它。 **这会启用带有身份验证系统的 Cognito 用户池。使用电子邮件地址或电话号码中的 âÃÂÃÂEmailâïÂà强制将电子邮件作为您登录时的用户名。或者，您可以使用用户名并启用 âÃÂÃÂEmailÃâ¢ÃÂà+ âÃÂà用户名âà ★★让用户自己选择。无论哪种方式，您都会通过电子邮件收到确认码。
我们接受电子邮件，因为 AWS 不对向电子邮件发送注册确认码收取费用，而发送 SMS 则需要花费真金白银。
结果是：
如果单击“操作”>“在 Cognito 中编辑”，您将看到用于管理用户和高级安全功能的 Cognito 控制台。您在此步骤中所做的一些设置是不可逆的，但您始终可以删除您的用户池并创建一个新的。
这样就完成了 MobileHub 中 AWS Cognito 的配置。是时候添加代码了。多少？ 5行！其中 3 个只是 React 中的导入。
= 将您的设置添加到 React 项目并发布到您的网站 =
在您的终端中，您可以随时使用 awsmobile pull 或 awsmobile push 分别将您的更改从在线 AWS MobileHub 控制台拉取到您的应用程序，或推送您通过终端中的 awsmobile CLI 完成的本地更改。
对于这个用例，我们想要获取我们所做的更改。返回您的终端并输入
返回 VS Code，您将看到您的项目现在已被修改。您可以在 ./awsmobile/backend/mobile-hub-project.yml 中检查您的本地配置
此外，在 ./package.json 中，您会发现我们之前所做的 awsmobile init 添加了两个突出显示的库。
我们现在将使用这些将我们的应用程序包装在 Cognito 登录窗口中。打开 ./src/index.js 并修改它：
对此：
从“反应”导入反应；
从 'react-dom'导入 ReactDOM；
导入索引.css';
从应用程序导入应用程序';
从 registerServiceWorker 导入 registerServiceWorker'；
从 aws-exports 导入 awsMobile'；
从“aws-amplify”导入放大；
从“aws-amplify-react”Amplify.configure(awsMobile) 导入 {withAuthenticator}；
const AppWithAuth = withAuthenticator(App)ReactDOM.render(
('root
registerServiceWorker
And youâÃÂÃÂre done! Try to run your application from your terminal with
npm start
and see it be loaded into the browser with a sleek GUI created by AWS:
From here you can register, login or reset users, and as an admin you can see the users who are registering.
**To add hosting simply go to your terminal and type
awsmobile publish
If you get this warning, abort the publish, run awsmobile pull and run awsmobile publish again:
When this process is done, your hosted website automatically opens in your default browser:
**There, youâÃÂÃÂre done
= Pitfalls in the process =
If the application says âÃÂÃÂNo user poolsâÃÂÃÂ, make sure your MobileHub console has Sign-In activated, and that youâÃÂÃÂve called awsmobile pull from your terminal. This updates the aws-exports.js file which is then added to Amplify.configure() in React. Also, remember to import that file!
**Further challenges** **Use the ** **aws-amplify authentication documentation ** **to add a signout button to your application
Hint: YouâÃÂÃÂll need to import Auth and call its signOut function.
import { Auth } from aws-amplify-react
**Add your custom domain name to the hosted website**This is done through CloudFront, which you can access in MobileHub âÃÂÃÂHosting and StreamingâÃÂÃÂ. Read the docs provided if you want assitance:
== Using Custom URLs for Files by Adding Alternate Domain Names (CNAMEs) - Amazon CloudFront ==
Describes how to add an alternate domain name, known as a CNAME, to use your own domain name instead of the defaultâÃÂæ
docs.aws.amazon.com
**Add Google Login**Delete your Cognito User Pool and add one with Facebook/Google providers. This can be a bit tricky as you need to get e.g. Google Web App Client ID from the google terminal to make this work. **Hope you enjoyed this very detailed introduction to AWS MobileHub. ItâÃÂÃÂs a lot of fun once you get the hang of it, and creating a Serverless backend for your frontend project has never been as easy
SHARED网络托管#7