🐕

Amplify Gen2を用いて簡単なWebアプリを実装してみる！

2024/10/23に公開

 AmplifyAmplify とは、モバイルアプリケーション・ウェブアプリケーション・静的ウェブアプリケーションを構築するための、AWS のフルスタックアプリケーション開発フレームワークです。

バックエンドのリソースをプロビジョニングし、フロントエンドのコードを生成し、デプロイするためのツールを提供します。
Amplify を用いない場合、CloudFormation や Terraform を用いて AWS のリソースを構築し、その上にアプリケーションを構築します。 　

Amplify は内部的にこれらのリソースを管理するため、開発者はリソースの管理に集中することなく、アプリケーションの開発に集中できます。
一般的なアプリケーションは以下の要素から構成されます。
ユーザー認証
ファイルストレージ
データベース
API
ウェブホスティング
デプロイ
Amplify では、内部的に AWS のリソースを生成することで、これらの要素を簡単に構築できます。

具体的には、それぞれ以下のようなリソースを生成します。


機能
AWS リソース


ユーザー認証
Cognito

ファイルストレージ
S3

データベース
DynamoDB

API
API Gateway + Lambda or AppSync

ウェブホスティング
S3 or CloudFront

デプロイ
CodePipeline

Cognito では、ユーザー認証の他にも、ユーザーの属性を管理できます。

メールアドレスの確認や、パスワードリセットなども簡単に実装できます。
S3 では、ファイルのアップロードやダウンロード、ファイルの公開などが簡単に実装できます。

自分のみがアクセスできるファイルや、一般公開されたファイルなど、様々な設定が可能です。
DynamoDB では、NoSQL データベースを簡単に構築できます。

スケーラビリティや可用性を考慮する必要がなく、簡単にデータベースを構築できます。

自分のみがアクセスできるデータや、一般公開されたデータなど、様々な設定が可能です。
API Gateway + Lambda では、RESTful API を簡単に構築できます。

また、AppSync を用いることで、GraphQL API が実現できます。
S3 や CloudFront を用いることで、ウェブホスティングを簡単に実装できます。
CodePipeline を用いることで、デプロイを自動化できます。

GitHub の特定のブランチへのプッシュをトリガーとして、自動的にデプロイが行われるように設定できます。
デプロイ可能なフレームワークには、以下のものがあります。
React
Next.js
Angular
Vue
etc...
ここでは、Next.js を用いたアプリケーションの構築方法を紹介します。

 Amplify Gen2Amplify Gen2 は、Amplify の新しいバージョンです。

以下の特徴があります。


特徴
Amplify Gen1
Amplify Gen2


環境の管理

amplify env addで環境を追加。
amplify env checkoutで環境を切り替え。
環境に関する情報は Git管理対象のamplify/team-provider-info.json に保存。
サンドボックスの概念が導入。
npx ampx sandboxでサンドボックスを起動。
環境に関する情報は Git管理対象外のamplify_outputs.json に保存。
本番環境とサンドボックス環境の分離が明確化。

デプロイ方法

amplify pushでデプロイ。
amplify publishでウェブホスティングのデプロイ。
Gitベース(git push)でのデプロイ。

GraphQLスキーマやAPI設定

amplify/backend/api/<Amplifyのプロジェクト名>/schema.graphqlファイルに記述。

amplify/data/resource.tsファイルにデータベースのスキーマやAPIの設定を定義。

サンドボックス概念が導入されたことで、本番環境とサンドボックス環境の分離が明確化されました。

各開発者が独自の環境を持ち、開発することが可能になりました。

これにより、開発者同士の干渉を防ぎ、かつ環境依存のない開発効率を向上させることができます。

当然、本番環境とサンドボックス環境のデータは分離されているため、本番環境に影響を与えることはありません。

 デプロイしてみる以下のパッケージがインストールされていることを確認してください。


パッケージ
バージョン


Node.js
v14.x or later

npm
v6.14.4 or later

Git
v2.14.1 or later

公式チュートリアル通りに進めていきます。
以下のリンクへアクセスし、テンプレートリポジトリからリポジトリを作成します。

https://github.com/new?template_name=amplify-next-template&template_owner=aws-samples&name=amplify-next-template&description=My Amplify Gen 2 starter application
リポジトリの作成が完了したら、AWS コンソールから Amplify アプリを作成します。

以下のリンクへアクセスし、Amplify アプリを作成してください。 　

https://console.aws.amazon.com/amplify/create/repo-branch
ソースとして GitHub を選択してください。 　

次に対象のリポジトリを選択します。 　

その他の各種設定はデフォルトのままで問題ありません。 　

最後にSave and Deployをクリックしてデプロイを開始します。
これで完了です。

View Deployed URLをクリックすると、デプロイされた Web ページへアクセスできます。
簡単な TODO アプリが確認できます。 　

動作確認のために、新しい TODO を追加してみましょう。

 バックエンドサービスの確認Amplify コンソールからバックエンドサービスを確認してみましょう。

AWS コンソールの Amplify ページから対象の Amplify アプリを選択し、デプロイ対象のブランチ(main)を選択します。 　

左にメニューバーが表示され、以下のような項目が確認できます。
Authentication
Data
Storage
Functions
UI Library
Data タブから Data Manager を選択し、DynamoDB のテーブルを確認してみましょう。

先ほど追加した TODO が確認できます。

 プロジェクト構成Amplify Gen2 (Next.js | App Router) では、以下のようなプロジェクト構成になっています。
├── amplify/ # Folder containing your Amplify backend configuration
│   ├── auth/ # Definition for your auth backend
│   │   └── resource.tsx
│   ├── data/ # Definition for your data backend
│   │   └── resource.ts
|   ├── backend.ts
│   └── tsconfig.json
├── app/ # React UI code
│   └── ...
├── package.json
└── tsconfig.json


パス
説明


amplify/
Amplify のバックエンド構成ファイルが格納されているディレクトリ。

amplify/auth/
認証バックエンド(Cognito)の定義が格納されているディレクトリ。

amplify/auth/resource.tsx
認証バックエンド(Cognito)の定義が格納されているファイル。

amplify/data/
データバックエンド(DynamoDB)の定義が格納されているディレクトリ。

amplify/data/resource.ts
データバックエンド(DynamoDB)の定義が格納されているファイル。

amplify/backend.ts
Amplify のバックエンド構成ファイル。

amplify/tsconfig.json
Amplify の TypeScript 設定ファイル。

app/
React UI コードが格納されているディレクトリ。

package.json
プロジェクトの依存関係が記述されているファイル。

tsconfig.json
TypeScript 設定ファイル。


 ローカルで開発するAmplify アプリをローカルで開発できるように、環境のセットアップを行いましょう。
まずは、リポジトリをクローンします。
git clone <リポジトリURL>
cd <クローンしたディレクトリ>
以下のコマンドでパッケージをインストールします。
npm install
次に、バックエンドのリソース情報ファイルを作成します。
AWS コンソールの Amplify ページから対象の Amplify アプリを選択し、デプロイ対象のブランチ(main)を選択します。 　

Deployed backend resourcesのタブを選択し、Download amplify_outputs.jsonをクリックしてファイルをダウンロードします。

このファイルがバックエンドのリソース情報ファイルです。

このファイルをプロジェクトルートにamplify_outputs.jsonという名前で配置します。
以下のコマンドでローカルサーバを起動します。
npm run dev
http://localhost:3000へアクセスすると、ローカルでアプリケーションが起動していることが確認できます。

また、先ほど追加した TODO が表示されていることが確認できます。

 サンドボックス環境の作成先ほど構築したローカル環境では、本番環境と同じリソースを使用しています。

したがって、本番環境で登録した TODO がローカル環境にも表示されています。

当然、ローカルで行うアクションは本番環境にも反映されます。
このような問題を解決するために、サンドボックス環境を作成します。

この環境の中で開発することで、本番環境との分離を実現します。
以下のコマンドでサンドボックス環境を作成します。
npx ampx sandbox
このコマンドにより、サンドボックス環境が起動します。

また、当該環境の情報がamplify_outputs.jsonに保存されます。
ローカル環境を再起動し、サンドボックス環境を使用するように設定します。
npm run dev
http://localhost:3000へアクセスすると、サンドボックス環境でアプリケーションが起動していることが確認できます。

サンドボックス環境で動作しているため、本番環境で登録した TODO は表示されません。

また、ローカルで作成した TODO が本番環境に反映されていないことを確認してください。

 参考文献Amplify | Next.js App Router
AWS Amplify を開始する
Gen 2 for Gen 1 customers

機能	AWS リソース
ユーザー認証	Cognito
ファイルストレージ	S3
データベース	DynamoDB
API	API Gateway + Lambda or AppSync
ウェブホスティング	S3 or CloudFront
デプロイ	CodePipeline

特徴	Amplify Gen1	Amplify Gen2
環境の管理	`amplify env add`で環境を追加。 `amplify env checkout`で環境を切り替え。環境に関する情報は Git管理対象の`amplify/team-provider-info.json` に保存。	サンドボックスの概念が導入。 `npx ampx sandbox`でサンドボックスを起動。環境に関する情報は Git管理対象外の`amplify_outputs.json` に保存。本番環境とサンドボックス環境の分離が明確化。
デプロイ方法	`amplify push`でデプロイ。 `amplify publish`でウェブホスティングのデプロイ。	Gitベース(`git push`)でのデプロイ。
GraphQLスキーマやAPI設定	`amplify/backend/api/<Amplifyのプロジェクト名>/schema.graphql`ファイルに記述。	`amplify/data/resource.ts`ファイルにデータベースのスキーマやAPIの設定を定義。

パス	説明
amplify/	Amplify のバックエンド構成ファイルが格納されているディレクトリ。
amplify/auth/	認証バックエンド(Cognito)の定義が格納されているディレクトリ。
amplify/auth/resource.tsx	認証バックエンド(Cognito)の定義が格納されているファイル。
amplify/data/	データバックエンド(DynamoDB)の定義が格納されているディレクトリ。
amplify/data/resource.ts	データバックエンド(DynamoDB)の定義が格納されているファイル。
amplify/backend.ts	Amplify のバックエンド構成ファイル。
amplify/tsconfig.json	Amplify の TypeScript 設定ファイル。
app/	React UI コードが格納されているディレクトリ。
package.json	プロジェクトの依存関係が記述されているファイル。
tsconfig.json	TypeScript 設定ファイル。

Amplify

Amplify Gen2

デプロイしてみる

バックエンドサービスの確認

プロジェクト構成

ローカルで開発する

サンドボックス環境の作成

参考文献

Discussion