AWS AppSync Nuxtjs

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

## 構成
![AppSync構成 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/97e2d417-054d-e2ec-693a-23562d9b87f5.jpeg)
フロントにNuxtjsを置いてappsyncを経由し、LambdaでDynamoDBにデータを保存ようにしてみました。
AppSyncのウィザードを使うと全部自動で作ってくれます。

## AppSyncの設定
1. AWSのAppSyncのページで「APIを作成」をクリック
<img width="1266" alt="スクリーンショット 2020-06-03 19.53.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/716898da-ad3f-9710-c753-638afcb0596d.png">

2. 今回は一番下の「一から構築」を選択
<img width="1266" alt="スクリーンショット 2020-06-03 19.53.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/e3d2482f-b94f-6b9c-0ac4-478841c27e0b.png">

3. API名を適当に決めます
<img width="1265" alt="スクリーンショット 2020-06-03 19.53.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/dfb4150c-546b-7e6b-867d-61e9073a7dca.png">

4. スキーマの設定
<img width="1267" alt="スクリーンショット 2020-06-03 21.24.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/e08c3f6c-79ca-9030-b41e-fea192ccf27a.png">

```graphql: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](https://github.com/akihiro-moriwaki/nuxt-appsync/blob/master/appsync/schema/schema.graphql)
* [スキーマの設計](https://docs.aws.amazon.com/ja_jp/appsync/latest/devguide/designing-your-schema.html)
* [型の説明](https://docs.aws.amazon.com/ja_jp/appsync/latest/devguide/scalars.html)

方の説明の中に数値の型はintとfloatがありますが
> Int スカラー型は、非小数の符号付き整数値を表します。Int は -(2^31) と 2^31 - 1 の間の値を表現できます。 

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


5 . 作成が成功すると、メニューが出てくるので、設定の所のAPI Detailsをメモっておく
<img width="1216" alt="スクリーンショット 2020-06-05 19.17.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/041b4581-0618-4618-b979-8896a6b96423.png">

## Nuxtjs
1. Nuxtjsのインストール
ここはスキップします、ここを参考に [公式ドキュメント](https://ja.nuxtjs.org/guide/installation/)

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

```javascript: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](https://github.com/akihiro-moriwaki/nuxt-appsync/blob/master/src/appsync-exports.js)

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

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

```javascript:subscriptions.js 
export const onPutPost = `
  subscription OnPutPost {
    onPutPost {
      id
      tweet
    }
  }
`
```
* [github graphql](https://github.com/akihiro-moriwaki/nuxt-appsync/blob/master/src/graphql)
* [NodeJS クライアントアプリを作成する] (https://docs.aws.amazon.com/ja_jp/appsync/latest/devguide/building-a-client-app-node.html)

## Lambdaの設定
1. ソースをgitに上げておいたので、それをアップロードします
<img width="1223" alt="スクリーンショット 2020-06-05 19.57.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/10195b4f-01ad-e995-6de4-dc9956f8fe35.png">
ポイントはcallbackに結果を指定してあげると、appsync側に返却されます

## DynamoDBの設定
1. Dynamoで1個テーブルを作ります
<img width="1215" alt="スクリーンショット 2020-06-05 20.00.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/d94e9ca9-a553-f57f-1be3-7ffabef9a834.png">
テーブルはid、tweetの二つのカラムです
<img width="1007" alt="スクリーンショット 2020-06-05 20.01.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/864936df-443e-f443-97cf-1c5cf8ad84b5.png">

## 最後にもう一度AppSync側の設定
1. データソースの設定を行います、先ほど作ったLambdaを設定します。他にもHTTPなども設定できるので接続先はなんでも対応出来ます。「データーソースを作成」をクリック
<img width="1261" alt="スクリーンショット 2020-06-05 12.33.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/f429d349-76a9-de70-66bc-9a80dcf17e87.png">


2. 手順にしたがって登録します
<img width="1218" alt="スクリーンショット 2020-06-05 21.25.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/035cfbc9-f667-0b56-45f0-c2834d8e87ea.png">

3. スキーマのところでMutationの関数に先ほど登録したデータソースをアタッチします
<img width="1264" alt="スクリーンショット 2020-06-05 12.34.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/be2ce58f-7c48-8671-8b5d-2d7cc2370d19.png">
<img width="1265" alt="スクリーンショット 2020-06-05 12.35.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/c2fda4c0-32ca-b878-3342-cae0990139b1.png">

4. 動作テスト、クエリのところで簡単にテストが出来ます。試しに下記のようなクエリを書きます。
<img width="1259" alt="スクリーンショット 2020-06-05 12.36.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/4debef83-7fe3-01b7-b061-25905827dbe5.png">
うまくいくと右側に結果が表示されます。（Lambdaで返却した値です）
<img width="1267" alt="スクリーンショット 2020-06-05 18.07.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/e09f6c92-4d4b-e004-2307-ea3f3606a7de.png">
ちなみにDynamoDBの方はというと
<img width="1264" alt="スクリーンショット 2020-06-05 18.07.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/62ca6e5c-c400-b494-975c-292bd638722c.png">
正常に登録されました。

## FrontからPostしてみます。
1. nuxtjsを立ち上げて、ページを開きます。フォームにテキストを入力しSubmitを押します
<img width="1260" alt="スクリーンショット 2020-06-05 18.10.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/5daf9929-72c7-b6c9-1268-91eee146386b.png">
画面はこうなって
<img width="1262" alt="スクリーンショット 2020-06-05 18.10.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/b36489da-e312-b213-09f1-bf86184b312d.png">
DynamoDBにも登録されました。
<img width="1262" alt="スクリーンショット 2020-06-05 18.10.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525769/9bbab1dd-4efd-cd45-8584-7f9b51161cbc.png">

実はもう通知もされます。ブラウザを二つ立ち上げてポストしてみます。動作はこんな感じです。
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/pBR8jr8D474/0.jpg)](http://www.youtube.com/watch?v=pBR8jr8D474)

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

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

ソースはご自由にどうぞ

## ソース
nuxtjs
https://github.com/akihiro-moriwaki/nuxt-appsync

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