トップ > AWS Amplify > 【Amplify】Amplify のローカルモック機能が超便利！

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

AWS Amplify
記事タイトルとURLをコピーする

こんにちは、技術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 です。

$ brew cask install corretto

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

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

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

Amplify プロジェクトを作成

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

$ mkdir amplify-mock
$ cd amplify-mock
$ amplify init

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

API を追加

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

$ amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: amplifymock
? Choose the default authorization type for the API API key
? Enter a description for the API key:
? After how many days from now the API key should expire (1-365): 7
? Do you want to configure advanced settings for the GraphQL API No, I am done.
? Do you have an annotated GraphQL schema? No
? Do you want a guided schema creation? Yes
? What best describes your project: Single object with fields (e.g., “Todo” with
ID, name, description)
? Do you want to edit the schema now? No

モックを使ってみる

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

$ amplify mock

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

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

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

mutation CreateTodo {
  createTodo(input: {
    name:"Amplifyのモックサーバーのブログ書く"
  }) {
    id
    name
  }
}

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

query GetTodo {
  getTodo(id: "<控えたID>") {
    name
  }
}

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

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

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

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

まとめ

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

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