按照AWS Amplify的教程进行轻松的网页开发

2 年 ago

科, 雅

2 minutes

本篇文章是KDDI敏捷开发中心2022年第21日的工程师与设计师联合日历活动的文章。

首先

这篇文章将按照 AWS Amplify 的官方教程一步一步地进行。所以

年末にゆっくりとqitaの記事をなんでもいいから読みたい人

此为专为…而设计。

请参考amplify官方教程以获取本次内容的详细信息。请查阅那里以获取更详细的内容。

amplify的意思是什么？

在Amplify公式文档中有如下所述。

AWS Amplify 是一个完整的解决方案，可以让前端的网页/移动应用程序开发人员在 AWS 上轻松构建、部署和托管全栈应用程序，并根据用例需求灵活地利用各种 AWS 服务。无需云专业知识。

虽然用词稍显严谨，但依我个人的理解是

サーバやミドルウェアといったインフラなど差別化にならないことをAWSにおまかせできる
amplify CLIを使うことで、AWSリソースを自動生成し設定もやってくれる
amplify Consoleでサーバーレスアプリケーションを自動デプロイするCICD環境やホスティング、Basic認証などを簡単に設定できる

通过继续进行教程，我们将在理解上述内容的同时前进。

为了使用amplify做准备。

作为先决条件，需要以下环境。

git v2.14.1 or later

首先，将需要使用的amplify CLI安装到计算机上。

npm install -g @aws-amplify/cli

完成安装后，将进行amplifyCLI的设置。
执行以下命令，将要求您登录到AWS控制台并创建IAM用户。

amplify configure

完成設置後，您將返回CLI界面並收到”按Enter繼續”以繼續設置。
區域可以選擇任意地方，此次我們選擇了ap-northeast-1。
輸入IAM使用者後，您將跳轉至AWS控制台以創建IAM帳戶。同時，我們會附加AdministratorAccess-Amplify策略。
一旦創建IAM使用者，再次回到CLI界面，將要求您設置accessKeyID、secret access key和Profile Name，請使用先前所創建的IAM使用者的相應資訊。
若成功設置新使用者，則表示amplify CLI的設置已完成！

accessKeyID:xxxxxxx
secret access key:xxxxxx
Profile Name:dev
Successfully set up the new user.

尝试使用后端

前台准备好了。

使用amplify的设置已经完成，接下来需要创建并连接前端和后端。
这次我们将按照教程使用CRA创建前端。

$ npx create-react-app {プロジェクト名}

后端初始化

现在前端已经完成了，接下来我们会开始制作后端。

amplify init

执行amplify init时，amplify CLI将启动并推断出将要初始化的amplify项目，并为您提供适当的配置建议，只需输入Y即可。

GraphQL APIや認証機能などを追加するディレクトリ。
機能を追加するとamplifyが追加したAWSサービスのCloudFormationテンプレートを自動生成する。

srcディレクトリにaws-exports.jsが作成される

amplifyで作成するサービスの設定情報を保持するファイル
クライアントからバックエンドを使う際に必要なすべての情報が格納されている

.gitignoreを修正し、上記で生成されたファイルをgit管理から除外するようにする
AWS上のamplify consoleにプロジェクトが作成される。

バックエンド環境やデプロイステータスなどをamplify consoleから確認できる

安装Amplify Libraries

为了使用amplify库，需要安装aws-amplify包。

npm install aws-amplify

如果成功安装了 AWS Amplify，则可以在 src/index.js 文件中使用 aws-amplify 和刚刚创建的 aws-exports.js 文件来进行 Amplify 的设置。

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

通过将其配置为这样，当在amplify中更新后端设置时，aws-exports.js 将自动更新，并使Amplify库能够识别它们。

编写后端和API以连接应用程序。

在Amplify中可以使用REST和GraphQL作为API。本次将按照教程使用GraphQL连接DynamoDB并进行数据获取。在应用的根目录下执行命令。

amplify add api

本次选择了默认的GraphQL→Continue→Single Object..选项。
然后，它会自动生成GraphQL的模式。

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

连续部署 API.

amplify push

被问了各种各样的问题，我会按照官方教程的内容进行回答。
然后，API将部署在AWS上。

? Are you sure you want to continue? Y

# You will be walked through the following questions for GraphQL code generation
? Do you want to generate code for your newly created GraphQL API? Y
? 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? Y
? Enter maximum statement depth [increase from default if your schema is deeply nested]: 2

哇！TODO已经添加并且成功保存到了DynamoDB中！太令人惊叹了！简单易行！

尝试增加(可选)待办事项应用的输入项目。

尽管不符合教程的步骤，我将修正之前生成的GraphQL模式，以便在Todo项目中能够输入新负责人。
首先，我会在之前的schema.graphql文件的Todo模式中添加一个person字段。

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

总结

这次我尝试了使用amplify官方教程。
使用amplify可以简单地通过CLI创建API，还可以进行网页托管，所以在有短期开发目标或者参加黑客马拉松等活动时特别方便。
这次我已经进行了本地执行，所以CI/CD设置和托管等将在后续更新。