👨‍👧‍👦

AWS Amplify（Gen1）についてわかりやすくまとめてみた

2024/04/25に公開

AWS

はじめに

今回は、Amplify CLI による開発（Amplify Gen1）について記事にしています。

また、下記のAmplify CDK による開発（Amplify Gen2）は、こちらを確認してください。

AWS Amplifyとは

AWS Amplifyは、AWSのサービスを活用してフロントエンド開発者がバックエンドの複雑さを気にせずに、クラウドを活用してアプリを作れるようサポートするフレームワークです。
https://aws.amazon.com/jp/amplify/

公式ドキュメント
https://docs.amplify.aws/gen1/

公式チュートリアル
https://aws.amazon.com/jp/getting-started/guides/deploy-webapp-amplify/module-one/

Amplify CLIとは

Amplify CLIとは、AWS Amplifyフレームワークの一部であり、サーバーレスなバックエンドを構築・管理するためのCLIツールです。

Amplify CLIのインストール

ターミナルでAWS Amplify CLIをグローバルにインストールしてください。
これにより、Amplifyのコマンド (amplify) をどのディレクトリでも実行できるようになります。

グローバルにインストールされたパッケージは、通常、ユーザーのホームディレクトリにある .npmディレクトリ内に格納されます。

npm install -g @aws-amplify/cli

amplify -v

AWSアカウントとの連携を設定する

AWSアカウントとの連携を設定するために以下のコマンドを実行してください。

なお、一度設定を完了して、同じアカウントと地域で作業を続ける場合、再度実行する必要はありません。

設定はローカルに保存され、同じアカウント設定で複数のプロジェクトを続けることができます。AWSアカウントや設定に変更があった場合には、適宜このコマンドを実行して設定を更新してください。

amplify configure

自動でブラウザでAWSログイン画面が表示されます。ログイン後、コンソールに戻りEnterキーを押すと、AWS Amplify CLIが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では、AWS CLIや他のプログラムによるAWSアカウントへのアクセスを有効にするために、IAMユーザーのアクセスキーとシークレットキーが必要になるため、ブラウザのIAMユーザー作成画面が表示されます。

IAMユーザーの作成は、以下の記事を参考に作成してください。

AWS Amplifyで使用するためのユーザー作成を行わず、Enterを押した際には既に作成しているIAMユーザーのアクセスキーとシークレットキーを入力するよう求められます。

今回Profile Nameは、Enterを押して、デフォルトのプロファイル名であるdefaultを使用します。

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) # Enter

下記はAmplify CLIが新しいIAMユーザーを正常に設定したことを示しています。

Successfully set up the new user.

このIAMユーザーは、AWS Amplify CLIがAWSリソースにアクセスするための認証情報を持っています。また、認証情報はローカルのマシンに保存され、以降のAWSリソースへのアクセス時に使用されます。

既存のプロジェクトにAmplifyを適用して初期設定を行う

作成済みのアプリケーションのディレクトリで次のコマンドを実行して初期化してください。

作成済みアプリケーションのディレクトリで実行することで、Amplifyプロジェクトが既存のプロジェクトに統合されます。

amplify init

Amplifyを初期化すると、アプリに関するいくつかの情報の入力を求められます。

プロジェクト名は3文字から20文字の範囲内で、英数字のみで指定してください。今回はnextamplifiedとしました。

? Enter a name for the project nextamplified

プロジェクト名の入力が終わると内容が表示されるので、確認して正しければYを入力してください。

The following configuration will be applied:

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

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

認証方法を選択してください。AWS profileを選択した場合はプロファイルから選択、AWS access keysを選択した場合はアクセスキーなどを入力してください。

プロファイルは、cat ~/.aws/credentialsで確認することができます。

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

Amplify CLIが失敗したときに、非機密のプロジェクト構成を共有してAmplify CLIの改善に役立てるかどうかを尋ねているメッセージです。今回はNと入力します。

? Help improve Amplify CLI by sharing non-sensitive project configurations on failures (y/N) ›

自分のプロジェクト構成を共有することに不安を感じる場合やプライバシーに関する懸念がある場合は、このオプションを選択しないでください。

設定が終わると、プロジェクトルートにamplifyディレクトリ、srcディレクトリが追加されています。

next-amplified/
├── amplify/
└── src/

作成したAmplifyプロジェクトがコンソールから確認できるようになります。
（この時はまだ成功という表示はありません。）

amplifyconfiguration.json

Amplifyプロジェクトで使用されるAWSリソースの構成情報がJSON形式で格納されています。

aws-exports.js

Amplifyプロジェクトで使用されるAWSリソースの設定を含むJavaScriptのファイルです。

このファイルは、AWS Amplify JavaScriptライブラリを使用してAWSリソースにアクセスする際に、設定情報を提供しています。

認証機能の追加

amplify add auth

Amplify CLIが提供する認証とセキュリティの設定に関する選択肢を表示しています。今回は、Default configuration(デフォルトの構成)を選択します。

 Do you want to use the default authentication and security configuratio
n? (Use arrow keys)
❯ Default configuration 
  Default configuration with Social Provider (Federation) 
  Manual configuration 
  I want to learn more.

Default configuration(デフォルトの構成)

Amplifyが提供するデフォルトの認証とセキュリティ設定を使用します。これには、Amazon Cognitoを使用したユーザー認証とアクセス制御が含まれます。

ソーシャルログイン（Facebook、Google、Amazonなど）を含む、デフォルトの認証とセキュリティ設定を使用します。

Manual configuration (手動構成)

ユーザーが手動で認証とセキュリティ設定を構成します。このオプションを選択すると、より細かい設定が可能になりますが、手動で構成する必要があります。

I want to learn more(詳細を学ぶ)を選択すると、各設定オプションについての詳細情報を確認することができます。

ユーザーがサインインする際に使用する識別子の種類を選択してください。今回は、Emailを選択します。

 How do you want users to be able to sign in? (Use arrow keys)
❯ Username 
  Email 
  Phone Number 
  Email or Phone Number 
  I want to learn more.

追加の設定を行うかどうか尋ねられています。今回は、No, I am done.を選択します。

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

デプロイして、ローカルで行った変更をAWS Amplifyの管理下にあるバックエンドリソースに反映してください。

amplify push

反映されると、認証から確認できます。

バックエンドの構築 - API

アプリケーションを作成して構成し、新しいAmplify プロジェクトを初期化したので機能を追加できます。

APIを追加します。

amplify add api

GraphQLとRESTの2つのオプションが提供されているので、使用する方を選択してください。

GraphQLを選択すると、AmplifyはAWS AppSyncを使用してGraphQL APIをセットアップします。一方、RESTを選択すると、API GatewayとLambdaを使用してRESTful APIをセットアップします。

今回はGraphQLを選択します。

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

GraphQL APIの設定を表示しています。変更しない場合はContinueを選択してください。

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

Name

GraphQL API の名前です。デフォルトではnextamplifyという名前が提案されています。

Authorization modes

認証モードを指定します。デフォルトではAPI keyが選択されており、APIキーを使用した認証が設定されており、7日間の有効期限が設定されています。

選択すると、下記の中から選択ができます。

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

Conflict detection

DataStoreを使用する場合に必要な、競合検出の設定です。デフォルトでは無効になっています。

GraphQL APIのスキーマ^[1]テンプレートを選択してください。今回はデフォルトで選択されているSingle object with fieldsテンプレートを使用します。

? 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

Single object with fields（デフォルト）

単一のオブジェクトとそのフィールドを持つスキーマが生成されます。簡単なデータモデルを持つアプリケーションの開発に適しています。

One-to-many relationship

1対多の関係を持つデータモデルが生成されます。より複雑なデータモデルを持つアプリケーションの開発に適しています。

Blank Schema

空のスキーマが生成されます。独自のカスタムスキーマを使用する場合に適しています。

生成したGraphQL APIのスキーマを直接編集するかどうかを確認しています。今回はYを選択します。

? Do you want to edit the schema now? (Y/n) ›

選択後、自動で下記のファイルがエディターに表示されたと思います。

amplify/backend/api/nextamplify/schema.graphql

# 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 Amplifyの管理下にあるバックエンドリソースに反映してください。

amplify push

DBへのアクセス

Amplifyを使用するとGraphQL APIを通じてGraphQLスキーマを定義し、このスキーマを用いてデータベースにアクセスすることができます。

これにより、サーバーレスアプリケーションやフロントエンドアプリケーションからGraphQLを介してデータを操作することが可能になります。

クライアントコードの設定

クライアントコードとは、APIとの通信やデータ操作を行うためのコードです。デフォルトだとJavaScriptで記述されているので、TypeScriptに変更します。

amplify configure codege

いくつかの情報の入力を求められます。

言語は、typescriptを選択してください。

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

名前パターンを指定を尋ねられています。今回はデフォルトで設定されているsrc/graphql/**/*.tsで良いので、このままEnterを押します。

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

GraphQL オペレーション（クエリ、ミューテーション、サブスクリプション）を生成または更新するかどうかを尋ねられています。今回はYを選択します。

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

GraphQL スキーマの最大ステートメントの深さを設定できます。今回はデフォルトで設定されている深さ2で良いので、このままEnterを押します。

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

クライアントコードのファイル名が指定できます。今回はデフォルトで設定されているsrc/API.tsで良いので、このままEnterを押します。

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

新しく作成された GraphQL API のためにクライアントコードを生成するかどうかを尋ねられています。今回はYを選択します。

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

APIのセキュリティ設定を強化（GraphQL）

amplify add authコマンドを使用してデフォルトの認証とセキュリティ設定を追加し、追加の設定を行わずに進んだ場合、APIの認可ルールがallow: publicとなり認証なしで誰でもAPIにアクセスできる状態になっています。

以下のschema.graphqlファイルはGraphQLサーバーがクエリを受け付け、データを操作する方法を定義しているファイルです。

amplify/backend/api/next-amplifiedプロジェクト名）/schema.graphql

# 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
}

schema.graphqlファイルに@authディレクティブを追記します。これにより、GraphQLスキーマに認証ルールが追加され、APIのアクセス制御が強化することができます。

amplify/backend/api/next-amplified（プロジェクト名）/schema.graphql

# 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 @auth(rules: [{ allow: owner }]) {
  id: ID!
  name: String!
  description: String
}

@authディレクティブを使用してスキーマに認証ルールを追加すると、次のコマンドを実行した際に生成されるGraphQL操作のコードにも適切な認証機能が組み込まれるので、Amplifyプロジェクト内のGraphQL APIのセキュリティが強化され、不正なアクセスやデータの不正操作を防ぐことができます。

amplify codegen

生成されたGraphQL操作のコードはsrc/graphqlディレクトリに保存され、APIクライアントコードはsrc/API.tsファイルに保存されたことを表示しています。

✔ Generated GraphQL operations successfully and saved at src/graphql
✔ Code generated successfully and saved in file src/API.ts

API設定変更

Amplifyプロジェクト内のAPIに関する設定を変更するためのコマンドです。これにより、APIの認可方式、スキーマ定義、その他の設定を変更することができます。

今回はAPIの認可方式をAPI keyからCognito User Poolに変更します。

amplify update api

更新するAPIの種類を選択してください。今回はGraphQLを選択します。

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

編集したい設定を選択してください。今回はAuthorization modesを選択します。

? Select a setting to edit (Use arrow keys)
❯ Authorization modes 
  Enable conflict detection (required for DataStore)

Authorization modes（認可モード）

APIに対するアクセスを許可するための認可を構成します。Amplifyでは、APIへのアクセスを管理するためにさまざまな認可（APIキー、Cognitoユーザープール、IAMロール、OpenID Connect、Lambda）を設定することができます。

Enable conflict detection（競合検出の有効化）

Amplify DataStoreを使用する場合、アプリケーションはオフラインでもデータを操作できます。しかし、オフラインでデータを変更した場合、その変更がサーバー側のデータと競合する可能性があります。

競合検出を有効にすると、最新の変更を優先するか、競合を解決するためのカスタムロジックを実行するかなど設定することができます。これにより、データ同期の際にデータの整合性が保たれ、アプリケーションの信頼性が向上します。

APIのデフォルトの認可タイプを選択してください。今回は Amazon Cognito User Poolを選択します。

? Choose the default authorization type for the API 
  API key 
❯ Amazon Cognito User Pool 
  IAM 
  OpenID Connect 
  Lambda

追加の認証タイプを設定するか選択してください。追加する場合はCognito User PoolとAPI keyの両方を使用して認証を設定することなどができます。今回はNを入力します。

? Configure additional auth types? (y/N)

デプロイして変更を反映させてください。

amplify push

デプロイ

デプロイすることで、Amplifyプロジェクトのローカルで行った変更をAWS上の実際のリソースに反映させることができます。

amplify push

内容を確認して問題ない場合はYを選択してください。

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

更新されたGraphQL APIに対応してコードを更新するかどうかを尋ねられています。更新する場合はYを選択してください。

? Do you want to update code for your updated GraphQL API (Y/n)

現在のGraphQLクエリ、ミューテーション、サブスクリプションを上書きするかどうかを尋ねられています。上書きする場合はYを選択してください。

? Do you want to generate GraphQL statements (queries, mutations and sub
scription) based on your schema types?
This will overwrite your current graphql queries, mutations and subscrip
tions (Y/n)

Amplify CLI で現在使用されているユーザーを確認する

AWS CLI を使用して、現在の AWS アカウントの ID、ユーザー ID、および認証情報の種類が表示されます。これにより、Amplify CLI で使用されている AWS アカウントやユーザーを確認できます。

aws sts get-caller-identity

認証情報の更新

AWS Amplify CLIで新しいIAMユーザーの認証情報を設定した後、以前の認証情報は自動的に無効になります。

新しいIAMユーザーのアクセスキーとシークレットキーを設定してください。

amplify configure

AWSプロファイル（defaultなど）

AWS 認証情報ファイルである.aws/credentialsファイルからdefaultのAWSプロファイルの内容を確認することができます。

cat ~/.aws/credentials

下記のように記述されているはずです。

[default]
aws_access_key_id = YOUR_ACCESS_KEY_ID
aws_secret_access_key = YOUR_SECRET_ACCESS_KEY

下記のように記述することでプロファイル追加することができます。

[user2]
aws_access_key_id = ANOTHER_ACCESS_KEY_ID
aws_secret_access_key = ANOTHER_SECRET_ACCESS_KEY
region = us-west-2

Amplify Hostingにデプロイ

プロジェクトのルートディレクトリで次のコマンドを実行してください。

amplify add hosting

Amplifyでホスティングする方法を選択してください。今回はHosting with Amplify Consoleを選択します。

? Select the plugin module to execute …  (Use arrow keys or type to filter)
❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
  Amazon CloudFront and S3

Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)

Amplify Consoleを使用してホスティングする方法です。カスタムドメインと連続デプロイメントをサポートするAmplifyの管理されたホスティングサービスで、Amplifyアプリケーション全体を管理できるため、より簡単にデプロイや管理ができます。

Amazon CloudFront and S3

CloudFrontとS3を使用してホスティングする方法です。この選択肢は、CloudFrontを使ってコンテンツをキャッシュすることで高速化し、S3を使って静的ファイルをホスティングします。

デプロイメント方法を選択してください。

? Choose a type (Use arrow keys)
  Continuous deployment (Git-based deployments) 
❯ Manual deployment 
  Learn more

Continuous deployment (Git-based deployments)

既にリポジトリを作成している必要があります。

継続的デプロイメント（Gitベースのデプロイメント）です。これは、特定のGitブランチに変更がプッシュされるたびに、自動的にアプリケーションがデプロイされる仕組みです。

Learn moreを選択すると、デプロイメント方法に関する説明が表示されるだけで、その後は再びデプロイメント方法を選択に戻ります。

Manual deployment

手動デプロイメントです。これは、手動でコードをアップロードしてデプロイを実行する方法です。

ウェブアプリケーションをデプロイしてください。

amplify publish

Manual deploymentを選んだ場合

Continuous deployment (Git-based deployments) を選んだ場合

ブラウザで新しいウィンドウが起動し、Amplify コンソールが開いて、プロジェクトのホスティングを設定できます。

今回はGitHubにチェックを入れ、ブランチを接続を選択します。

GitHub にリダイレクトされます。ここで、AmplifyコンソールにGitHubアカウントへのアクセスを許可する必要があるため、aws-amplify-consoleを選択してください。

リポジトリとブランチを選択したら、次へを選択してください。

Environmentを選択して、新しいロールを作成を押してください。

サービスまたはユースケースはAmplifyを選択して、次へを選択してください。

内容を確認して、次へを選択してください。

内容を確認して、ロールを作成を選択してください。

内容を確認して、次へを選択してください。

内容を確認して、保存してデプロイを選択してください。

プロビジョン→構築→デプロイと進んでいき全てが緑になったらホスティング完了です。

ドメインにあるURL（https://<ブランチ名>.<ホスト名>.amplifyapp.com/）を押下して、ホスティングされたWebサイトを確認してください。

ターミナルに戻り、Enterを押すと

? Continuous deployment is configured in the Amplify C
onsole. Please hit enter once you connect your reposit
ory

下記が表示されるのでこちらでも、URLを確認することができます。

Amplify hosting urls: 
┌──────────────┬────────────────────────────────────────────┐
│ FrontEnd Env │ Domain                                     │
├──────────────┼────────────────────────────────────────────┤
│ main         │ https://<ブランチ名>.<ホスト名>.amplifyapp.com/ │
└──────────────┴────────────────────────────────────────────┘

サンドボックス環境

サンドボックスという機能がないので、サンドボックスの管理を選択しても、

何も表示されないと思います。

下記を参考にしてみてください。

Amplify Gen2からCLIでサンドボックス環境が作成でき、非常に便利です。

Amplifyプロジェクトの削除

Amplifyプロジェクトを削除することができます。関連するすべてのAWSリソースも削除されます。

amplify delete

Amplifyプロジェクトを指定して削除するコマンドは以下です。

aws amplify delete-app --app-id <アプリID>

Amplifyプロジェクトをブラウザコンソールで開く

amplify console

Amplify CLIのアップデート

下記、実行後

amplify configure

下記が表示された場合は、Amplify CLI のアップデートが利用可能であることを示しています。最新の機能や修正を使用するには、amplify upgradeコマンドを実行してアップデートしてください。

EACCES: permission denied

amplify upgradeコマンドを実行した際に下記のエラーが出ました。

Amplify CLI のバイナリファイルを書き込むための適切なパーミッションが与えられていないため、エラーが発生しています。

メッセージで提案されているように、次のコマンドを実行して、.amplifyディレクトリの所有者をユーザーに変更してください。

sudo chown -R $(whoami):$(id -gn) ~/.amplify

上記でエラーになる場合は下記を実行してみてください。

chown -R $(whoami):$(id -gn) ~/.amplify

先ほどのコマンドとの違いは、コマンドを実行する際の権限です。sudo chown -R $(whoami):$(id -gn) ~/.amplifyを実行すると、ユーザーがシステム全体のファイルやディレクトリにアクセスし、所有者を変更できます。一方で、chown -R $(whoami):$(id -gn) ~/.amplifyを実行すると、ユーザーは自分自身のファイルやディレクトリのみにアクセスし、所有者を変更できます。

コマンドの実行後にamplify upgradeを再度試してください。

Error: No current user

ブラウザで下記のような表示

ターミナルで次のような表示が出てローカル環境から確認できない場合
⨯ NoSignedUser: No current user

現在のユーザーが認証されていない場合に発生します。AmplifyのAuthモジュールを使用して認証を設定している場合、ユーザーがログインしていないか、認証情報が失効している可能性があります。

料金

終わりに

何かありましたらお気軽にコメント等いただけると助かります。
ここまでお読みいただきありがとうございます🎉

脚注

スキーマとは https://wa3.i-3-i.info/word13663.html ↩︎