はじめに

こんにちは。ビジネスアクセラレーション事業部の古川です。
この記事は、「AWSに興味はあるけどよく知らない」「資格を持っているけど実際に触ってみたことがない」という方向けに、「30分で学習できる」をテーマに毎週金曜日にお届けする連載シリーズの第4回です。

この記事では、AWS公式チュートリアルの「フルスタックのReactアプリケーションを構築する」に挑戦します。この記事は第四回となります。前回の記事はこちらです。本日も一緒に取り組んでいただけると嬉しいです！

コードをコピーして貼り付ける作業が多くなります。このブログには参考画像のみを載せているため、公式ガイドからのコピーをお願いします。

※本ブログではmacOSを使用しています。
※Gitの代わりにCodeCommitを使用しています。ご了承ください。

1.Amplify ライブラリをインストールする

本日はタスク3「フロントエンドの構築」を進めます。ブログでは私が実際に行った手順を紹介しますが、公式ガイドも合わせてご確認ください。

プロジェクトには、2つのAmplifyライブラリが必要です。メインの aws-amplifyライブラリには、アプリのフロントエンドをバックエンドに接続するためのクライアントサイドが含まれています。もう１つの @aws-amplify/ui-reactライブラリには、フレームワーク固有のUIコンポーネントが含まれています。下記コマンドをターミナルに入力します。
cd notesapp
npm install aws-amplify @aws-amplify/ui-react

npm warnと書かれた文がいくつか出てきますが、最終行に「 xxx packages are looking for funding」のように出てくれば成功です。

2.アプリのUIをデザインする

1.前回の記事の手順３と同様に、VSコードでnotesappを開きます。
2.  notesapp/src/index.css ファイルに移動します。
3.ステップ2:アプリにUIをデザインするからコードをコピーして中身を置き換えます。このコードがNotes UI のスタイルを設定します。文字の大きさや色を変更してみても良いですね。

3.メモ機能のUIフローを実装する
Amplify Authenticator コンポーネントを使って、ユーザー認証フローを作成します。このコードの内容には、以下が含まれています。
    

  • fetchNotes – 保存されているメモの一覧を取得して表示します。
    • 

  • createNote – フォームに入力された内容や画像を受け取り、新しいノートを作成します。作成後、画像は Amplify の保存領域にアップロードされ、そのノートと紐づけられます。
    • 

  • deleteNote -選んだノートを削除します。
    • 

1.VSコードで notesapp/src/App.jsxファイルに移動し、中身をステップ3：メモ機能のUIフローを実装する からコピーしたコードで置き換えます。




2.ターミナルで下記コマンドを入力します。

npm run dev

3. http://localhost:5173/ のようなURLが出てきたら、コピーしてアドレスバーに入力します。このようなサイトが開きます。

4.右側のCreate Account タブに移動して、メールアドレスとパスワードを入力します。入力したメールにコードが飛ぶので確認します。私は迷惑メールに入っていました。
5.変更内容をCodeCommitにプッシュします。ターミナルで下記コマンドを入力します。

git add .

git commit -m'the notes app'

git push origin main
6.AWSコンソールにログインし、Amplifyを開きます。先ほどの変更が自動でデプロイされていることを確認します。

7.ドメインの下にあるURLを開きます。これでアプリがAmplifyのバックエンドに接続されました。
4.アプリを使ってみる
メモのタイトル、内容を入力して作成します。

下にスクロールすると、作成したメモを確認、削除できます。

以上でアプリ作成は終了です！お疲れ様でした！
5.リソースのクリーンアップ
作成してすぐ削除してしまうのは惜しいものですが、使わないリソースをそのままにしておくと課金が発生したりサーバー攻撃の標的になったりするリスクがあります。忘れないうちに削除しておきましょう。
1.AWSコンソールからAmplifyを開き、notesappを開きます。

2.左側のタブから、アプリケーションの設定＞全般設定 を開きます。

3.アプリの削除を選択します。これでAmplifyの作業は終了です。
4.AWSコンソールからCodeCommitを開きます。

5.notesappリポジトリにチェックをいれ、リポジトリの削除を選択します。
まとめ
全四回に渡る、フルスタックアプリケーションの構築、無事完了しました！お付き合いいただきありがとうございました。

前回行った、「サーバーレスのウェブアプリケーションを構築する」と比べてAWSコンソールの操作にも慣れ、かなりスムーズに進められました。今後も様々なAWSサービスに触れ、学習していきたいと思います。