AWS Summit Online Japan のセッション
「AWS-09：これから初める Web・モバイルアプリ開発。AWS Amplify で手軽にちょちょいと」
を参考に Amplify 試してみます。
セッションメモ
- AWS Amplify
- Web・モバイルアプリ開発者向けプラットフォーム
- 高速にスケールするアプリを容易に開発可能
- Amplify ライブラリ
- AWSバックエンドと容易に統合
- モバイル向け
- for JavaScript/iOS/Android
- Amplify UI コンポーネント
- Amplify CLI
- AWS Amplify Console
- SPA で構築された Web アプリ向け CI/CD & ホスティングサービス
Amplify ライブラリ利用例
// Amplify ライブラリから API uモジュールをインポート
import { API } from 'aws-amplify'
// API モジュールの get 関数で API をコール
const data = await API.get('orderAPpi', '/orders')
動かしてみる
インストール
$ npm install -g @aws-amplify/cli $ amplify version 4.29.3
プロジェクト初期化
$ mkdir awesome-project && cd awesome-project $ amplify init Note: It is recommended to run this command from the root of your app directory ? Enter a name for the project awesomeproject ? 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 For more information on AWS Profiles, see: https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html ? Do you want to use an AWS profile? Yes ? Please choose the profile you want to use default Adding backend environment dev to AWS Amplify Console app: d1dfezdj0p978l ⠦ Initializing project in the cloud... ... Your project has been successfully initialized and connected to the cloud! Some next steps: "amplify status" will show you what you've added already and if it's locally configured or deployed "amplify add <category>" will allow you to add features like user login or a backend API "amplify push" will build all your local backend resources and provision it in the cloud "amplify console" to open the Amplify Console and view your project status "amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud Pro tip: Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything
CloudFormation 確認
Role 2つとバケットが作成されている。
Role は特に権限はまだついてなさそう。
API 追加
Tips に記載の通り、 amplify add api を試します。
$ amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: awesomeproject
? Choose the default authorization type for the API API key
? Enter a description for the API key: api-key
? After how many days from now the API key should expire (1-365): 365
? Do you want to configure advanced settings for the GraphQL API No, I am done.
? Do you have an annotated GraphQL schema? No
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, nam
e, description)
The following types do not have '@auth' enabled. Consider using @auth with @model
- Todo
Learn more about @auth here: https://docs.amplify.aws/cli/graphql-transformer/directives#auth
GraphQL schema compiled successfully.
Edit your schema at awesomeproject/schema.graphql or place .graphql files in a directory at schema
? Do you want to edit the schema now? No
Successfully added resource awesomeproject locally
Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud
API プッシュ（デプロイ）
引き続き「Some next steps」の amplify push を試してます。
$ amplify push
✔ Successfully pulled backend environment dev from the cloud.
Current Environment: dev
| Category | Resource name | Operation | Provider plugin |
| -------- | -------------- | --------- | ----------------- |
| Api | awesomeproject | Create | awscloudformation |
? Are you sure you want to continue? Yes
The following types do not have '@auth' enabled. Consider using @auth with @model
- Todo
Learn more about @auth here: https://docs.amplify.aws/cli/graphql-transformer/directives#auth
GraphQL schema compiled successfully.
...
✔ All resources are updated in the cloud
GraphQL endpoint: https://XXXXXXXXX.appsync-api.ap-northeast-1.amazonaws.com/graphql
GraphQL API KEY: da2-XXXXXXXXX
API のエンドポイントができました。
CloudFormation を確認するとネストされたスタックができているのが確認できます。
呼び出してみる
DynamoDB に項目の作成
データソースとして DynamoDB が作成されていることが、ネストされた CloudFormation から確認できます。
まずはテストデータを追加します。
AppSync クエリエディタで呼び出す
レコード参照
作成した DynamoDB のレコードの ID をクエリエディタに渡して呼び出してみます。
無事に Query で呼び出せることが確認できました。
レコード作成
Mutation でデータの作成も同様に行ってみます。
成功しました。
DynamoDB を見るとちゃんとデータが挿入されております。
curl での呼び出してみる
API キー認証で作っているので以下を参考に呼び出すこともできそうです。
$ curl -XPOST -H "Content-Type:application/graphql" -H "x-api-key:ABC123" -d '{ "query": "query { movies { id } }" }' https://YOURAPPSYNCENDPOINT/graphql
さきほどマネジメントコンソールで作成した Query を叩いてみます。
$ curl -XPOST -H "Content-Type:application/gaphql" -H "x-api-key: da2-XXXXXXXXX" -d '{ "query": "query MyQuery { getTodo(id: \"a3aceb1b-8883-4165-996b-3f04bdb952c9\") { id name } }" }' https://XXXXXXXXX.appsync-api.ap-northeast-1.amazonaws.com/graphql | jq . { "data": { "getTodo": { "id": "a3aceb1b-8883-4165-996b-3f04bdb952c9", "name": "test2" } } }
ちゃんと curl でも呼び出せることが確認できました。
所感
あまり細かいこと確認が追いついてない状況ですが、とりあえず簡単に動きそうな感触はつかめました。
簡単な GraphQL バックエンドを作るのであれば、確かにこれだけで済みそうな感じです。
DynamoDB で、データリソースが表現できそうであれば使ってみたいと思いました。
