构建全栈 React 应用程序

教程

任务 2:初始化本地 Amplify 应用程序

在此任务中,您将使用 AWS Amplify 预置应用程序的云后端。

概览

现在您有一个 React Web 应用程序,并将使用 AWS Amplify 为该应用程序配置云后端。 AWS Amplify 第 2 代使用全栈 TypeScript 开发人员体验(DX)来定义后端。Amplify 提供托管、后端和 UI 构建功能以及代码优先的方法,实现了统一的开发人员体验。  

您将学到的内容

  • 设置 Amplify 身份验证
  • 设置 Amplify 数据
  • 设置 Amplify 存储

实施

 完成时间

10 分钟

 需要

  • 该应用程序使用电子邮件作为默认登录机制。用户在注册时会收到一封验证电子邮件。

    1.默认情况下,您的身份验证资源配置会如 notesapp/amplify/auth/resource.ts 文件中所示。在本教程中,请保留默认身份验证设置不变。

  • 您将构建的应用程序是一个“注释”应用程序,让用户可以迎来创建、删除和列出注释。此示例应用程序有助您了解如何构建多种常见类型的 CRUD+L(创建、读取、更新、删除和列出)应用程序。

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

    • 以下更新后的代码使用所有者逐一授权规则 allow.owner(),从而仅允许记录所有者访问注释记录。 
    • Amplify 将自动向每条注释添加一个 owner: a.string() 字段,其中包含创建记录时的注释所有者身份信息。
    import { type ClientSchema, a, defineData } from '@aws-amplify/backend';
    
    const schema = a.schema({
      Note: a
        .model({
          name:a.string(),
          description: a.string(),
          image: a.string(),
        })
        .authorization((allow) => [allow.owner()]),
    });
    
    export type Schema = ClientSchema<typeof schema>;
    
    export const data = defineData({
      schema,
      authorizationModes: {
        defaultAuthorizationMode: 'userPool',
      },
    });
    
  • 1.在本地计算机上,导航到 notesapp/amplify 文件夹,创建一个名为 storage 的新文件夹,然后在此新存储文件夹内创建一个名为 resource.ts 的文件。

    2.使用以下代码更新 amplify/storage/resource.ts 文件,从而为应用程序配置存储资源,然后保存文件。

    • 更新后的代码将设置访问权限,仅允许上传图像的人访问。该代码会将 entity_id 作为保留令牌,并在上传文件时将该令牌替换为用户的标识符。 
    import { defineStorage } from "@aws-amplify/backend";
    
    export const storage = defineStorage({
      name: "amplifyNotesDrive",
      access: (allow) => ({
        "media/{entity_id}/*": [
          allow.entity("identity").to(["read", "write", "delete"]),
        ],
      }),
    });
    
  • 1.在本地计算机上,导航到 amplify/backend.ts 文件,然后使用以下代码对其进行更新,然后保存文件。

    • 以下代码将导入身份验证、数据和存储后端定义:
    import { defineBackend } from '@aws-amplify/backend';
    import { auth } from './auth/resource';
    import { data } from './data/resource';
    import { storage } from './storage/resource';
    
    /**
     * @see http://docs.amplify.aws/react/build-a-backend/ to add storage, functions, and more
     */
    defineBackend({
      auth,
      data,
      storage
    });

    2.要启动自己的个人云沙盒环境来提供隔离的开发空间,请打开一个新的终端窗口,然后在应用程序根文件夹中运行以下命令:

    npx ampx sandbox
    • 该沙盒环境可让您快速构建、测试和迭代全栈应用程序。团队中的每位开发人员都可以使用自己的一次性沙盒环境来连接到云资源。请访问此处了解更多信息。

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

总结

您使用 Amplify 配置了身份验证、数据和存储资源。您还启动了自己的云沙盒环境。

添加身份验证

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