React + Amplify + AppSync + DynamoDB でサーバレスなWebアプリを作成する公式チュートリアルをやってみた | DevelopersIOのようにイチから構築しても良いですが、ViteやNext.jsのテンプレートがAmplifyから提供されているのでそれを使うのが最も手っとり早い方法です。
- AWS ConsoleからAmplifyの新規作成
- レポジトリのテンプレートから作成
- レポジトリ名を指定し作成
これでGitHub レポジトリが作成されます。Amplifyのコンソールに戻り、そのまま「次へ」で作成します。
5分ほど待つと、「デプロイ済み」にステータスが変わるので、発行されたドメインからWebサイトにアクセスし、TODOアプリが動くことを確認します。
サイトにアクセスしてこの画面が出ればOKです。TODOを追加したらページリロードしても再表示されることを確認します。
Amplifyでは裏側でDynamoDBが利用されています。AWSコンソールからテーブルが作成されていることを確認し、スキャンして追加したTODOのデータが入っていることを確認します。
ここまでできたらデプロイは一旦完了できています。 次に開発フローの環境を作ります。
- AWS CLIのセットアップ。awsコマンドが通ればOK。
❯ aws --version
aws-cli/2.28.18 Python/3.13.7 Darwin/24.6.0 exe/x86_64
- AWS Profileを指定する
aws configureコマンドなどで、アクセスキーやregionを指定し、Amplifyプロジェクトで常に利用できるようにしておく。 個人的にはdotenvを使ってプロジェクト単位で指定するのが好みだが、defaultの場合はそのままで良い。
export AWS_PROFILE="YOUR_PROFILE"
いずれにしても以下のコマンドで所定のプロファイルが指定されていればOK。
❯ export -p | grep AWS
export AWS_PROFILE=YOUR_PROFILE
- サンドボックス環境で開発する
レポジトリ作成しただけではAmplify設定ファイルのamplify_outputs.jsonが存在しないので
npx ampx sandbox
でsandbox環境を作りながら開発する。
Amplifyのデプロイに関しては以下の2つがあるが、開発はsandbox環境を使うのが良い。
- npx ampx sandbox: 変更差分の適用が軽量で速い
- npx ampx deploy: フルな安定プロビジョン
実際、GitHubのpushAmplifyデプロイされるので npx ampx deployを使う機会はあまりない。裏側でnpx ampx pipeline-deployが利用されている。
サンドボックス環境ができたら変更差分を検知して自動更新されるのでターミナルはそのまま開いて多く。
- Webアプリケーションを起動する
npm run dev
でViteを起動する。TODOができればOK。
以降はサンドボックス環境でAPIなりDBのスキーマなり、Webアプリなりに変更を加えて開発を進めてGitにコミットする。 動作確認ができたら、Gitプッシュされた時点のコードがAmplify連携されて自動デプロイされる。このサイクルをひたすら回していく。
バックエンド等の追加方法などは以下を参照。 手を動かして0から理解するAmplify Gen2 #AWS - Qiita