AWS AppSync Nuxtjs

概要

AppSyncを使ってみたかったので、簡単なツイートシステムを作って見ました。
今回はAppSyncの仕組みやLambdaとの連携を理解したかったので一から構築しています。

構成

フロントにNuxtjsを置いてappsyncを経由し、LambdaでDynamoDBにデータを保存ようにしてみました。
AppSyncのウィザードを使うと全部自動で作ってくれます。

AppSyncの設定

1. AWSのAppSyncのページで「APIを作成」をクリック

1. 今回は一番下の「一から構築」を選択

1. API名を適当に決めます

1. スキーマの設定

schema.graphql

schema {
  query: Query
  mutation: Mutation
  subscription: Subscription
}

type Mutation {
  putPost(id: ID, tweet: String!): Post
}

type Post {
  id: ID
  tweet: String!
}

type Query {
  singlePost(id: ID!): Post
}

type Subscription {
  onPutPost: Post @aws_subscribe(mutations : ["putPost"])
}

• github schema.graphql
• スキーマの設計
• 型の説明

方の説明の中に数値の型はintとfloatがありますが

Int スカラー型は、非小数の符号付き整数値を表します。Int は -(2^31) と 2^31 - 1 の間の値を表現できます。

intの2^31足りる？？？ int64も欲しいですよね！！！

5 . 作成が成功すると、メニューが出てくるので、設定の所のAPI Detailsをメモっておく

Nuxtjs

1. Nuxtjsのインストール
   ここはスキップします、ここを参考に 公式ドキュメント

2. 5でメモった設定をここに記入する

appsync-exports.js

const awsmobile = {
  aws_project_region: 'ap-northeast-1',
  aws_appsync_graphqlEndpoint: 'https://xxxxxxxxxxxxxxxxxxx.ap-northeast-1.amazonaws.com/graphql',
  aws_appsync_region: 'ap-northeast-1',
  aws_appsync_authenticationType: 'API_KEY',
  aws_appsync_apiKey: 'da2-xxxxxxxxxxxxxxxxxxx'
}

export default awsmobile

• github appsync-exports.js

3 . GraphQLのコードを書く、AppSyncで設定したスキーマとほとんど変わりません、関数名、変数の大文字小文字、$に注意。間違えると動きません

mutations.js

export const putPost = `
  mutation PutPost(
    $tweet: String!
  ) {
    putPost(
      tweet: $tweet
    ) {
      id
      tweet
    }
  }
`

subscriptions.js

export const onPutPost = `
  subscription OnPutPost {
    onPutPost {
      id
      tweet
    }
  }
`

• github graphql
• [NodeJS クライアントアプリを作成する] (https://docs.aws.amazon.com/ja_jp/appsync/latest/devguide/building-a-client-app-node.html)

Lambdaの設定

1. ソースをgitに上げておいたので、それをアップロードします

ポイントはcallbackに結果を指定してあげると、appsync側に返却されます

DynamoDBの設定

1. Dynamoで1個テーブルを作ります

テーブルはid、tweetの二つのカラムです

最後にもう一度AppSync側の設定

1. データソースの設定を行います、先ほど作ったLambdaを設定します。他にもHTTPなども設定できるので接続先はなんでも対応出来ます。「データーソースを作成」をクリック

1. 手順にしたがって登録します

1. スキーマのところでMutationの関数に先ほど登録したデータソースをアタッチします

1. 動作テスト、クエリのところで簡単にテストが出来ます。試しに下記のようなクエリを書きます。

うまくいくと右側に結果が表示されます。（Lambdaで返却した値です） ちなみにDynamoDBの方はというと 正常に登録されました。

FrontからPostしてみます。

1. nuxtjsを立ち上げて、ページを開きます。フォームにテキストを入力しSubmitを押します

画面はこうなって DynamoDBにも登録されました。

実はもう通知もされます。ブラウザを二つ立ち上げてポストしてみます。動作はこんな感じです。

感想

通知の仕組みを一から作ろうと思うと大変ですが、組み合わせでここまで簡単に実装できてしまうとエンジニアがいらなくなる日がそう遠くなさそうでちょっと怖いですね

ウィザードが以前と違ってすごいシンプルになっていて分かりやすくなっていたので、初期構築はこちらからやっても良かったかなと思いました。

ソースはご自由にどうぞ

ソース

nuxtjs
https://github.com/akihiro-moriwaki/nuxt-appsync

Lambda
https://github.com/akihiro-moriwaki/nuxt-appsync-lambda