AWS AppSync Chat Starter でチャットアプリを構築する
PWA と クライアント側でデータを素早く同期する仕組みを構築したくて、AWS AppSync を試してみたくなりました。AWS AppSync Chat Starter で Angular のチャットアプリが簡単に構築できるとのことで、やってみました。
目次
1. 公式URL
AWS AppSync Chat Starter (Angular)のGithubページは以下にあります。
https://github.com/aws-samples/aws-mobile-appsync-chat-starter-angular#readme
2. awscli インストール
すでにインストールされている方は不要です。まだインストールしていない方はインストールしましょう。
$ pip install awscli --upgrade --user
はじめてインストールしたら、aws configureでAWSユーザーと紐づけを行いましょう。
3. amplify インストール
こちらも、インストール済みであれば不要です。
$ npm install -g @aws-amplify/cli
4. angular cli インストール
インストール済みであれば不要です。
$ npm install -g @angular/cli
5. github リポジトリのクローン
以下のリポジトリをクローンしましょう。
$ git clone https://github.com/aws-samples/aws-mobile-appsync-chat-starter-angular.git
$ cd aws-mobile-appsync-chat-starter-angular
6. AWS ユーザーのアクセス権限追加
AWS ユーザーのアクセス権限は以下のように設定しました。
- AWSLambdaFullAccess
- IAMFullAccess
- AmazonS3FullAccess
- CloudFrontFullAccess
- AWSAppSyncAdministrator
- AWSLambdaExecute
- AmazonCognitoPowerUser
- AWSCloudFormationReadOnlyAccess
- cloudformationfullaccess
cloudformationfullaccessは独自に定義した管理ポリシーで、以下のように定義しています。
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"cloudformation:*"
],
"Resource": "\*"
}
]
}
7. amplify init
$ amplify init
amplify init で初期化します。選択肢は以下のように設定しています。
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project awsmobileappsyncchat
? Enter a name for the environment test
? 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 angular
? Source Directory Path: src
? Distribution Directory Path: dist
? Build Command: npm run-script build
? Start Command: ng serve
Using default provider awscloudformation
For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use default
8. npm install
必要なモジュールをインストールします。
$ npm install
9. amplify add auth
ユーザー認証まわりを設定していきます。
$ amplify add auth
選択肢は以下のようにしました。
Do you want to use the default authentication and security configuration?
--> Default configuration
Warning: you will not be able to edit these selections. How do you want users to be able to sign in when using your Cognito User Pool?
--> Phone Number
Warning: you will not be able to edit these selections. What attributes are required for signing up? (Press space to select, to toggle all, to invert selection)
--> Email
10. amplify add analytics
$ amplify add analytics
11. amplify push
$ amplify push
12. Cognito ユーザープールを取得する
以下のコマンドで Cognito ユーザープール名を取得します。
$ grep aws_user_pools_id src/aws-exports.js
"aws_user_pools_id": "ap-northeast-1_XXXXXXXX",
13. AppSync で ChatApp のAPIを生成して、Cognito ユーザープールを設定する
Create with Wizard からAPIを生成します。
Settings の中の User Pool configuration から、さきほど取得した Cognito ユーザープールを設定します。
14. amplify add codegen
AppSync の Getting Started 画面から amplify add codegen のコマンドをコピーして実行します。
15. ng serve
ng serveコマンドを実行して、テスト用のAngularサービスを起動します。私はDockerイメージで構築したので外部ホストからアクセスする必要がありましたので、以下のコマンドで起動しています。
$ ng serve --host "0.0.0.0"
http://192.168.xx.yy:4200/ にアクセスして、以下のように表示されたら成功です。
16. ユーザー登録と承認
ユーザー登録に電話番号やメールアドレスを入力しますが、適当なものを入力したいですよね。しかしそうするとレスポンスコードが届かないので、 AWS Cognito 画面から強制的に確認処理を行いましょう。
