加速全栈开发 - 通过 Amplify 构建云原生应用程序

全栈开发的挑战与 Amplify 的定位

在现代 Web / 移动应用程序的开发中，需要集成前端、后端 API、认证、存储、数据库等众多组件。如果逐个构建 / 配置这些组件，就会在基础设施的配置管理和服务间的协作上花费大量时间。AWS Amplify 是全面支持全栈应用程序从开发到部署的平台，前端开发者无需关注后端的复杂性，就可以构建云原生应用程序。Amplify Gen 2 引入了基于 TypeScript 的后端定义，可以使用类型安全的基础设施定义和代码补全。Amplify 可以在单一框架内以声明方式定义 Cognito、AppSync、DynamoDB、S3。

通过 Amplify Hosting 进行前端部署

Amplify Hosting 会自动构建与 Git 仓库联动的 CI/CD 管道，并将前端应用程序的构建和部署自动化。以来自 GitHub、GitLab、Bitbucket、AWS CodeCommit 的推送作为触发条件，自动执行构建、测试和部署。它原生支持 Next.js、Nuxt、React、Vue、Angular、Astro 等主要框架，并同时支持 SSR（服务器端渲染）和 SSG（静态站点生成）。在启用了预览的分支中，每个拉取请求都会创建预览环境，审阅者可以在已部署的环境中确认运行情况。通过自定义域名的设置以及 SSL 证书的自动签发 / 更新，生产环境搭建的工作量会减少。通过 CloudFront 的 CDN 分发会自动启用，有助于低延迟的分发。

后端构建与 Cognito 认证集成

Amplify 的后端功能用 TypeScript 定义认证、API、存储、数据库等云资源，并自动进行预置。在认证功能中，Cognito 用户池会被自动配置，可以通过几行设置启用电子邮件/密码认证、社交登录（Google、Facebook、Apple）和 MFA。在 Data 功能中，会根据 TypeScript 的架构定义自动生成 AppSync GraphQL API 和 DynamoDB 表，并且还支持实时订阅和离线数据同步。授权规则可以在架构定义中以声明方式编写，可以灵活设置基于所有者、基于组、公共/私有等访问模式。在 Storage 功能中，S3 存储桶会被自动配置，针对文件上传 / 下载的授权规则也会统一管理。以下是在 Amplify Gen 2 中定义后端资源的示例。

// amplify/data/resource.ts
import { a, defineData, type ClientSchema } from '@aws-amplify/backend';

const schema = a.schema({
  Todo: a.model({
      content: a.string(),
      isDone: a.boolean()
    })
    .authorization(allow => [allow.publicApiKey()])
});

// Used for code completion / highlighting when making requests from frontend
export type Schema = ClientSchema<typeof schema>;

// defines the data resource to be deployed
export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: 'apiKey',
    apiKeyAuthorizationMode: { expiresInDays: 30 }
  }
});

每个 a.model() 都会创建一张保存记录的 DynamoDB 表；在 allow.publicApiKey() 的规则下，通过 API 密钥认证的用户可以对 Todo 进行创建 / 读取 / 更新 / 删除。

Amplify 库与前端集成

Amplify 客户端库面向 React、Vue、Angular、React Native、Flutter 等主要前端框架提供，以简洁的代码实现与后端服务的协作。使用 Authenticator UI 组件，可以用几行代码实现登录 / 注册界面，并可以通过可自定义的主题系统按照品牌调整设计。GraphQL 客户端提供类型安全的查询 / 变更，借助 TypeScript 的类型推断可以在编译时检测错误。Storage 库具备文件上传进度显示和断点续传功能，也支持大容量文件的上传。沙盒环境作为每个开发者独立的后端而创建，在团队开发中容易避免环境冲突。以下是在 React 中使用 Authenticator 组件的示例。

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
export default function App() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          &lt;h1&gt;Hello {user?.username}&lt;/h1&gt;
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

通过这段代码，可以准备包括登录、注册、密码重置和 MFA 在内的认证界面。

使用该服务的价值

引入 AWS Amplify 是应对全栈开发相关多个问题的方法之一。Amplify Hosting 和 Cognito 各自都有免费套餐。作为全托管服务，后端资源的预置、扩展和补丁应用都已自动化，开发团队容易将时间投入到产品开发中。借助 Gen 2 基于 TypeScript 的后端定义，可以用同一种语言开发前端和后端，有助于减轻团队之间沟通的负担。沙盒环境面向实验和测试，可以在与生产环境分开的环境中推进功能的开发和测试。将 CloudFront CDN 的自动分发、Cognito 的自适应认证和 AppSync 的实时同步组合起来，就容易同时提升性能、安全性和用户体验。

Amplify 的费用

Amplify Hosting 的构建费用约为每分钟 0.01 美元，CDN 上的存储费用约为每 GB 每月 0.023 美元（截至 2026 年 10 月）。AWS 免费套餐覆盖的范围因账户的创建时间和套餐的种类而异。Backend Gen 2 适用所使用的 AWS 服务（AppSync、DynamoDB、Cognito、S3）的各自费用。对于小规模网站，有一种方法是在与 Vercel 或 Netlify 的付费方案比较之前，先估算 Amplify 的免费套餐范围是否足够。

总结

AWS Amplify 作为全面支持全栈应用程序从开发到部署的平台，支持前端开发者使用云。将 Git 联动的 CI/CD 管道、预览环境以及通过 CloudFront 的 CDN 分发组合起来，可以减少前端部署的工作量。借助基于 TypeScript 的后端定义，可以以类型安全的方式构建认证、API、存储和数据库，并且与 Cognito 和 DynamoDB 的集成会自动化。Amplify 客户端库支持主要框架，以简洁的代码实现与后端的协作。