AWS Amplifyのローカルモックを動かしてみる
AWS Amplifyのローカルモックを、以下の公式の記事を参考に動かしてみました。
新機能 – Amplify CLI を使用したローカルモックとテスト | Amazon Web Services ブログ
基本的には公式の手順通りにできたのですが、Amplifyを使い慣れてない場合、少し調べながら進めたところもありました。
その辺りも追加しながら、やったことを書いてみたいと思います。
やったこと
1. Amplify CLIのインストール
以下のコマンドでAmplify CLIをインストールします（インストールしていない場合ですが）。
公式ではこのあと「$ amplify configure」でIAMユーザの作成やクレデンシャルの用意を行いますが
既にAWS CLIなどでローカルにクレデンシャルがある場合は不要でした。
$ npm install -g @aws-amplify/cli
2. プロジェクト作成
「$ npx create-react-app～」でプロジェクトを作るのですが、私の環境では「create-react-app」が既にグローバルインストールされていたため、以下のようになりました。
これについては表示されたとおり、一旦グローバルの「create-react-app」はアンインストールしてから進めます。
$ npx create-react-app refillapp You are running `create-react-app` 4.0.1, which is behind the latest release (4.0.3). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remove create-react-app $ npm uninstall -g create-react-app $ npx create-react-app refillapp $ cd refillapp
3. APIの初期化
公式に書いてあるコマンドを使い、APIを作成します。
AWSのマネージメントコンソールを開くと、CloudFormationが作成・実行され、Amplifyのアプリが作られていることが分かるかと思います。
$ amplify init
4. APIの作成
以下のコマンドでAPIを作成するのですが、選択肢が幾つかでるので迷いました。
以下の別の公式チュートリアルと同じように入力していくことで今回は進めました。
Tutorial - Connect API and database to the app - Amplify Docs
以下は私が入力したコマンドの一部です。最後の「? Choose your default editor」で選択したエディタが開くので
スキーマを書いて保存します。
$ amplify add api ・・・ ? Do you have an annotated GraphQL schema? No ? Do you want to edit the schema now? (y/N) Yes ? Choose your default editor: (Use arrow keys) ・・・
5. ローカルモックの実行
ローカルモックを以下のコマンドで実行します。
$ amplify mock AppSync Mock endpoint is running at http://xxxxxx
エンドポイントのURLが表示されるので、ブラウザで開いてみます。今回はデータの作成、取得を以下のように確認してみました。
画面左下の「Add new」から「Mutaion」を選び、データを作成するクエリを実行します。データが作成されると、そのidが画面右に表示されます。
次は画面左下の「Add new」から「Query」を選び、先のidを指定して取得してみます。先に登録したデータが表示されていれば大丈夫です。
6. Amplifyの削除
「$ amplify init」の時に、マネージメントコンソールでCloudFormation、Amplifyのアプリが作成されていることを確認しました。これらを最後に削除します。とはいっても、以下のコマンドを実行するだけです。
$ amplify delete
コマンドの実行が終わったら、マネージメントコンソールより削除されていることを確認します。
