【新手向】尝试使用Amplify×AppSync×DynamoDB

1 年 ago
清, 扬
3 minutes

概述

这是一篇类似于以往的尝试性文章。正如标题所述，我们将解释从创建各个AWS服务到请求的连续流程。
当然，AWS官方也提供了相关教程（真是太感激了），但是教程内容相当丰富且为英文文章，所以我认为对于初学者来说，这篇文章更容易掌握整体情况。
※由于内容主观性较强，希望读者更多地从整体氛围中理解。

背景 – 背景信息

近年，互联网的发展非常迅速，特别是无服务器化成为开发网页服务时的必选之一。事实上，我目前的客户对于要求完全的全面管理也有要求。AWS提供了许多服务作为选择，其中包括AppSync和DynamoDB。
作为开发的一部分，我第一次尝试使用这些服务，感受到了它们的巨大吸引力和引入的一些困难。因此，我编写了本文，希望能让未来希望使用这些服务的人们能更轻松地引入它们。

首秀服务

    • AWS Amplify

 

    • AWS AppSync

 

    • DynamoDB

 

    • Vue.js

 

    ※デプロイに利用するCloudFormationやS3がいますが、実装と直接結びつかないため割愛します

整体图

image.png

AWS提供的各项服务介绍

放大

我们可以更快速地构建可扩展的全栈网络和移动应用程序。开始轻松，扩展也轻松。

从公式推出

这是一个用于构建移动应用和Web应用程序的平台，它使用Amplify CLI等工具来代替开发到部署的一系列工作。即使没有AWS知识，它也能相对容易地将您带到发布阶段。它支持的AWS服务数量相当可观，本文中主要使用Amplify CLI。

AppSync 应用同步

通过使用无服务器 GraphQL 和 Pub/Sub API 来加速应用程序开发。

这个聪明的家伙通过公式，将GraphQL和Pub/Sub API作为无服务器提供。我们将使用Apache VTL语言(映射模板)来进行实现。
如果使用REST，API就会变成基于资源，文档管理也会变得繁琐，如果有人觉得困扰，可以考虑转换到GraphQL。
另外，让我惊讶的是Pub/Sub的实时通信可以如此简单地实现。如果想要实现实时通信功能，可以考虑将其作为选择之一。

DynamoDB

1 高速而灵活的NoSQL数据库服务，可以在毫秒级的时间尺度上实现与规模相适应的性能。

从公式中可以得出

使用AppSync时，默认选择是DynamoDB，但其实也可以使用Aurora，所以对于希望使用关系型数据库的人可能不太合适。
与关系型数据库不同，选择和连接功能相对较弱（毕竟使用目的不同，这是不可避免的），所以在选择时要小心。
然而，由于非结构化，它适用于MVP开发，并且具有比RDS更低的延迟和其他优点。
这次我们选择了它，仅仅是因为想要尝试一下新技术并了解其优缺点。
※老实说，如果无法正确设计索引，似乎无法实现实际应用，需要借助ElasticSearch或LambdaEdge等工具。

实践 (shí

前提

Node.js：14.x版本或更高
npm：6.14.4版本或更高

前端准备

由于不是本题的重点，所以会相当简略。

安装Vue3

执行下面的命令。

npm install -g @vue/cli
vue create .
npm install

安装Amplify的JS模块。

执行下列命令。

npm install aws-amplify

使用这个来在JavaScript中执行Amplify的各种操作。

Amplify的初步设置

安装AmplifyCLI

执行以下命令。

npm install -g @aws-amplify/cli

以后我们将使用这个AmplifyCLI进行操作。

使用AmplifyCLI创建IAM用户。

访问和部署AWS资源将使用以下创建的用户。

执行以下命令。

amplify configure

按照指定的任务内容创建账户。

Follow these steps to set up access to your AWS account:

Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue

Specify the AWS Region
? region:  us-east-1
Specify the username of the new IAM user:
? user name:  amplify-test
Complete the user creation using the AWS console
https://console.aws.amazon.com/iam/home?region=us-east-1#/users$new?step=final&accessKey&userNames=amplify-test&permissionType=policies&policies=arn:aws:iam::aws:policy%2FAdministratorAccess-Amplify
Press Enter to continue
image.png

请填写记录的访问密钥ID和秘密访问密钥。
根据需要设置配置文件名称。（如果需要）

Enter the access key of the newly created user:
? accessKeyId:  ********************
? secretAccessKey:  ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name:  amplify

Successfully set up the new user.

使用 AmplifyCLI 创建项目。

执行下面的命令。

amplify init

本次我们选择了以下设置。
※由于有各种设置可供选择，因此可以根据项目需要进行灵活选择（如iOS、React等）。

? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using vue
? Source Directory Path:  src
? Distribution Directory Path: dist
? Build Command:  npm run-script build
? Start Command: npm run-script serve
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile
? Please choose the profile you want to use amplify

这样初始设置就完成了。很简单吧。在这个阶段将会生成具有两个重要角色的文件夹和文件。

image.png

创建GraphQL API并部署AWS资源。

使用Amplify来创建GraphQL API。

执行下列命令。

amplify add api

这次我们选择了以下设置。

? Select from one of the below mentioned services: GraphQL
? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)
image.png

在使用这些工具来实现GraphQL API时，Amplify通过”GraphQL Transform”对”schema.graphql”进行了抽象化处理。通过这个定义，它能够一次性生成用于CRUD操作（包括Mutation等）的模式定义、解析器和DynamoDB的创建。（真聪明啊！）

type Todo @model {
  id: ID!
  name: String!
  description: String
}

部署AWS资源

执行以下命令。

amplify push

被问到各种各样的问题，但基本上用“是”就可以了。

? Are you sure you want to continue? Yes
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
image.png
image.png
image.png

只需快速加载并通过VueJS进行编程即可读取以下生成的文件。

    • src/aws-exports.js

 

    src/graphql/*

主要文件.js

import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
Amplify.configure(awsExports);

App.vue 组件

<template>
  <ul>
    <li v-for="todo in todoList" :key="todo.id">{{todo.id + ':' + todo.name}}</li>
  </ul>
  <button @click="setTodo()">setTodo</button>
  <button @click="getTodoList()">getTodoList</button>
</template>

<script setup>
import { ref } from 'vue'
import { API } from 'aws-amplify'
import { createTodo } from '@/graphql/mutations'
import { listTodos } from '@/graphql/queries'

const todoList = ref([])

const setTodo = async () => {
  await API.graphql({
    query: createTodo,
    variables: {
      input: {
        name: 'testName',
        description: 'testDescription' 
      }
    }
  })
}

const getTodoList = async () => {
  const result = await API.graphql({
    query: listTodos
  })
  todoList.value = result.data.listTodos.items
}
</script>
image.png

太简单了！

您对此有什么看法呢？
本次我们表达了从AWS资源创建到使用的整体流程，但下次我们希望能够介绍更多关于各项服务特点的内容。

Amplify官方文档
AppSync官方文档
DynamoDB官方文档

最后

AWS开发日志可能更容易理解吧？

✖
广告
将在 10 秒后关闭
bannerAds