在 AWS 中国区使用 Amplify Studio 构建并部署 Serverless 全栈应用

AWS Amplify

AWS Amplify 是 AWS 提供的一个借助 AWS 底层 Serverless 服务（AWS S3、AWS Lambda、AWS DynamoDB、AWS Appsync 等）赋能前端和移动开发者快速构建并部署全栈应用的服务，在全球有广泛的使用。Amplify 除了作为 AWS 上的服务外，还以开源项目的方式为开发者提供了多种工具帮助开发者使用 Amplify 的能力，如 Amplify CLI、Amplify SDK、Amplify UI 等。通过 Amplify，开发者可以快速构建出弹性的线上应用。

AWS Amplify Studio 是一个 AWS 提供的低代码 SaaS 服务，允许开发人员在数小时内轻松构建和交付完整的 Web 和移动应用程序。借助 Amplify Studio 可以快速完成构建应用程序后端，创建 React 组件，导入 Figma 的设计稿生成前端组件等工作。Amplify Studio 无需 AWS 账号即可使用，也可以与 AWS 账号连接，获得更多功能。开发者可以使用 Amplify Studio 可视化快速完成应用数据结构设计，并基于 Amplify Studio 生成的代码继续开发。

在 AWS 中国区的问题

遗憾的是，由于一些依赖服务的缺失，Amplify 服务在 AWS 中国区并没有上线，造成 AWS 中国区的开发者无法享受到 Amplify 带来的便捷能力，在 Global 区基于 Amplify 开发的应用迁移到中国区也需要巨大的成本。虽然 Amplify 服务在中国不可用，但是开发者依然可以使用 Amplify 的工具。Amplify Studio 作为独立的 SaaS 服务，也可以直接在国内使用。只不过和 Global 区相比，在中国区使用 Amplify Studio 和 Amplify 的其他工具，需要一些额外的手工调整，还需要避开中国区缺失的服务（如 Cognito User Pool ）。但相比从零开始， Amplify Studio 和其他配套工具还是可以带来巨大的效率提升。

使用 Amplify Studio

Amplify Studio 在未登陆的情况下不能使用全部的功能，但最核心的 Data Model 设计功能可以用。在使用可视化界面完成 Data Model 的设计后，就可以把 Data Model 转化成 GraphQL 的 schema，以及 DynamoDB 和 AppSync 的 Cloud Formation template 拉取到本地应用中。之后，按照本文下述的流程修改 Cloud Formation template ，就可以在 AWS 中国区部署需要的 AWS DynamoDB 和 AWS AppSync 服务。另外，在不和海外 AWS ID 连接的情况下， Amplify Studio 可以通过 Data Model 用 Amplify UI 组件库生成对应的表单，生成的代码同样可以被拉取到本地应用中。

在前端项目中引入 Amplify

AWS Amplify 支持多种不同框架的代码生成，本文以 React 项目为例。在设计完成 Data Model 后，可以点击 “Test locally in your app” 获取在本地拉取 Amplify Studio 的步骤提示。

使用 Create React App 新建 React 项目，按照提示在 React 中拉取 Amplify 项目

此时项目中会出现 models 、 ui-components 、 amplify 文件夹，分别存放 Amplify 生成的代码，接下来在项目中安装 Amplify ，并在项目中引入。

按照提示在 React 应用中加入 DataStore 代码

DataStore 是 Amplify 提供的一个支持离线存储的工具，用来访问 AWS AppSync 的 API 。在本文中不做展开，对该工具有兴趣的读者，可以参考资料中的 DataStore 文档。

至此，前端应用接入 Amplify 完成，可以在本地构建后使用 AWS S3 配合 AWS CloudFront 或其他方式部署前端应用，具体方式可以参考资料中的链接。下一步需要将 Amplify 生成的后端服务 —— AWS AppSync 和 AWS DynamoDB，部署到 AWS 中国区。

在 AWS 中国区部署 Serverless 后端

准备文件

- S3-bucket
  - build
    - api
      - appsync => 从 amplify/backend/api/[appsync api name]/build 中获得
  - cfn-templates
    - api
      - appsync-template.json => 从amplify/backend/api/[appsync api name]/build/cloudformation-template.json 获得
  - root-cloudformation-stack.json

全局修改

将 arn: arn:aws 改为 arn:aws-cn
将所有 S3 Bucket 的 URL 从 https://s3.amazonaws.com/[S3-BUCKET]/**/* => https://[S3-BUCKET].s3.[REGION].amazonaws.com[.cn]/**/*

root-cloudformation-stack.json

该 Cloud formation template 不在本地的 Amplify 中文件夹中，需要部署到 Global 区从 S3 中以后获取。但其内容其实可以根据 team-provider-info.json 推断，所以也可以在模版文件上直接修改。受篇幅所限，本文暂不提供模板，其余部分按照下面的对象结构修改对应内容即可。

- [AppSync Name]
  - Properties
    - TemplateURL
    - Parameters
      - S3DeploymentBucket => 上传准备文件的 Bucket
      - S3DeploymentRootKey => AppSync build 产出所在文件夹

./cfn-templates/api/[AppSync Name]-cloudformation-template.json

修改下面的属性的 S3 URL

- Resources
  - [AppSync name]
    - Properties
      - TemplateURL
  - FunctionDirectiveStack
    - Properties
      - TemplateURL
  - CustomResourcesjson
    - Properties
      - TemplateURL

以及将下面的代码：

"Fn::Join": [
    "",
    [
        "https://s3.",
        {
            "Ref": "AWS::Region"
        },
        ".",
        {
            "Ref": "AWS::URLSuffix"
        },
        "/",
        {
            "Ref": "S3DeploymentBucket"
        },
        "/",
        {
            "Ref": "S3DeploymentRootKey"
        },
        "/stacks/FunctionDirectiveStack.json"
    ]
]

改为：

"Fn::Join": [
    "",
    [
        "https://",
        {
            "Ref": "S3DeploymentBucket"
        },
        ".s3.",
        {
            "Ref": "AWS::Region"
        },
        ".",
        {
            "Ref": "AWS::URLSuffix"
        },
        "/",
        {
            "Ref": "S3DeploymentRootKey"
        },
        "/stacks/FunctionDirectiveStack.json"
    ]
]

全部完成后，将所有文件上传到建好的 S3 桶中，然后在 AWS Cloud Formation 控制台，新建新的 Stack 即可。

新建 Stack 完成后，还需要从 AWS Cloud Formation 中找到 AppSync 的嵌套 Stack，然后将其中的输出值写到前端项目根目录下的 aws-exports.js 中，将前端应用连接到后端服务，如下面例子所示：

const awsmobile = {
    "aws_project_region": "REGION",
    "aws_appsync_graphqlEndpoint": "GraphQLAPIEndpointOutput",
    "aws_appsync_region": "REGION",
    "aws_appsync_authenticationType": "API_KEY",
"aws_appsync_apiKey": "GraphQLAPIKeyOutput",
}
export default awsmobile

总结

通过本文可以发现，即便没有 Amplify 服务，AWS 中国区的开发者也可以借助 Amplify 配套的工具获得 Amplify 的赋能，配合 AWS 中国区的 Serverless 服务，提高开发效率，降低应用成本。本文受限于篇幅只是介绍了 Amplify Studio 提供的基础功能，Amplify 配套的其他工具有着更强大的能力，以后有机会再继续介绍。