AWS Amplify と Vue.js を用いた管理画面のサンプルプロジェクトです。認証認可の機能と、GraphQL、REST API を用いた書籍情報の管理機能を提供します。
この管理画面では書籍情報の登録と検索の機能を提供します。書籍情報へのアクセスは Amazon API Gateway を用いた REST によるアクセスと、AWS AppSync を用いた GraphQL によるアクセスの２種類のインターフェースが用意されています。
REST API では、API のインターフェースに Amazon API Gateway、バックエンドの処理には AWS Lambda、データストアには Amazon DynamoDB が用いられています。
GraphQL API では、API のインターフェースに AWS AppSync、データストアには DynamoDB と全文検索のための Amazon Elasticsearch Service が用いられています。DynamoDB に保存されたデータは DynamoDB Stream の機能により、Lambda を経由して Elasticsearch に同期されます。DynamoDB のパーティションキー、ソートキーによる検索を行う場合は、AppSync は DynamoDB に対してクエリの発行を行います。全文検索を行う場合は、AppSync は Elasticsearch に対してクエリを発行します。
注意 REST と GraphQL のデータストアはそれぞれ独立した作りとなっています。例えば、REST で登録したデータは GraphQL で検索することはできません。
- Amplify CLI をインストールします
$ npm install -g @aws-amplify/cli- Amplify CLI の設定を行う
既にご利用の端末でamplify configureを実施済みの場合は、以下のコマンドはスキップしてください。
$ amplify configure- プロジェクトのソースを Clone し、必要なパッケージを取得します
$ git clone [email protected]:aws-amplify-jp/amplify-vue-management-console-example.git
$ cd amplify-vue-management-console-example
$ npm install- Amplify のバックエンドを構築します。
amplify initコマンドでバックエンド構築のための前処理を行います。コマンドラインからいくつか質問をされますが、特に指定がない場合は全てデフォルトの設定を選択します。
$ amplify init次にamplify statusコマンドで構築されるバックエンドの情報を確認します。以下のようにAuth、Api、Storage、Functionカテゴリが構築対象に含まれていれば OK です。これらの詳細な情報はamplify/backendフォルダ配下の各カテゴリフォルダから確認することができます。
$ amplify status
Current Environment: dev
| Category | Resource name | Operation | Provider plugin |
| -------- | ---------------------------- | --------- | ----------------- |
| Auth | amplifyvuesearchexam21160aeb | Create | awscloudformation |
| Api | booksearchgraphql | Create | awscloudformation |
| Api | booksearchrest | Create | awscloudformation |
| Storage | booksearchrest | Create | awscloudformation |
| Function | booksearchrest | Create | awscloudformation |amplify pushコマンドでバックエンドの構築を行います。いくつか質問がなされますが、全てデフォルトの内容で回答します。
$ amplify pushバックエンドの構築には 20 分程度時間がかかります。
Amplify CLI の典型的なワークフローに関しては公式ドキュメントを参照してください。
- アプリケーションを起動します
$ npm run serve
$ open http://localhost:8080/アプリケーションの利用にはユーザの Sing Up が必要になります。ログイン画面の「Create account」リンクからユーザの登録を行なってください。
このサンプルプロジェクトでは、バックエンドに全文検索エンジンであるAmazon Elasticsearch Serviceのインスタンスが起動します。EC2 と同様にインスタンスが起動している時間に対して課金が発生するため、そのままにしておくと不必要なコストが発生してしまいます。検証が終わったら以下コマンドを発行して、バックエンドを全て削除してください。
$ amplify delete全てのバックエンドを削除しても良いか確認が行われるのでYで回答します。
amplify delete コマンドに関する捕捉
Amplify CLI では multiple environments の機能を用いることで本番環境以外にもステージング環境や開発環境といった複数の環境を複製することができます。amplify deleteコマンドでは複製した全ての環境を削除する点について注意してください。個別の環境のみを削除したい場合はamplify env remove ${環境名}コマンドを実行してください。複数環境を用いたチーム開発のワークフローに関しての詳細は公式ドキュメントを参照してください。
? 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 lo
cal files created by Amplify CLI) (y/N) YSee CONTRIBUTING for more information.
This library is licensed under the MIT-0 License. See the LICENSE file.