Amplify使い方色々

AWS

Kazuki Moriyama (森山和樹)

Amplifyとは

モバイルアプリケーションを簡単に構築する仕組み
バックエンドの構築を自動化できる
フロントエンドとの連携も自動化
内部はcloud formation

AWS Amplifyとはなんなのか３行で表現する - Qiita

導入

AWS Amplify CLIの使い方〜インストールから初期セットアップまで〜 - Qiita

これを見ればだいたい行ける
注意点はもともとIAMを持っているなら、新規登録しないでそのaccess keyとsecretを入力すればいい

コマンド

add auth

認証系をセットアップする
デフォルトを使えばほぼ問題ない

Amplify Framework Docs

status

現在利用可能なサービスカテゴリーの確認
設定されているgraph qlのキーやエンドポイントの確認

init

環境をローカルに構築する
aws-exports.jsを作成する

amplify経由のappsync

プロジェクト以下のamplify/backend/api/<project-name>/schema.graphqlがappsyncのgraphqlスキーマになっていく
これをいじることでdynamoの作成など行うことができる

amplify上のgitレポジトリファイルからappsync上にエンドポイントをデプロイする

以下はqueryを作成しているがmutationでも手順は同様

1. queryスキーマの作成

schema.graphqlに定義したいエンドポイントのqueryスキーマを追加する

2. リクエストマッピングテンプレートを作成

amplifyプロジェクトのamplify/backend/api/<project-name>/resolvers以下にQuery.<何でも良いからわかりやすい名前>.req.vtlでファイルを作成
- テンプレートの名前はなんでもいいが1で作成したクエリスキーマと同じ名前がわかりやすいのでおすすめ
作成したテンプレート内にいつも通りの処理を記述

3. レスポンスマッピングテンプレートを作成

amplifyプロジェクトのamplify/backend/api/<project-name>/resolvers以下にQuery.<2で作成したreq.vtlと同じ名前>.res.vtlでファイルを作成
- こちらも名前は何でもいいがわかりやすい用に揃えておいたほうが良い
その中にいつもどおり処理を記述

4. cloud formationのresouceファイルの編集

amplifyプロジェクトのamplify/backend/api/<project-name>/stacks以下にあるCustomResources.jsonファイルを開く
その中のResourceskey以下に追加したいリソース情報を記述していく
まず好きな名前のkeyをResources以下に追加
- 名前は何でも良いがわかりやすいのが良い
- ここでは仮にQueryGetUserとする
Resource.QueryGetUserに以下のように属性値を記述
コメントしてる部分以外はコピペでいい

 "QueryGetUser": {
      "Type": "AWS::AppSync::Resolver",
      "Properties": {
        "ApiId": {
          "Ref": "AppSyncApiId"
        },
        "DataSourceName": <データソース名>, // 必須
        "TypeName": "Query", // mutationの場合は"Mutation"、必須
        "FieldName": <1で作成したクエリのスキーマ名>, // 必須
        "RequestMappingTemplateS3Location": {
          "Fn::Sub": \[
            "s3://${S3DeploymentBucket}/${S3DeploymentRootKey}/resolvers/<2で作成したテンプレートのファイル名>", // 必須
            {
              "S3DeploymentBucket": {
                "Ref": "S3DeploymentBucket"
              },
              "S3DeploymentRootKey": {
                "Ref": "S3DeploymentRootKey"
              }
            }
          \]
        },
        "ResponseMappingTemplateS3Location": {
          "Fn::Sub": \[
            "s3://${S3DeploymentBucket}/${S3DeploymentRootKey}/resolvers/<3で作成したテンプレートのファイル名>", // 必須
            {
              "S3DeploymentBucket": {
                "Ref": "S3DeploymentBucket"
              },
              "S3DeploymentRootKey": {
                "Ref": "S3DeploymentRootKey"
              }
            }
          \]
        }
      }
    }