新機能 – Amplify CLI を使用したローカルモックとテスト

オープンソースの Amplify フレームワークは、ライブラリ、ユーザーインターフェイス (UI) コンポーネント、およびコマンドラインインターフェイス (CLI) のセットを提供します。AWS CloudFormation を使用してバックエンドリソースをプロビジョニングすることにより、洗練されたクラウド機能をウェブまたはモバイルアプリに簡単に追加できます。

お客様とお話しするときに、新しい機能を追加したりバグを解決したりするときは、できるだけ早く反復して、操作からすばやくフィードバックを得ることが重要だという話をよく耳にします。開発体験はどのように改善できますか?

さて、先週、Amplify チームは新しい Predictions カテゴリを作り、機械学習機能をウェブまたはモバイルアプリにすばやく追加できるようにしました。今日、彼らは再び改善を試みます。Amplify CLI を使用して、提供している中で最も一般的なクラウドサービスの一部をモックし、アプリケーションをローカルで 100% テストできるようになりました。

ここでモックするということは、実際のバックエンドコンポーネントを使用する代わりに、クラウドサービスの場合は API を使用する代わりに、その API のローカルで単純化されたエミュレーションを代わりに使用できることを意味します。このエミュレーションは、開発中のテストに必要な基本機能を提供しますが、本番サービスから得られる完全な動作は提供しません。

この新しいモック機能を使用すると、すべてのステップで使用しているクラウドリソースをプロビジョニングまたは更新する必要なく、変更をすばやくテストできます。この方法で、クラウドバックエンドに影響を与えることなく、迅速に実行できる単体テストと統合テストを設定できます。アプリのアーキテクチャに応じて、バックエンドリソースをプロビジョニングせずに CI/CD パイプラインで自動テストを設定できます。

これは、Apache Velocity Template Language (VTL) で記述されたAWS AppSync リゾルバマッピングテンプレートを編集するときに非常に便利です。リクエストを入力として受け取り、リゾルバの指示を含む JSON ドキュメントを出力します。これで、編集内容に関するフィードバックをすぐに受け取ることができ、更新するたびにデプロイを待つことなく、リゾルバが期待どおりに機能するかどうかをテストできます。

最初のリリースでは、Amplify CLI をローカルでモックできます。

リゾルバマッピングテンプレートおよび Amazon DynamoDB がサポートするストレージを含む AppSync GraphQL API。
AWS Lambda 関数は、直接または GraphQL API のリゾルバとして呼び出されます。
アプリケーションのストレージとして使用する Amazon Simple Storage Service (S3) バケット。
GraphQL API の Amazon Cognito ユーザープール認証。ただし、最初に実際のサービスから JSON Web Token (JWT) を取得する必要があります。その後、JWT をローカルで受け入れます。

API モック
実行できる操作の概要を簡単に見てみましょう。たとえば、再利用可能な水のボトルを補充してプラスチックのゴミを減らせる素敵な場所の位置情報について、ユーザーが保存および共有する場合に役立つサンプルアプリを作りましょう。

Amplify CLI をインストールするには、Node.js (バージョン >= 8.11.x) および npm (バージョン >= 5.x)が必要です。

npm install -g @aws-amplify/cli
amplify configure

Amplify は多くの異なるフレームワークをサポートしています。この例では、React を使用しており、サンプルアプリ (npx には npm >= 5.2.x) から始めています。

npx create-react-app refillapp
cd refillapp

Amplify CLI を使用してプロジェクトを初期化し、API を追加します。Amplify CLI は対話型であり、バックエンドの構成を駆動する質問をします。この場合、質問されたら、GraphQL API を追加することを選択します。

amplify init
amplify add api

API の作成中に、GraphQL スキーマを編集し、この方法で RefillLocation を定義します。

type RefillLocation @model {
  id: ID!
  name: String!
  description: String
  streetAddress: String!
  city: String!
  stateProvinceOrRegion: String
  zipCode: String!
  countryCode: String!
}

フィールドの最後に感嘆符 ! を含めるのは必須です。他のフィールドは任意であるため、新しいオブジェクトを作成するときに省略できます。

最初の行に表示される @model は、GraphQL Transform 使用して、DynamoDB によってサポートされる API の最上位オブジェクトタイプを定義するディレクティブです。必要なすべての CRUDL (作成、読み取り、更新、削除、および一覧表示) クエリと変化、およびそのような変化の通知を受けるサブスクリプションを生成します。

ここで、通常、amplify push を実行して、プロジェクトに必要なバックエンドリソース (この場合は AppSync と DynamoDB) を設定およびプロビジョニングする必要があります。ただし、フィードバックをすばやく得るために、このコマンドを実行する新しいローカルモック機能を使用します。

amplify mock

あるいは、amplify mock api コマンドを使用して、GraphQL API のみを指定してモックすることができます。この段階では同じ結果になりますが、一度に複数のモック機能を使用する場合は便利です。

mock コマンドの出力は、AppSync Mock エンドポイントなど、コマンドで何ができるか、お客様が何を実行できるかに関する情報を提供します。

GraphQL スキーマがコンパイルされました。

/MyCode/refillapp/amplify/backend/api/refillapp/schema.graphql でスキーマを編集するか、.graphql ファイルを /MyCode/refillapp/amplify/backend/api/refillapp/schema のディレクトリに配置します。

テーブル RefillLocationTable をローカルで作成

GraphQL codegen を実行

✔ GraphQL 操作を生成し、src/graphql に保存しました

AppSync Mock エンドポイントは http://localhost:20002 で実行中です

考えられるコードエラーのフィードバックを得るために、モックコマンドをターミナルウィンドウで実行し続けます。たとえば、VTL テンプレートを編集すると、Amplify CLI はそれをすぐに認識し、リゾルバの更新されたコードを生成します。間違った場合、実行中のモックコマンドからエラーが発生します。

AppSync Mock エンドポイントを使用すると、以下にアクセスできます。

API に必要な GraphQL Transformation
API データをローカルで管理する DynamoDB Local
オープンソースの OneGraph graphiql-explorer プラグインに基づいた Amplify GraphQL Explorer

ウェブインターフェイスを使用して、API に対して GraphQL クエリ、変化、およびサブスクリプションをローカルで実行できるようになりました。たとえば、新しい RefillLocation を作成するには、次のように視覚的な変化を作成します。

都市の RefillLocation オブジェクトのリストを取得するには、同じウェブインターフェイスを使用してクエリを作成し、ローカルの DynamoDB ストレージに対して実行します。

データモデルが正しいと確信したら、アプリのフロントエンドコードの作成を開始し、React アプリの App.js ファイルを編集し、ローカルモックのおかげですぐにテストできる機能を追加します。

React 拡張機能を含む Amplify フレームワークをアプリに追加するには、Yarn を使用します。

yarn add aws-amplify
yarn add aws-amplify-react

これで、Amplify フレームワークライブラリを使用して、GraphQL 操作を実行する、次のようなコードを作成できます。

import API, { graphqlOperation } from '@aws-amplify/api';
import { createRefillLocation } from './graphql/mutations';

const refillLocation = {
  name: "My Favorite Place",
  streetAddress: "123 Here or There",
  zipCode: "12345"
  city: "Seattle",
  countryCode: "US"
};

await API.graphql(graphqlOperation(createRefillLocation, { input: refillLocation }));

ストレージのモック
RefillLocation の写真をユーザーがアップロードして共有できるように、アプリに新しい機能を追加したいと思います。そのためには、プロジェクトの設定にストレージカテゴリを追加し、「コンテンツ」を選択して S3 を使用します。

amplify add storage

Amplify フレームワークライブラリを使用すると、ブラウザから直接、次の構文を使用して S3 からオブジェクトを配置、取得、または削除できます。

import Storage from '@aws-amplify/storage';

Storage.put(name, file, {
  level: 'public'
})
.then(result => console.log(result))
.catch(err => console.log(err));

Storage.get(file, {
  level: 'public'
})
.then(result => {
  console.log(result);
  this.setState({ imageUrl: result });
  fetch(result);
})
.catch(err => alert(err));

ユーザー同士で公開的に写真を共有してほしいので、S3 とのやり取りをすべて public としてマークしています。ただし、Amplify フレームワークは private、protected、public などのさまざまなアクセスレベルをサポートしています。詳細については、Amplify のドキュメントでファイルアクセスレベルセクションを参照してください。

この新しいモック機能でS3ストレージをサポートしているため、GraphQL API (AppSync および DynamoDB) で使用されるバックエンドとコンテンツストレージ (S3) を含むアプリケーション全体をローカルでテストするために、amplify mock を再度使用します。

アプリケーションの一部のみをローカルでテストしたい場合は、amplify mock API または amplify mock ストレージを使用して、GraphQL API または S3 ストレージのみをローカルでモックすることができます。

今すぐ利用可能です
この記事では時間の問題で説明できなかった機能が他にもたくさんあります。その他の機能を学習する場合は、好奇心をそそる内容を実践することがおススメです。 get-started チュートリアルに従って Amplify の使用を開始できます。

アプリケーションをローカルでモックおよびテストできるようになると、アイデアをよりすばやく構築および絞り込むことができます。Amplify CLI GitHub リポジトリでお客様のご意見をお聞かせください。

Danilo

Amazon Web Services ブログ

新機能 – Amplify CLI を使用したローカルモックとテスト

お役立ちリンク

フォローお願いいたします