在 AWS Amplify 上部署 Web 应用程序
教程
模块 2:初始化 Amplify 后端
在本模块中,您将使用 AWS Amplify 为应用程序配置云后端
简介
在本模块中,您将使用 AWS Amplify 为应用程序配置云后端。 AWS Amplify 第 2 代使用全栈 TypeScript 开发人员体验 (DX) 来定义后端。Amplify 通过托管、后端和 UI 构建功能以及代码优先的方法,提供统一的开发人员体验。
您在本教程中构建的应用程序是一款费用跟踪器应用程序,将允许用户创建、删除和列出费用支出。本应用程序示例让您了解如何构建很多常见类型的 CRUD+L(创建、读取、更新、删除和列出)应用程序。
您将学到的内容
- 设置 Amplify Authentication
- 设置 Amplify Data
实施
所需时间
10 分钟
获取帮助
-
设置 Amplify Auth
该应用程序使用电子邮件作为默认登录机制。当用户注册时,他们会收到一封验证电子邮件。在此步骤中,您将自定义验证电子邮件。
1.在本地计算机上,导航到 amplify/auth/resource.ts 文件,然后使用以下代码对其进行更新,以自定义验证电子邮件。然后,保存文件。
import { defineAuth } from "@aws-amplify/backend"; export const auth = defineAuth({ loginWith: { email: { verificationEmailStyle: "CODE", verificationEmailSubject: "Welcome to the ExpenseTracker!", verificationEmailBody: (createCode) => `Use this code to confirm your account: ${createCode()}`, }, }, });
- 右边的图片显示了自定义验证电子邮件的示例。
- 右边的图片显示了自定义验证电子邮件的示例。
-
设置 Amplify Data
在此步骤中,您将定义费用数据模型的架构,并使用每个所有者授权规则 allow.owner() 将费用记录的访问权限限制为记录的所有者。 Amplify 将自动向每笔费用添加一个 owner: a.string() 字段,该字段包含创建记录时的费用所有者的身份信息。
1.在本地计算机上,导航到 amplify/data/resource.ts 文件,然后更新以下信息以定义架构。然后,保存文件。
import { type ClientSchema, a, defineData } from '@aws-amplify/backend'; const schema = a.schema({ Expense: a .model({ name:a.string(), amount: a.float(), }) .authorization((allow) => [allow.owner()]), }); export type Schema = ClientSchema<typeof schema>; export const data = defineData({ schema, authorizationModes: { defaultAuthorizationMode: 'userPool', }, });
-
部署 Amplify Cloud 沙盒
注意:amplify/backend.ts 文件已配置为导入身份验证和数据后端定义。您不需要进行更改。
1.打开一个新的终端窗口,导航到应用程序的根文件夹 (expensetracker),然后运行以下命令将云资源部署到隔离的开发空间中,这样您就可以快速迭代。
npx ampx sandbox
2.完全部署云沙盒后,您的终端将显示一条确认消息,amplify_outputs.json 文件会生成,并添加到您的项目中。完成部署需要几分钟的时间。
结论
在本模块中,您使用 Amplify 来配置身份验证和数据资源。您还启动了自己的云沙盒环境。在下一个模块中,您将应用程序的前端连接到后端并构建应用程序功能。