AWS AppSync Chat Starter でチャットアプリを構築する

PWA と クライアント側でデータを素早く同期する仕組みを構築したくて、AWS AppSync を試してみたくなりました。AWS AppSync Chat Starter で Angular のチャットアプリが簡単に構築できるとのことで、やってみました。

1. 公式URL

AWS AppSync Chat Starter (Angular)のGithubページは以下にあります。

GitHub - aws-samples/aws-mobile-appsync-chat-starter-angular: GraphQL starter progressive web application (PWA) with Realtime and Offline functionality using AWS AppSync

GraphQL starter progressive web application (PWA) with Realtime and Offline functionality using AWS AppSync - aws-samples/aws-mobile-appsync-chat-starter-angula...

github.com

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 ユーザーのアクセス権限は以下のように設定しました。

1. AWSLambdaFullAccess
2. IAMFullAccess
3. AmazonS3FullAccess
4. CloudFrontFullAccess
5. AWSAppSyncAdministrator
6. AWSLambdaExecute
7. AmazonCognitoPowerUser
8. AWSCloudFormationReadOnlyAccess
9. 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:
Configuration and credential file settings in the AWS CLI - AWS Command Line Interface
You can save your frequently used configuration settings and credentials in files that are divided into named profiles.
docs.aws.amazon.com
? 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 画面から強制的に確認処理を行いましょう。