とことんDevOps | 日本仮想化技術のDevOps技術情報メディア

DevOpsに関連する技術情報を幅広く提供していきます。

日本仮想化技術がお届けする「とことんDevOps」では、DevOpsに関する技術情報や、日々のDevOps業務の中での検証結果、TipsなどDevOpsのお役立ち情報をお届けします。
主なテーマ: DevOps、CI/CD、コンテナ開発、IaCなど

開催予定の勉強会

読者登録と各種SNSのフォローもよろしくお願いいたします。

Amplifyを使ってWebアプリを作ろう(API機能編)

こんにちは。 アドベントカレンダー20日目です。終盤に差し掛かってきました。 今年はフロントエンドまわりであれこれ開発することが多かったので、振り返りを兼ねてこれからフロントエンド開発を始める方向けに入門編としてお送りしています。 最終日の25日には何かアプリケーションができていることが目標です。

↓最初から読み始めたい方はこちらか↓

devops-blog.virtualtech.jp

おさらい

今回のはなし

第18回からAmplifyシリーズでお送りしています。今回はAPI機能です。AmplifyはDBにDynamoDBを使ったアーキテクチャが標準となっています。 DynamoDBは、NoSQLと呼ばれるものでリレーショナルデータベース(RDB)とは使い勝手が異なります。普段からRDBに慣れている方からすると慣れるまで扱いにくさがあります。

GraphQLと組み合わせることでAPIサーバーを別に用意することなく、手軽に構築することができます。今回はそんなAPI機能について学んでいきます。

準備

AmplifyでAPI機能を追加するためには次のコマンドを実行します。

amplify add api

コマンド実行中にいくつか質問がされてますが、回答例としてご紹介します。

? Select from one of the below mentioned services: (Use arrow keys)
❯ GraphQL 
  REST 

今回はGraphQLを使用します。

Here is the GraphQL API that we will create. Select a setting to edit or continue (Use arrow keys)
  Name: reactsample 
  Authorization modes: API key (default, expiration time: 7 days from now) 
  Conflict detection (required for DataStore): Disabled 
❯ Continue

今回は何も変更せずにそのまま進みます。

? Choose a schema template: (Use arrow keys)
❯ Single object with fields (e.g., “Todo” with ID, name, description) 
  One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”) 
  Blank Schema 

オブジェクト同士のリレーション関係によって2パターンのサンプルが用意されています。シンプルなサンプルコードなので、あっても無くてもあまり変わらないくらいの内容です。今回は、デフォルトで選択されている内容のまま進みます。

? Do you want to edit the schema now?

スキーマを今から編集するかどうか聞かれていますが、そのまま進みます。

amplify statusを実行してからステータスを確認します。

┌──────────┬─────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name       │ Operation │ Provider plugin   │
├──────────┼─────────────────────┼───────────┼───────────────────┤
│ Api      │ xxxxxxxxxxx         │ Create    │ awscloudformation │
├──────────┼─────────────────────┼───────────┼───────────────────┤
│ Auth     │ xxxxxxxxxxxxxxxxxxx │ No Change │ awscloudformation │
└──────────┴─────────────────────┴───────────┴───────────────────┘

このようにapiが新しく追加れて操作がCreateになっていれば順調です。 今回はamplify pushを実行する前にスキーマ定義について編集しましょう。

スキーマ定義

今回はGraphQLを使用しているため、スキーマの定義ファイルを編集します。ファイルの保管場所はamplify/backend/api/reactsample/schema.graphqlです。

このファイルを開くと以下のようなサンプルが表示されています。これはシンプルにToDoを保持するようになっています。他にも他のモデルとリレーション関係を持たせたり、ユーザーごとにアクセスルールを指定したりできます。

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

何かテーマがあった方が進めやすいので「社内の書籍管理アプリ」というテーマでやってみようと思います。

type Book @model {
  id: !D!
  isbn: Int!
  name: String!
  auther: [String]
  publisher: String
}

id: !D!は、primaryキーのようなものなので、お決まりのように必ずつけるようにしてください。

データ型の最後につけるビックリマーク(!)は、必須項目かどうかを示しています。

今回はこのような形にしてみました。ファイルの保存ができたらamplify pushコマンドを実行して変更内容を反映します。

? Are you sure you want to continue? (Y/n)

と聞かれますので、エンターを押して進めます。

? Do you want to generate code for your newly created GraphQL API (Y/n) 

と表示されたらエンターを押して進めます。

? Choose the code generation language target 
  javascript 
❯ typescript 
  flow 

今回はTypeScriptで作っているため、typescriptを選択して進めてください。

? Enter the file name pattern of graphql queries, mutations and subscriptions (src/graphql/**/*.ts)

ディレクトリについては、表示されているデフォルトまま進めます。

 Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions (Y/n)

そのまま進めます。

? Enter maximum statement depth [increase from default if your schema is deeply nested] (2)

デフォルトのまま進めます。この値は後からも変更できます。 GraphQLでは関連するモデルのデータを毎回一緒に取得してきてくれます。取得する際の階層の深さを定義できます。 階層が深い場合に処理が重くなったりしてしまうため、設定する値には注意が必要です。

? Enter the file name for the generated code (src/API.ts)

そのまま進めます。

デプロイが始まりますがそこそこ待ちますので、休憩がてらコーヒーでも1杯入れて一息きましょう。

実行完了を無事に見届けたらここで一区切りします。次回から書籍管理アプリを作っていくという設定が少しずつ使ってみたいと思います。

おわりに

前回の認証機能に引き続き、API機能編として学んできました。今回も、手軽にAPI機能を構築できることを実感できたのではないでしょうか。 次回から実際にAPIを使って書籍管理アプリを作りながら実践編としてお話しします。