AWS AmplifyでSNSアプリを作ってみた体験記と手順まとめ

2021-06-12

#AWS

ハンズオン

こちらのワークショップを実践してみました。

Amplify SNS Workshop

Twitterのようなつぶやきアプリ「boyaki」を作ります。

Amplifyのインストール

npm install -gで権限エラーなどで躓いたのでこちらの記事に対処法を書きました。

AmplifyによるSNSアプリ作成

AmplifyはzshターミナルのCLI操作でアプリを作っていきます。

$ npx create-react-app boyaki
$ cd boyaki

$ amplify init # 初期化
$ npm start # localhost:3000起動

$ amplify add auth # 認証機能追加
$ amplify status # 認証機能のリソースが追加されていることを確認
$ amplify push # クラウドへ反映

$ npm install --save aws-amplify@3.3.14 @aws-amplify/ui-react@0.2.34 # フレームワークを追加

ここでApp.jsの中身を修正し、Reactアプリケーションを書きます。

コピペなので内容がわからなくても進められます。

認証用のアカウント作成、ログインができるようになりました。

続いて、POST機能の作成です。GraphQL APIを利用します。

$ amplify add api # APIの作成

GraphQLかRESTか選択でき、GraphQLを選択するとAWS AppSyncAWS AppSyncを利用することになります。

AppSyncはGraphQL APIを構築するマネージドサービスです。

CLI上で対話形式でAPIの認証方法やスキーマテンプレートを選択できます。

./amplify/backend/api/(BoyakiGql)/schema.graphqlを編集することでスキーマを編集できます。

type Post
  @model (
    mutations: {create: "createPost", delete: "deletePost", update: null}
    timestamps: null
    subscriptions: { level: public }
  )
  @auth(rules: [
    {allow: owner, ownerField:"owner", provider: userPools, operations:[read, create, delete]}
    {allow: private, provider: userPools, operations:[read]}
  ])
{
  type: String! # always set to 'post'. used in the SortByTimestamp GSI
  id: ID
  content: String!
  owner: String
  timestamp: Int!
}

ちなみにGraphQLでのデータ取得はQuery、データ更新はMutationとして定義されます。Mutationは「突然変異」という意味らしいです。

認証周りはどのアプリでも必須な機能なので重要そうですね。

@model(model directive)の定義・使い方の詳細はこちら Amplify Docs - Define your model types

@auth(auth directive)による認可戦略の実装方法詳細はこちらAmplify Docs - Setup authorization rules

Amplify Mocking

Amplify Mockingを利用してスキーマの挙動を確認します。

Mockingは変更後の動作確認をローカル環境で行う機能。amplify pushは反映に時間がかかるので手軽に動作確認するのに便利そう。

$ amplify mock api

これでAPIのテスト環境がブラウザに立ち上がります。

ADD New MutationからcreatePost、ADD New QueryからlistPostsの動作が確認できました。

mockの終了はターミナルでCtrl+C。

DynamoDBの設計

Modelにより裏でDynamoDBが立ち上がります。@keyでGSIを作成し特定のフィールドを引数にしたクエリを投げられます。

GSIについての詳細はこちらの記事にも書いています。

このアプリでは「すべてのつぶやきの時系列順」と、「特定のユーザのつぶやきリスト」を取得する設計をします。

よく使いそうな使い方。

@key(name: "SortByTimestamp", fields:["type", "timestamp"], queryField: "listPostsSortedByTimestamp")
@key(name: "BySpecificOwner", fields:["owner", "timestamp"], queryField: "listPostsBySpecificOwner")

ここで指定するfieldsがパーティションキーとソートキー。

MockでUpdate Authから別のユーザを追加していくつかPostして、実際に上のQueryを投げてみました。無事、順番通りにfetchできることを確認しました。

Frontendの実装

コピペで実装できます。

Main.js

react-routerを利用したルーティング処理
material-uiのThemeProviderクラスによるデザイン適用

Sidebar.js

React Hooksを利用したTextField入力値のハンドリング
createPost Mutationの実行
Authモジュールによるサインアウト機能

AllPosts.js

全ユーザのPostを時系列でフェッチ
リアルタイムで新規Postを取得するSubscription

PostsBySpecifiedUser.js

特定のユーザのPost一覧を表示するUI

PostList.js

上記2つのPost一覧を表示するUI

コード読むだけでも勉強になりそう。

amplify pushでクラウドに反映します。

できました。かっこいい。

webサイトホスティング

AWS Amplify ConsoleでGitベースのCD(Continuous Deploy)か手動デプロイでホスティングできます。

$ amplify add hosting
# 対話形式でManual Deployを選択
$ amplify publish # ホスティング開始コマンド

URLが生成されてインターネットからアプリケーションにアクセスできるようになりました。

機能追加

以下の追加機能を実装します。

ユーザごとに特定のユーザをフォローする機能
フォローしたユーザのみのタイムラインを取得する機能

Lambda関数にAPIコールをさせるためのIAMロールを付与します。amplify add apiで作成した認証方法はCognitoだったので、IAM認証を追加します。

$ amplify update api

質問にはUpdate auth settingで答えて、デフォルトはCognitoユーザープールにしてIAMを追加します。(複数選択の設問はスペースキーで選択。)

Lambda関数の作成は以下のコマンドを実行します。

$ amplify add function

Lambda関数の実行に必要なライブラリをインストール

$ cd ./amplify/backend/function/createPostAndTimeline/src
$ npm install --save aws-appsync@3.0.2 graphql-tag@2.10.3 node-fetch@2.6.0

AmplifyでセットアップしたAppSyncがLambda関数を呼び出す時のevent構造はこちらが参考になります。 Amplify Docs | Configure Lambda resolvers - Structure of the function event

Timeline機能のフロントエンド

全文検索機能

@searchableディレクティブで、モデルを対象に全文検索をできるようにします。

動作としては、モデルのDynamoDB TableにINSERTされたデータをDynamoDB Streamsがフックし、Elasticsearchへレコードを追加します。

フロントエンドからElasticsearchにクエリを投げるには、GraphQL APIにセットアップされるsearchPostsというQueryを実行します。

@searchableの詳細はこちら　 Amplify Docs | Make your data searchable

テスト用にAppSyncのマネジメントコンソールからPostを作っておきます。アプリケーションを使わずにクエリを投げられるのは便利ですね

メモ : ユーザープールログインに必要なWebClientIDは、./src/aws-exports.js内のaws_user_pools_web_client_idの項目

Staging環境の構築

amplify envを使えば簡単に環境の複製ができます。

環境の一覧を取得。

$ amplify env list

productionしかないです。ここにstagingを追加します。

$ amplify env add

環境の切り替え

$ amplify env checkout production

この段階ではまだクラウド上にはstagingのバックエンドはなく、バックエンド構築用のIAM ロール、S3 バケット、Amplify Consoleのアプリケーションが構築されています。

バックエンドの構築はstaging環境に切り替えてからpushすればよいです。

$ amplify env checkout staging
$ amplify push

successfullyと出たらamplify statusでstaging環境のバックエンドができていることが確認できました。すごい。

ドメインはhttps://staging.hoge.amplifyapp.comと環境につけた名前が付与されています。

Github連携

ローカル環境でamplify publishコマンドではなく、Amplify Consoleを使えばGitHubと連携したCI/CD環境が構築できます。

ちなみにAmplify Consoleは静的サイトであればAmplifyを用いなくても使用できるとのこと。

Githubにログインしてリポジトリを作り、生成されたURLにpushします。

$ rm -rf .git # 念の為.gitフォルダを削除
$ git init
$ git add .
$ git commit -m "first commit"
$ git remote add origin https://github.com/hogehoge/repository.git
$ git push -u origin master

Githubにpushしたら自動デプロイさせる

このブログでも利用しているVercelみたいな感覚でGithubにpushして自動デプロイできるということですね。便利そう。

$ amplify env checkout production # 適用したい環境に切り替え
$ amplify status # 切り替わっていることを確認
$ amplify remove hosting # 既存のHosting設定を解除
$ amplify push # バックエンドに反映(元の環境にはアクセスできなくなる)

$ amplify add hosting # ホスティング設定
# → Amplify Console → Continuous deployment

ここでAmplify consoleがブラウザで開くので、Git Hub連携を選択します。

特に書いてありませんでしたが、最初に作ったIAMユーザでコンソールにログインしておく必要がありますね。

環境はproductionを選択して、create new Roleでデフォルトで作られるロールを割り当てます。

たいきちゅう... (暇なのでスクショ)

大体5分位で完了。

無事作成したアプリケーションにアクセスできました。

Sidebarの文字をLogoutからSign outに変更してpushして、無事更新も自動で反映されることを確認しました。

デプロイ時間は約6分。単純なブログよりは構成複雑だし、これくらいは許容...か...? (普段Vercelデプロイのブログ更新は1分かからないので困惑)

stating環境のデプロイ

Basic認証ありにすることができます。

アプリのトップ画面から「ブランチの接続」
environmentをstagingに
Access ControlからAccess Settingでuser/password設定

General settingから特定の文字列hoge/**からはじまるブランチ名は特定の環境にデプロイするようにもできます。

E2Eテスト

Cypressをサポートしているので簡単にE2Eテストができます。

動画で動作をチェックすることができるみたいですね (やってない)

Amplifyの後片付け

ルートディレクトリで以下のコマンドで削除できます。

$ amplify delete

Are you sure you want to continue? This CANNOT be undone. (This would delete all the environments of the project from the cloud and wipe out all the local files created by Amplify CLI) とのことで、LocalもCloudもすべての環境を削除してくれるようです。

危険なコマンドですが、チュートリアルには便利。

コンソールにアクセスしてdeleteされていることを確認できました。

感想

やってみた感想としては、平易なCLIコマンドで簡単にBackendを含めアプリケーションを構築できる強みがありますが、amplify push / amplify publish にそれぞれ数分~10分くらい掛かるのが厄介ですね。

かなり待たされる感があり、この記事のライティングやリンク貼り作業もすべて待ち時間でできました。(おかげさまで...?)

できるだけMock APIとLocal Hostでテストして、デプロイは最小限にしたいところです。

Github連携といった実用的なアクションも含めてチュートリアルに入っているのはとても嬉しい構成でした。

忘れたらまたやろう。

【オススメ】未経験からプログラマーへ転職できる【GEEK JOBキャンプ】

▼ Amazonオススメ商品

ディスプレイライトデスクライト BenQ ScreenBar モニター掛け式

スマートLEDフロアライト間接照明 Alexa/Google Home対応