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

  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:
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 画面から強制的に確認処理を行いましょう。

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱