Amplify でのVSCodeリモートコンテナでのnpm start と amplify mock api の実行

2865 ワード
dynamodb-local VSCode amplify リモートコンテナ DynamoDB DynamoDB テキストリンク

ローカルで、npm start と amplify mock api を同時に実行すると、ローカルでDynamoDB localが動きWeb画面側のGraphQLが連動して動かせるようになります。

amplify のワークショップ https://amplify-sns.workshop.aws/ja/30_mock/30_post_front_end.html
にて

こまでの変更をクラウドに反映して確認していきましょう。(実行には数分かかります)

amplify push

$ amplify mock apiと$ npm startを同時に実行し、$ amplify pushせずに動作確認を行うことも可能です。

ただし、作業環境にコンテナをお使いの場合はaws-exports.jsファイルの

キーが"aws_appsync_graphqlEndpoint"の値を"http://localhost:20002/graphql"に変更する必要があることにご注意ください。

とあるので、そのようにやる。

  • 以下の & を付けた方法（コマンド１行）だと、画面側からGraphQLが呼び出しされてDynamoDBへのアクセスができていない （理由までは不明）
npm start & amplify mock api
または
npm start & amplify mock api &

  • 対処
    VSCodeの メニューバーの「Terminal」 -> New Terminal にてターミナルを複数起動する
    それぞれのターミナルで、npm start と amplify mock api を実行する

  • ファイル src/aws-exports.js

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "us-west-2",
    "aws_cognito_identity_pool_id": "us-west-2:d7d643b5-xxx",
    "aws_cognito_region": "us-west-2",
    "aws_user_pools_id": "us-west-2_xxx",
    "aws_user_pools_web_client_id": "54fxxx",
    "oauth": {},
    "aws_appsync_graphqlEndpoint": "http://localhost:20002/graphql",
    "aws_appsync_region": "us-west-2",
    "aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS",
    "aws_appsync_apiKey": "da2-fakeApiId123456",
    "aws_appsync_dangerously_connect_to_http_endpoint_for_testing": true
};

export default awsmobile;

  • npm start で起動後

  • amplify mock api　起動後

  • クラウドにpushするとクラウドのDynamoDBを更新したり、定義を変えてしまうことなく、自身のローカルでAttributeやGSIの確認、PK/SKの確認を行うことができるようになる

  • なお、 https://qiita.com/ssugimoto/items/bdf7a55dc11f23fd6d48 の記事は、amplify mock apiで起動したDynamoDBへの接続方法のため異なります。