【Amplify】Amplify のローカルモック機能が超便利!

AWS運用自動化サービス「Cloud Automator」

こんにちは、技術1課の加藤です。
またまた Amplify のお話。

今回は簡単に mock API サーバーが立てたられる Amplify のローカルモック機能のご紹介です!

Amplify CLI を使ったローカルモック

2019年8月に出た機能のようですが、つい最近使ってみてとても便利だったのでご紹介。

バックエンドコンポーネントを利用するために今まで amplify push して実際に環境を立ち上げていたんですが

  • いくら開発用の環境とはいえトライエラーのために実環境使うのは嫌
  • 毎回 Push するのは面倒

だなあと感じており、いい方法ないかな、と思っていたら Amplify CLI に提供されていましたローカルモック。

これを使うと、以下をローカル環境で動かすことができるようになります。

  • AppSync GraphQL API
  • AWS Lambda関数 (直接または GraphQL API のリゾルバとして呼び出される)
  • アプリケーションのストレージとして使用するS3バケット
  • GraphQL API のCognitoユーザープール認証(ただし、最初に実際のサービスからJWTを取得する必要があり)

今回は GraphQL API をモックで使ってみます。

使い方

準備

前提として、このモック機能を使うためには Java の環境が必要になります。用意しておきましょう。

mac ユーザーの場合は以下コマンドで OK です。

公式HP からの DL でも良いかと。https://aws.amazon.com/corretto/

また(当然ながら) Amplify CLI も必要なので、まだインストールしていない人はインストールしておきましょう。
AWS 環境にアクセスできるようプロファイル設定もしておいてくださいね。

Amplify プロジェクトを作成

では例の如くプロジェクトを作っていきます。

設定値は基本デフォルトでOKです。エディタとプロファイル設定だけご自身の環境に合わせてあげてください。

API を追加

今回は GraphQL の API を追加してモックを試してみます。
これも基本デフォルト設定で、最後のスキーマ編集については No でいきます。デフォルトのスキーマをそのまま使います。

モックを使ってみる

ではローカルモックを立ててみましょう。
以下コマンドでモックを起動します。途中、GraphQL のコードの生成が行われますが、ここでは特に使わないので適当にデフォルト値を選んでおいてください。

うまく起動すると AppSync Mock endpoint is running at http://192.168.0.43:20002 といった表示が出ます。指示されたエンドポイントにアクセスしてみましょう。

GraphiQL という、GraphQL の開発環境が立ち上がります。
実際にいくつかクエリを打ってみましょう。

デフォルトで作った GraphQL API は Todo リストを作るようなものになっています。
というわけでとりあえず Todo を作ってみます。

data という項目が返ってきていれば OK です。返ってきたデータから id を控えておきましょう。
続いて今作ったデータを取得してみます。

想定通りのデータが返ってくれば OK です。

ローカルモックに登録したデータ

上記クエリを実行すると amplify ディレクトリ配下に mock-data というディレクトリ が増えていることがわかります。
ここにローカルモックに登録した情報が保存されています。

このため一度ローカルモックを止めて (Ctrl + c) 再度ローカルモックを立ち上げ、同じ GetTodo を実行してみてください。
きちんとデータが返ってくることが確認できます。便利。

まとめ

今回は Amplify のローカルモック機能を紹介しました。
正直、いろいろ使い方覚えなきゃいけないのかな、めんどそうかな、と思って避けてたんですが、使ってみたらとんでもなく簡単で便利です。

ぜひ Amplify 使って API 開発している方々は使ってみてください。

AWS運用自動化サービス「Cloud Automator」