AWS AmplifyとVueによるToDoリストの作成手順

AWS Amplifyとは

AWS Amplifyは、セキュアでスケーラブルなモバイルアプリケーションとウェブアプリケーションを構築するための開発プラットフォームです。AWS Amplifyによって、ユーザーの認証、データとユーザーのメタデータのセキュア保存、データへの選択的なアクセス許可、機械学習の統合、アプリケーションのメトリクス分析、サーバー側コードの実行といった作業を簡易化することができます。

AWS Amplifyの利点

幅広いサービスの対応と深い機能の利用

AWS Amplifyは、AWSクラウドを利用してアプリケーションを強化するため、他のモバイル開発プラットフォームよりもはるかに幅広いサービスに加え、これらのほとんどのサービス内のより深い機能にアクセスできます。

上記の他にAWS Amplifyは、次のことができます。

• アプリやビジネスの拡大に応じてスケーリングする
• オンデマンドのライブなアプリケーションを構築する
• 数百TBのデータに関する毎秒数百万のリクエストを処理する（どの場所でもレイテンシーはマイクロ秒単位です。）

どのプラットフォームでも構築可能

AWS Amplifyは、ネイティブに動作する下記のアプリケーションを構築し、動作させるためのエンドツーエンドのソリューションを提供しています。

• AndroidとiOSアプリケーション
• React NativeやReact、Ionic、Angular、Javascript、Vue.jsによるウェブアプリケーション

AWS Amplifyにはバージョンコントロール、自動的なコードテスト、および実稼働のアプリケーションデプロイのために必要なものが備わっています。AWS Amplifyは、フロントエンドとバックエンドの両方について、完全な開発ワークフローを提供しています。

データの単純化

AWS Amplifyでは、次のことができます。

• 複数のデータベーステクノロジーのセットアップを行うことなく、シームレスにデータにアクセスする
• 様々なリレーショナルおよび非リレーショナルデータベースのような既存のデータベースを簡単に統合する
• GraphQLを使う

GraphQLを使用すると、一回のネットワークリクエストで、複数のソースにわたって情報を問い合わせ、取得できます。これにより、より高速でインタラクティブなモバイルアプリケーションを構築できます。その結果、アプリケーションによるCPU使用率は下がり、バッテリー寿命も長くなります。

オフラインの同期

AWS Amplifyには、デバイス上のデータストアを、バックエンドのデータストアと同期する機能が内蔵されています。

デバイスがオフラインの時

アプリケーションはAWS Amplifyを使用して、ローカルにデータの問い合わせと書き込みを行います。

デバイスが再接続してオンラインに戻った時

AWS Amplifyは自動的にローカルデータストアとバックエンドのデータストアと同期し、矛盾があると解決します。

AWS Amplifyでは、ネットワークの中断にも耐えることができる、信頼性の高いモバイルアプリケーションを構築できます。また、複数のデバイス間にわたってリアルタイムのコラボレーションを行うアプリケーションも可能です。

サーバー管理が不要

AWS Amplifyは、ビジネスロジックによってサーバ側コードを実行することができるため、サーバーを管理する必要がありません。使用するリソース分だけ支払うため、コストを最適化できます。

また、サーバーの管理やアップグレード、バックエンドが不要なだけでなく、アプリケーションは可用性が高く、自動化されたものになります。

きめ細かいセキュリティ管理

AWS Amplifyを使うと、アプリケーションのユーザーごとに、きめ細かいアクセス制御を設定できます。Amazon、Facebook、Google認証のフェデレーションを簡単にセットアップできます。また、ユーザーごとにデータのどの部分を許可するかを正確にコントロールすることができます。

AWS AmplifyとVue.jsによるToDoアプリケーション

ここでは、GraphQL APIを使用して、アイテムをクラウドデータベースに保存して取得し、リアルタイムサブスクリプションで更新を受信する「ToDoアプリケーション」の作成までの流れを例として示します。その中でバックエンドの設定と、バックエンドとWebアプリケーションの統合について説明します。

事前準備

ここでのアプリケーションの作成には、次の環境が必要です。

• Node.js v10.x以降
• npm v5.x以降
• git v2.14.1以降

1. AWSアカウントにサインアップ

2. AWS Amplify CLIをインストールと構成

フルスタックプロジェクトの設定

1. 新しいVueアプリケーションの作成

Vue CLIを用いて新しいVueアプリケーションをブートストラップします。

2. 新しいバックエンドの初期化

アプリケーションをサポートするために必要なバックエンドサービスを作成できるように、AWS Amplifyを設定します。

3. AWS Amplifyライブラリのインストール

「@aws-amplify/ui-vue」パッケージは、Vue固有のUIコンポーネントのセットで、エンドツーエンドの認証フローなどの機能を容易に統合することができます。

4. フロントエンドの設定

クライアントでAWS Amplifyを構成して、バックエンドサービスとやり取りできるようにします。

APIとデータベースをアプリに接続

（アプリケーションの要件）

• ToDoリスト
• タスクを作成／更新／削除する機能

これらの要件を前提として、APIにToDoのリストを照会し、APIに更新を送信してToDoを作成、更新、削除する方法を提供できるようにします。

1. GraphQL変換によるデータのモデル化

GraphQL SDLとカスタムAWS Amplifyディレクティブを使用して、APIのバックエンド要件を定義します。次に、GraphQL変換ライブラリは、SDL定義を、データモデルを実装するAWS CloudFormationテンプレートのセットに変換します。

2. GraphQL APIとデータベースの作成

データがモデル化されたので、プロジェクトのルートから「amplify add api」を実行して、GraphQL APIを作成します。

3. GraphQL APIのデプロイ

APIをデプロイできるように、「amplify push」を実行することで更新した構成をクラウドにプッシュします。

4. GraphQL APIのフロントエンドコードの生成

プッシュを実行すると、スキーマで検出されたすべてのGraphQL操作をコードで生成するオプションが表示されます。オプションを選択した後、コマンドを実行してAWS Amplifyのステータスを確認します。AWS Amplifyコンソールでプロジェクトにデプロイされたサービスは、「amplify console」を実行することで表示されます。

5. フロントエンドをAPIに接続

Vueのアプリケーションを開き、以下のことができるようにします。

• GraphQL ミューテーションを使用したデータの書き込み
• GraphQLクエリを使用したデータの読み取り
• GraphQLサブスクリプションを使用したリアルタイムデータの取得

6. モジュラーインポートの使用

バンドルサイズを小さくするために、特定の機能のみを使用している場合は特定のカテゴリのみをアプリケーションにインポートすることができます。

認証を追加

1. AWS Amplifyによる認証

AWS Amplifyフレームワークは、Amazon Cognitoをメインの認証プロバイダーとして使用しています。Amazon Cognitoは、

ユーザー登録、認証、アカウント復旧、その他の操作を処理する堅牢なユーザーディレクトリサービスです。

2. 認証サービスの作成

サービスをデプロイするために、「amplify push」を実行します。これにより、認証サービスがデプロイされ、使用開始できます。

3. ログインUIの作成

Vueアプリケーションに認証を追加します。AWS Amplifyフレームワークには、認証UIコンポーネントがあります。これは、「aws-exports.js」ファイルで指定された構成を使用して、認証フロー全体を提供できるため、ログインフローが短時間かつ容易に作成できます。

アプリケーションをデプロイしてホストする

静的なWebアプリケーションを手動でデプロイしてホストし、他のユーザーと共有できるようにします。

1. アプリケーションにホスティングを追加

プロジェクトのルートから「amplify add hosting」を実行します。

2. アプリケーションの公開

「amplify publish」を実行すると、アプリケーションが公開されます。公開後、ターミナルには、amplifyapp.comドメインでホストされているアプリケーションのURLが表示されます。追加の変更をする場合は、「amplify publish」を再実行します。

まとめ

本記事では、AWS Amplifyの利点と、AWS AmplifyとVue.jsによるToDoリストアプリケーションの作り方の流れについて解説しました。AWS Amplifyは、開発フレームワークおよび開発者用サービスで構成されており、モバイルアプリケーションやウェブアプリケーションをAWSで構築するための簡単な方法が提供されています。