こんにちは。エンジニアのごえです。
今回はAWSサービスであるAWS Amplifyを使ってみたので感想の共有です。
以前、Part1で失敗に終わったものを再度挑戦しました。
今回はPFCバランス計算アプリをChatGPTに書かせたものを、WebアプリとしてAWS Amplifyでデプロイしました。
【アプリケーションの説明】
2行目のChooseFood で食品名を選択し、基準摂取量の何％を摂取したか数値を入力します。そして「Add Food」をクリックすると「SelectedFoods」に項目が追加されていきます。
食べたものと量を入力し終えたら、最後に右上の「Calculate」をクリックすることで「Results」に合計摂取カロリー、タンパク質量、脂質量、炭水化物量が算出されます。
アプリケーション全体像
PFC計算アプリは以下の機能を持つカンタンなアプリです：
• 食品を選択して摂取量を入力。
• 入力に基づいてPFC（タンパク質、脂質、炭水化物）とカロリーを計算。
• 計算結果を画面に表示。
このアプリをAWS上で構築するにあたり、以下のAWSサービスを利用しました。
AWSサービスの役割と関係性
1. AWS Amplify
AWS Amplifyは、フロントエンドアプリケーションの開発・デプロイをサポートするサービスです。このプロジェクトでは以下の役割を担いました。
• ホスティング: フロントエンド（HTML、JavaScript）を公開し、インターネットからアクセス可能にする。
• API統合: バックエンドのAPI Gatewayと連携し、ユーザーからの入力データを送信して結果を取得する。
手順は簡単です、以下の画面にZipファイルにまとめて圧縮したHTMLファイルやJavaScriptファイルをドラッグアンドドロップするだけです。
すると、以下のような画面に遷移し、デプロイが完了します。
デプロイ完了したら、URLが発行されます。
他の設定が完了したのち、URLにアクセスすると冒頭のアプリケーション画面が表示されて操作可能となります。
2.Amazon API Gateway: データ通信の窓口
PFC計算のロジックはサーバーサイドで処理されるため、API Gatewayがフロントエンドとバックエンドをつなぐ重要な役割を担いました。
• リクエストの受付: フロントエンドから送信される食品データと摂取量を受け取り。
• レスポンスの返却: 計算結果をフロントエンドに返却。
【設定のポイント】
・リソースとメソッドの作成
API Gatewayでリソース（エンドポイント）を作成し、必要なメソッド（POST、OPTIONSなど）を設定します。
・リソース: /calculate
フロントエンドから食品名と摂取量を送信するためのエンドポイント。今回は「calculate」という名前にしました。
・メソッド
POST: リクエストデータを受け取り、計算結果をフロントエンドに返す。
OPTIONS: CORS（クロスオリジンリソース共有）対応のために必要。
CORSとは、、、
通常、ブラウザはセキュリティ上の理由から、異なるオリジン（ドメイン、プロトコル、ポート）間でのリクエストを制限します。しかし、そのままでは今回の構成でAWS lambdaからの計算結果をフロントエンドに渡すことができません。そのためCORSでどのオリジンからのリクエストを許可するのかを指定しました。
※開発環境なので、一旦*(制限なし)にしています。
3,AWS Lambda: PFC計算のロジックを処理
PFCの計算式はAWS Lambdaで実装しました。
フロントエンドから送信された食品名(実際にはIDが渡されます)と摂取量をもとに、PFCとカロリーを計算しています。
【まとめ】
AWS Amplifyにはファイルをアップロードするだけで完了するので、
実際にはAPIGatewayなどの設定の方が難しかったです。今回はAWSサービス同士の連携をすることがメインの目的だったのでコンテンツの中身はChatGPT任せにしてしまいました。次回はより改良した内容にしていき、コードの中身も共有できるように頑張りたいと思います。
お読みいただきありがとうございました。
