在 AWS Amplify 上部署 Web 应用程序

教程

模块 2:初始化 Amplify 后端

在本模块中,您将使用 AWS Amplify 为应用程序配置云后端

简介

在本模块中,您将使用 AWS Amplify 为应用程序配置云后端。 AWS Amplify 第 2 代使用全栈 TypeScript 开发人员体验 (DX) 来定义后端。Amplify 通过托管、后端和 UI 构建功能以及代码优先的方法,提供统一的开发人员体验。 

您在本教程中构建的应用程序是一款费用跟踪器应用程序,将允许用户创建、删除和列出费用支出。本应用程序示例让您了解如何构建很多常见类型的 CRUD+L(创建、读取、更新、删除和列出)应用程序。

您将学到的内容

  • 设置 Amplify Authentication
  • 设置 Amplify Data

实施

 所需时间

10 分钟

 需要

  • 为本地开发配置 AWS 文件

 获取帮助

  • 该应用程序使用电子邮件作为默认登录机制。当用户注册时,他们会收到一封验证电子邮件。在此步骤中,您将自定义验证电子邮件。

    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()}`,
        },
      },
    });
    • 右边的图片显示了自定义验证电子邮件的示例。
  • 在此步骤中,您将定义费用数据模型的架构,并使用每个所有者授权规则 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/backend.ts 文件已配置为导入身份验证和数据后端定义。您不需要进行更改。

    1.打开一个新的终端窗口,导航到应用程序的根文件夹 (expensetracker),然后运行以下命令将云资源部署到隔离的开发空间中,这样您就可以快速迭代。

    npx ampx sandbox

    2.完全部署云沙盒后,您的终端将显示一条确认消息,amplify_outputs.json 文件会生成,并添加到您的项目中。完成部署需要几分钟的时间。

结论

在本模块中,您使用 Amplify 来配置身份验证和数据资源。您还启动了自己的云沙盒环境。在下一个模块中,您将应用程序的前端连接到后端并构建应用程序功能。

此页内容对您是否有帮助?