概要
前々から聞いたことがあったけど使ってなかったAmplifyとReactを使って、簡単なアプリ作るがこの記事のゴールです。
事前チェック
各種環境のバージョンチェックしましょう。(これらが全て使える環境が整っている前提)
$ create-react-app --version
3.4.1
$ node -v
v12.18.0
$ npm -v
6.14.4
$ amplify --version
4.27.1
React App 作成する
クライアントアプリの雛形をつくっていきます。
$ create-react-app client-app --template typescript
$ cd client-app
$ yarn start
おなじみの画面が出ると思いますこれでひとまずクライアント側の準備はOKです。
Amplifyプロジェクトを作成する
AmplifyCLIを使ってAWS上にバックエンド(AppSync)を作っていきましょう。
まずは、Amplifyのプロジェクトを作成していきます。
※ AWSのプロファイルは事前に作ってある前提で進めていきます。
$ applify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project backend-app
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path: src
? Distribution Directory Path: build
? Build Command: npm run-script build
? Start Command: npm run-script start
Using default provider awscloudformation
For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use default
Amplifyのプロジェクトを作成するにあたってインタラクティブに設定情報を聞いてくるので、回答していきます。
最後に仕様するプロファイルを選択するとCloudformationのデプロイが開始されます。
デプロイされた内容としてはS3のバケット作成、各種ロール作成です。
amplify initが終わったらAWSコンソールで確認してみるといいかもです。
AplifyにAPIを作成する
api作成もinitと同じで、インタラクティブに設定情報を聞いてくるので回答していきます。
$ amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: AmplifyFunction
? 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): 365
? Do you want to configure advanced settings for the GraphQL API No, I am done.
? Do you have an annotated GraphQL schema? No
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)
GraphQL schema compiled successfully.
? Do you want to edit the schema now? No
Successfully added resource
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ディレクトリにスキーマのモデル定義が作られてると思うので確認してみましょう。
schema.graphqlの中身はこんな感じです。(今回は特に何もしていないので最小構成です)
type Todo @model {
id: ID!
name: String!
description: String
}
AWS上にデプロイする
amplify pushコマンドを実行してAWSにAPIをデプロイします。
こちらもインタラクティブに質問が来るので答えていきます。
$ amplify push
✔ Successfully pulled backend environment dev from the cloud.
Current Environment: dev
| Category | Resource name | Operation | Provider plugin |
| -------- | --------------- | --------- | ----------------- |
| Api | AmplifyFunction | Create | awscloudformation |
? Are you sure you want to continue? Yes
The following types do not have '@auth' enabled. Consider using @auth with @model
- Todo
Learn more about @auth here: https://docs.amplify.aws/cli/graphql-transformer/directives#auth
GraphQL schema compiled successfully.
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target 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 Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
? Enter the file name for the generated code src/api.ts
回答が完了すると、AWSでリソースの作成が始まります。
最初にcloudformationで作成されたスタックのNested(スタック)として、
リゾルバー(AppSync)とテーブル(DynamoDB)などのバックエンドリソースが作成されます。
amplify pushが完了するとコンソール上に、API(GraphQL)のエンドポイントとAPIキーが表示されると思います。
こちらは自動的にaws-exports.jsに挿入されます。
これでバックエンド側の設定、構築は完了です。
次回
これで一通りですが、最小構成のクライアント、バックエンドの環境ができました。
次回はこの二つのつなぎ込みをして行こうかと思います。