AWS AppSync 实时参考架构教程

AWS AppSync 实时参考架构教程

项目介绍

AWS AppSync 实时参考架构是一个展示如何使用 GraphQL 订阅通过 WebSockets 实现实时数据广播的示例项目。该项目展示了两种类型的实时数据广播:

  1. 后端广播:从无服务器后端向所有客户端广播(一对多)。
  2. 客户端广播:多个客户端之间的广播(多对多)。

该项目支持不同的后端类型,包括 Amazon DynamoDB(无服务器 NoSQL 数据库)、AWS Lambda(无服务器计算逻辑)和 AWS AppSync 本地解析器(Pub/Sub,数据不持久化)。

示例应用基于第二屏幕体验,通常有一个内容被广播给所有连接的用户,用户可以相互交互,并实时查看其他用户的活动。应用展示了一个电影海报和描述,这些内容会定期轮换,用户可以对当前电影进行投票,并在公共聊天室中表达他们的意见。

项目快速启动

前提条件

在开始之前,请确保您已经满足以下前提条件:

  • 在 TMDb 上创建一个账户并生成一个 API 密钥(免费,非商业用途)。
  • 拥有一个 AWS 账户,并具备创建相关资源的权限。
  • 安装 Node.js 和 NPM。
  • 配置 AWS CLI,并将其输出格式设置为 JSON。
  • 安装 AWS Amplify CLI,并配置为支持 AWS AppSync 和其他服务的区域。
  • 安装 AWS SAM CLI。
  • 安装 Create React App。
  • 安装 JQ(如果使用 Windows,需要 Windows Subsystem for Linux)。

一键部署

  1. 点击一键部署按钮,进入 AWS Amplify 控制台,连接到 GitHub,并提供一个 IAM 角色用于构建。
  2. 整个后端和前端的部署大约需要 10 分钟。
  3. 部署完成后,进入 AWS AppSync 控制台,访问新部署的 "realtime" GraphQL API,并打开查询部分。
  4. 执行以下突变以创建数据结构,该结构将收集并存储投票到 Reviews 表中:
mutation {
  type1: createReviews(input: { id: 1, type: "love", votes: 0, topMovie: "N/A", topVotes: 0 }) {
    id
    type
    votes
    topMovie
    topVotes
  }
  type2: createReviews(input: { id: 2, type: "like", votes: 0, topMovie: "N/A", topVotes: 0 }) {
    id
    type
    votes
    topMovie
    topVotes
  }
  type3: createReviews(input: { id: 3, type: "meh", votes: 0, topMovie: "N/A", topVotes: 0 }) {
    id
    type
    votes
    topMovie
    topVotes
  }
  type4: createReviews(input: { id: 4, type: "unknown", votes: 0, topMovie: "N/A", topVotes: 0 }) {
    id
    type
    votes
    topMovie
    topVotes
  }
  type5: createReviews(input: { id: 5, type: "hate", votes: 0, topMovie: "N/A", topVotes: 0 }) {
    id
    type
    votes
    topMovie
    topVotes
  }
}

手动设置

  1. 克隆项目仓库:
git clone https://github.com/aws-samples/appsync-refarch-realtime.git
cd appsync-refarch-realtime
  1. 安装所需的模块:
npm install
  1. 将目录初始化为一个使用 React 框架的 Amplify JavaScript 项目:
amplify init
  1. 根据本地设置和配置的功能,执行以下命令以预置云资源:
amplify push
  1. 等待预置完成。完成后,会生成一个 src/aws-exports.js 文件,其中包含资源信息。

  2. 在 shell 终端中执行以下命令,并添加您的 TMDb API 密钥:

export TMDB_API_KEY=<YOUR TMDB API KEY HERE>
  1. 执行以下命令以设置额外的环境变量并配置 IAM 认证:
export AWS_REGION=$(jq -r '.providers.awscloudformation.Region' amplify/#current-cloud-backend/amplify-meta.json)
export GRAPHQL_API_ID=$(jq -r '.api[(.api | keys)[0]].output.GraphQLAPIIdOutput' amplify/#current-cloud-backend/amplify-meta.json)
export GRAPHQL_API_NAME=$(aws appsync get-graphql-api --api-id $GRAPHQL_API_ID --region $AWS_REGION | jq -r '.graphqlApi.name')
export GRAPHQL_ENDPOINT=$(sed -n 's/ *"aws_appsync_graphqlEndpoint": "\(.*\)" */\1/p' src/aws-exports.js)
export UNAUTH_ROLE=$(jq -r '.providers.awscloudformation.UnauthRoleName' amplify/#current-cloud-backend/amplify-meta.json)
export ID_POOL_ID=$(sed -n 's/ *"aws_cognito_identity_pool_id": "\(.*\)" */\1/p' src/aws-exports.js)
export ID_POOL_NAME=$(jq -r '.auth[(.auth | keys)[0]].output.IdentityPoolName' amplify/#current-cloud-backend/amplify-meta.json)
export DEPLOYMENT_BUCKET_NAME=$(jq -r '.providers.awscloudformation.DeploymentBucketName' amplify/#current-cloud-backend/amplify-meta.json)
export STACK_NAME=$(jq -r '.providers.awscloudformation.StackName' amplify/#current-cloud-backend/amplify-meta.json)
aws cognito-identity update-identity-pool --identity-pool

应用案例和最佳实践

应用案例

  1. 实时投票系统:用户可以对当前展示的电影进行投票,系统会实时更新投票结果并显示在排行榜上。
  2. 实时聊天室:用户可以在公共聊天室中实时交流,表达对当前电影的看法。

最佳实践

  1. 安全管理 API 密钥:在生产环境中,使用 AWS Secrets Manager 或 AWS Parameter Store 来安全地管理 API 密钥和其他重要服务凭证。
  2. 环境变量管理:在开发和测试阶段,使用环境变量来管理敏感信息,但在生产环境中应使用更安全的方式。

典型生态项目

  1. AWS Amplify:用于快速构建和部署全栈应用的框架,支持前端和后端的开发。
  2. AWS Lambda:无服务器计算服务,用于执行后端逻辑。
  3. Amazon DynamoDB:无服务器 NoSQL 数据库,用于存储应用数据。
  4. AWS AppSync:用于构建 GraphQL API 的服务,支持实时数据同步和订阅。

通过这些生态项目的结合,开发者可以快速构建和部署具有实时数据同步功能的应用。

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值