LoginSignup
0
0

【AWS】API Gateway→Lambda→AppSync→DynamoDBを実装したい ~ Amplifyを添えて ~ Part3

Posted at

前回(Part1)の記事はこちら

それでは続きをやっていきましょう。

今回の対象範囲

以下の赤枠で囲った箇所になります。
part3.jpg

前提条件

  • AWSのアカウントがあること
  • Amplicy Cliをインストールしていること(筆者バージョン:11.0.2)
  • 「amplify configure」コマンドを実行していること

Amplifyプロジェクトの作成

まずは前回同様Amplifyプロジェクトを作成します。

$ amplify init

Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project backendApp
The following configuration will be applied:

Project information
| Name: backendApp
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: none
| Source Directory Path: src
| Distribution Directory Path: dist
| Build Command: npm.cmd run-script build
| Start Command: npm.cmd run-script start

? Initialize the project with the above configuration? Yes
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Please choose the profile you want to use [.aws/credentialsのprofile名]
Adding backend environment dev to AWS Amplify app: ********

~~~

Deployment state saved successfully.
√ Initialized provider successfully.
✅ Initialized your environment successfully.

Your project has been successfully initialized and connected to the cloud!

AppSync(DynamoDB)の追加

次に、AppSyncを追加します。(AppSyncを追加することで自動的にDynamoDBテーブルも作成されます。)

$ amplify add api

   ╭────────────────────────────────────────────────────────────╮
   │                                                            │
   │                     Update available:                      │
   │   Run amplify upgrade for the latest features and fixes!   │
   │                                                            │
   ╰────────────────────────────────────────────────────────────╯

? Select from one of the below mentioned services: GraphQL
? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)

⚠️  WARNING: your GraphQL API currently allows public create, read, update, and delete access to all models via an API Key. To configure PRODUCTION-READY authorization rules, review: https://docs.amplify.aws/cli/graphql/authorization-rules

✅ GraphQL schema compiled successfully.

Edit your schema at C:\Users\ShingoYoshimatsu\develop\amplify\backend\api\backendapp\schema.graphql or place .graphql files in a directory at C:\amplify\backend\api\backendapp\schema
√ Do you want to edit the schema now? (Y/n) · yes
Edit the file in your editor: C:\amplify\backend\api\backendapp\schema.graphql
✅ Successfully added resource backendapp locally

✅ Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

そうすると、\amplify\backend\api\backendapp\schema.graphqlが自動的に生成されます。
このschema.graphqlを編集することで、DynamoDBのテーブルに反映されます。

# This "input" configures a global authorization rule to enable public access to
# all models in this schema. Learn more about authorization rules here: https://docs.amplify.aws/cli/graphql/authorization-rules
input AMPLIFY { globalAuthRule: AuthRule = { allow: public } } # FOR TESTING ONLY!

type Todo @model {
  id: ID!
  name: String!
  description: String
}

AWSへの資材の反映

フォルダとしては以下の構成になっています。
image.png

以下のコマンドを実行します。

$ amplify push

以上でAWSクラウド上に資材を反映することができます。

次回に続く。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0