【初心者向け】AWS Amplify Gen2 入門・実践編②——環境構築とプロジェクトファイルの理解

こんにちは。
アプリケーションサービス本部ディベロップメントサービス2課の濱田です。

梅雨なのに、猛暑ですね。
暑い日には蚊取り線香を焚くのが好きです🌀
実際に効果があるかはともかく、香りが好きで焚いているという側面が大きいです。

はじめに

前回の記事「【初心者向け】AWS Amplify Gen2 入門・実践編①——Webアプリ制作をはじめよう」の続きです。

以下のような方を対象とした連続記事です。

アプリケーション開発の知識がない方
AWS Amplify Gen2 に入門したい方
勉強するよりも、作りながら学びたい方（私のような方）
以下の操作が可能なレベル感の方
- git の操作
- AWS ドキュメントを読んで、開発環境の準備ができる

前回は画面のビジュアルを作るところまで行きました。
それを生成AIに読み込ませてフロントエンドを表現するコードを出力させたいのですが、この際、どのように出力形式を指定したら良いでしょうか？

これを知るためには、少し座学を進める必要があるようです。
今回の記事では、Amplify Gen2 サンプルのリポジトリを手元にコピーして開発環境を整え、サンプルプロジェクトのWebアプリを動かしてみます。

このことを通じて、出力先であるAmplify Gen2 のプロジェクトファイルについて概要を掴んでいきます。

今回の出力形式であるAmplify Gen2 での出力形式を学ぶ

今回私たちが使うAmplify Gen2では、どのような形式でフロントエンドを表現するのか？
これを学びにいく必要があります。

現物を触りに行ってみましょう。
以下はAmplifyのAWSコンソール画面です。

わかりづらいのですが、「アプリケーションをデプロイ」の横に4つのロゴが示されていますね。

これらはフロントエンドを作成するときに用いられる「フレームワーク」や「ライブラリ」です。
Amplify Gen 2 ではこれらのフレームワーク等の使用がサポートされています。

「フレームワーク」や「ライブラリ」と言われてもよくわかりませんね。
とりあえず、これらのツールがあることによって、Web開発が大幅に楽に・シンプルになるというところがポイントです。

どの流派を使うかによって、最終的に必要になる出力が少しずつ異なります。
その点のみを押さえておきましょう。

とりあえずテンプレートから開始しよう

技術選定の吟味は今回の主眼ではありません。
Amplify Gen2 のアプリケーションにはサンプルプロジェクトファイルがあるので、ファーストステップとしてはこれをありがたく利用することにしましょう。

今回は、Amplify Gen2 のクイックスタートにも採用されている「amplify-vite-react-template」を利用します。

github.com

このテンプレートでは、Reactという流派でフロントエンドを作成しつつ、ViteというツールでWebページ作りの行程を簡略化しつつ、開発を進めます。（よくわからなくても無問題です）
他の流派のことも気になりますが、のちに必要になったときに学ぶことにします。

こちらのテンプレートを使用して、個人用のGithubリポジトリを別途作成します。

必要情報を入力していきます。

適当な名前を入力します。
何かしらの情報漏洩リスクを減らすため、プライベートにしておきます。
リポジトリを作成します。

作成したリポジトリを開発環境にgit cloneして、開発環境でフォルダを見てみましょう。
（この手順は省略しますので、適宜調査をお願いします）

テンプレートのプロジェクトファイルを眺めてみよう

眺めます。
色々あることがわかります。
初心者目線では、色々とあることしかわかりません。

このままではぼーっとして寝てしまいそうなので、分類します。

この記事でフォーカスしたいのは、「パッケージ管理関連」のファイルです。

開発の準備を行おう

パッケージ管理を理解する

Amplifyの仕組みは、今ダウンロードしたプロジェクトファイル単体では成り立ちません。様々な「ライブラリ」「モジュール」等々に依存しています。

だからこれらをインストールしていきたいです。
とはいえ一つ一つ何が必要か判断し、インストールするのは大変ですね。

ここを自動化するのがnpmというパッケージ管理ツールです。このテンプレートファイルでも、npm経由でインストールすべき「必要なものリスト」が初めから管理されています。
（それがpackage.jsonやpackage-lock.jsonです）

こういった仕組みのおかげで、必要なものを一括でインストールできます。次のコマンドを打ってみます。

cd blog-sukkiri-app
npm i

それぞれの行で次のことをしています。

プロジェクトファイルに移動します。
忘れがちですが非常に大事で、移動しないと必要ファイルが見つからずエラーになります。
npmで必要物をインストールします。i は install のエイリアスで、短く打てて気持ちいいです。
（代わりにinstallと書いてもOK）

少し時間がかかって、諸々の必要なモジュールがインストールされていきます。今やった作業は「依存関係のインストール」などと呼ばれる作業です。

インストールが完了したら、Webページ作りの準備はほぼ完了しています🎉

（npmコマンドが見つからなかった場合、Node.jsのインストールが行われてない可能性があります。この後の過程でも使用しますので、インストールをお願いいたします）

テンプレートプロジェクトに必要なAWSリソースを作る

最後の準備として、このプロジェクトファイル（サンプルアプリ）に必要なAWSリソースを作成します。

こちらのAmplify Gen2 プロジェクトテンプレートの内容はToDoリストのアプリケーションになっているのですが、ToDoリスト管理のためにDynamoDBデータベースが用いられているため、これを作成する必要があります。

うわーっAWS環境へのデプロイかあ、面倒そう、と思った方。安心してください。
実はこれ、面倒なことではありません。次のコマンドを打ちます。

npx ampx sandbox

このコマンド一つで、AWS環境にCloudFormationスタックが作成・実行され、アプリケーションのバックエンドが構成されます。
sandboxというコマンドの名の通り、本番で運用するというよりも、動作確認のため、自分用にリソースを作っておくというユースケースが念頭に置かれています。

さあ、コマンドを打ってみましょう。次々にリソースが作成されていきます（私の環境では4分くらいかかりました）。

なお、以下の2点に注意してください。