构建一个基本的 Web 应用程序

教程

简介
创建 Web 应用程序
构建无服务器函数
模块 3
创建数据表
将无服务器函数与 Web 应用程序链接
单击此处
添加交互到 Web 应用程序
单击此处
清理资源

模块 3：创建数据表

在本模块中，您将使用 GraphQL API 和 Amazon DynamoDB 创建数据模型来保存数据。 

概览

在本模块中，您将使用 GraphQL API 和 Amazon DynamoDB 创建数据模型来保存数据。  此外，您还将使用 AWS Identity and Access Management（AWS IAM）授权为我们的服务安全地授予互相交互所需的权限。您还将允许在上一个模块中创建的 Lambda 函数使用 GraphQL API 根据 IAM 策略写入新建的 DynamoDB 表。 

重要概念

Amplify 后端：Amplify 第 2 代使用全栈 TypeScript 开发人员体验 (DX) 来定义后端。 只需在 TypeScript 中编写数据模型、业务逻辑和身份验证规则等应用程序需求即可。Amplify 会自动配置正确的云资源并将其部署到每个开发人员的云沙盒环境中，以实现快速的本地迭代。

实施

 最短完成时间

5 分钟

 使用的服务

AWS Amplify

AWS AppSync

 获取帮助

Amplify 故障排除

  • 1.在本地计算机上，导航到 amplify/data/resource.ts 文件，然后使用以下代码对其进行更新。然后，保存文件。

    • 下列代码将定义用户配置文件数据模型的架构，并使用每个所有者授权规则 allow.owner() 将费用记录的访问权限限制为记录的创建者。
    • 它还使用“配置文件所有者”字段来跟踪所有权，并配置授权规则以允许使用“确认后”资源。 
    • 授予资源访问权限会为函数创建环境变量，例如 GraphQL API 端点。
    import { type ClientSchema, a, defineData } from "@aws-amplify/backend";
import { postConfirmation } from "../auth/post-confirmation/resource";

const schema = a
  .schema({
    UserProfile: a
      .model({
        email: a.string(),
        profileOwner: a.string(),
      })
      .authorization((allow) => [
        allow.ownerDefinedIn("profileOwner"),
      ]),
  })
  .authorization((allow) => [allow.resource(postConfirmation)]);
export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: "apiKey",
    apiKeyAuthorizationMode: {
      expiresInDays: 30,
    },
  },
});

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

    npx ampx sandbox

    3.完全部署云沙盒后，您的终端将显示一条确认消息，amplify_outputs.json 文件会生成，并添加到您的项目中。

    npx ampx sandbox

    4.打开一个新的终端窗口，导航到应用程序的根文件夹 ( profilesapp)，然后运行以下命令生成 GraphQL 客户端代码以调用您的数据后端。

    注：您需要更新以下命令，才能使用您在上一步中创建的确认后文件夹的路径。例如：npx ampx 生成 graphql-client-code --out amplify/auth/postConfirmination /graphql。

    npx ampx generate graphql-client-code --out <path-to-post-confirmation-handler-dir>/graphql

    Amplify 将创建 amplify/auth/post-confirmaming/graphql 文件夹，其中可以找到连接到 GraphQL API 的客户端代码。

  • 1.在本地计算机上，导航到 amplify/auth/post-confirmation/handler.ts 文件，然后使用以下代码替换该代码。然后，保存文件。

    • 以下代码使用环境变量配置 Amplify 并设置使用 IAM 的授权。然后，使用 generateClient() 函数生成一个数据客户端。最后，它使用数据客户端通过根据已注册用户的属性设置电子邮件和所有者来创建用户配置文件。
    import type { PostConfirmationTriggerHandler } from "aws-lambda";
import { type Schema } from "../../data/resource";
import { Amplify } from "aws-amplify";
import { generateClient } from "aws-amplify/data";
import { env } from "$amplify/env/post-confirmation";
import { createUserProfile } from "./graphql/mutations";

Amplify.configure(
  {
    API: {
      GraphQL: {
        endpoint: env.AMPLIFY_DATA_GRAPHQL_ENDPOINT,
        region: env.AWS_REGION,
        defaultAuthMode: "iam",
      },
    },
  },
  {
    Auth: {
      credentialsProvider: {
        getCredentialsAndIdentityId: async () => ({
          credentials: {
            accessKeyId: env.AWS_ACCESS_KEY_ID,
            secretAccessKey: env.AWS_SECRET_ACCESS_KEY,
            sessionToken: env.AWS_SESSION_TOKEN,
          },
        }),
        clearCredentialsAndIdentityId: () => {
          /* noop */
        },
      },
    },
  }
);

const client = generateClient<Schema>({
  authMode: "iam",
});

export const handler: PostConfirmationTriggerHandler = async (event) => {
  await client.graphql({
    query: createUserProfile,
    variables: {
      input: {
        email: event.request.userAttributes.email,
        profileOwner: `${event.request.userAttributes.sub}::${event.userName}`,
      },
    },
  });

  return event;
};

结论

您创建了数据表并配置了 GraphQL API 以将数据保存到 Amazon DynamoDB 数据库中。然后，您更新了 Lambda 函数以使用该 API。

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

 反馈
开始学习模块 4

将无服务器函数与 Web 应用程序链接