Amplifyに入門してみた1

関わっている案件でAmplifyを触ったので忘れないうちに
認証も併せて使用するのがベターっぽいけど今回は触れない（認証使わなかった。。。）
使用端末はmacです。

Amplifyを使うための準備

Amplify CLIのインストール
GUIでもできるようだけど、自分が触れる気がしないのでここはCLIで。

$ npm install -g @aws-amplify/cli
$ amplify -v
4.51.4

Amplify configure
Amplifyのユーザー設定を行うみたい。

$ amplify configure

AWSのコンソールが開くのでログインしてEnter

Follow these steps to set up access to your AWS account:

Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue

Amplifyで使用するリージョンを選択
他のサービスも同じだろうけど覚えとかないとコンソールで探すはめになる（探した）

Specify the AWS Region
? region:  (Use arrow keys)
❯ us-east-1
  us-east-2
  us-west-2
  eu-west-1
  eu-west-2
  eu-central-1
  ap-northeast-1
(Move up and down to reveal more choices)

Amplifyで使用するIAMユーザーを聞かれる
未作成でも作成済みでもEnterを押下するとまたAWSコンソールが開くので、
未作成の場合はそのままIAMユーザーを作ってからコマンドプロンプトに戻ってEnter。
作成済みの場合はそっとAWSコンソールを閉じてコマンドプロンプトに戻ってEnter。
このあと、アクセスキーとシークレットアクセスキーを聞かれるので念のためダウンロードしておいてください

? user name:  (xxxx)

アクセスキーとシークレットアクセスキーとプロファイルの名前を聞かれるので入力
プロファイル名はわかりやすいやつの方が良さげ。

Enter the access key of the newly created user:
? accessKeyId:  ********************
? secretAccessKey:  ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name:  (default)

これで準備完了です。

Successfully set up the new user.

入力した内容は~/.aws配下にあるconfigとcredentialsに保存されてます。

Amplifyをプロジェクトに組み込む

初期構築を前提にReactに組み込んでいきます。
Reactのプロジェクト作成は省きまーす。
Amplifyの初期化 AWS上に登録するためのプロジェクト名を聞かれるので、Reactのプロジェクト名で問題なければそのままEnter

$ amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project (testamplify)

ここらへんは自動で判別してくれるようで、問題なければYで

The following configuration will be applied:

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

? Initialize the project with the above configuration? (Y/n)

プロファイルを使うかアクセスキー入力するか。 amplify configureでプロファイルを設定しているので、AWS profileを選択

Using default provider  awscloudformation
? Select the authentication method you want to use: (Use arrow keys)
❯ AWS profile
  AWS access keys

credentials内にあるプロファイルを選択できるので、設定したプロファイルを指定

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 (Use arrow keys)

AWS上にデプロイが完了したようです。 AWSコンソールからAmplifyを開くとプロジェクトが一覧にいるはず。 ReactのプロジェクトにはAmplifyフォルダとsrc下にaws-exports.jsが作成されています

✔ Successfully created initial AWS cloud resources for deployments.
✔ Initialized provider successfully.
Initialized your environment successfully.

Amplify APIを追加

Authやらなにやらを追加できるようですが、ここではAPIを追加します。

$ amplify add api

GraphQLとRESTを選べます。
今回はGraphQLを選択します。

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

作成されたamplifyフォルダ内に作成されるフォルダの名前になります。
デフォルトで問題なければEnterで。

? Provide API name: (testamplify)

認証方法を聞かれます。 今回はAPI Keyで進めます。

? Choose the default authorization type for the API (Use arrow keys)
❯ API key
  Amazon Cognito User Pool
  IAM
  OpenID Connect

API Key説明が必要であれば入力してください。 空でも問題ないです。

? Enter a description for the API key:

API Keyの有効期限ですが、最大が365なんです。。。
他の認証方法であれば有効期限ないはず。。。

? After how many days from now the API key should expire (1-365): (7)

GraphQLの詳細設定ができるらしいが、ここはそのままNo!で。

? Do you want to configure advanced settings for the GraphQL API (Use arrow keys)
❯ No, I am done.
  Yes, I want to make some additional changes.

参考までにYesにしたときに出てくる設定たち

? Configure additional auth types? 
? Enable conflict detection? 

注釈付き？特にないからそのままEnter

? Do you have an annotated GraphQL schema? (y/N)

スキーマのテンプレートは修正することになるだろうからどちらでも。

? 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”)

Reactのプロジェクト内に作られていたamplify/backendフォルダ配下にさらにフォルダが作成されています。
api/[API名]のフォルダ内にschema.graphqlが作成されています。 それがスキーマファイルです。（build内にも同名のファイルがありますが、触る必要はないです）

ここまででGraphQLをプロジェクトに追加できました。 が、まだ使えません！
まだAWS上に追加されていないからです。
なので、追加しましょう。
スキーマ内はデフォルトのTodoのままで行います。

$ amplify push

これでいいかの確認なので、問題なければEnter

✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name | Operation | Provider plugin   |
| -------- | ------------- | --------- | ----------------- |
| Api      | testamplify   | Create    | awscloudformation |
? Are you sure you want to continue? (Y/n) 

GraphQLのコード生成してくれるようなのでEnter

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

使用している言語に合わせて選択してください。

? Choose the code generation language target (Use arrow keys)
❯ javascript 
  typescript 
  flow 

生成するコードの格納場所。問題なければEnter

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

Enterで。

? 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) 

問題なければAppSyncとDynamoDBにリソースが作成されているはずです！ また、src配下にgraphqlフォルダが作成されています！
今回はAmplifyを使用してAppSyncとDynamoDBにリソースを作成するところまでにしておきます。