7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Amazon Qと5分で挑む!AWSサーバーレス「クイズサイト」爆速構築

7
Posted at

はじめに

本記事は、2025年10月に開催されたAWSコミュニティ JAWS-UG浜松 での登壇内容を記事としてまとめたものです。

今回のプロジェクトでは、AWSのAIアシスタントである Amazon Q Developer を活用することで、開発のリードタイムをどこまで短縮できるかに挑戦しました。テーマとして、以下の2点を主軸に置いています。

  1. Amazon Q Developerによる爆速構築
    生成AIを単なるチャットツールとしてではなく、設計・実装・デバッグを共に行う「パートナー」としてフル活用しました。AIが要件を理解し、即座に最適なコードや構成案を提示することで、インフラ構築からデプロイまでを駆け抜ける、次世代の開発スピードを検証しています。

  2. 王道のサーバーレスアーキテクチャ
    「S3 + API Gateway + Lambda + DynamoDB」という、AWSにおける最も基本的かつ汎用的な構成を採用しました。自分自身の学習のため、あるいはこれから学ぶ人への指針として、最も汎用性の高いパターンをAIと共に正しく習得・整理したいという狙いがあります。

AIという強力な相棒を得ることで、実務でも活用機会の多いこのアーキテクチャをいかに効率化できるか、そのプロセスを共有します。

2. システム構成(アーキテクチャ)とデータの流れ

今回構築したのは、フロントエンドからデータベースまでをすべてマネージドサービスで構成した、サーバーレスの王道パターンです。

image.png

各リソースの役割

  • S3 (Amazon Simple Storage Service):
    フロントエンド(HTML/CSS/JavaScript)をホスティングします。「静的ウェブサイトホスティング」機能を利用することで、サーバー管理なしでWebサイトを公開できます。
     

  • Amazon API Gateway:
    フロントエンドからのリクエストを受け付ける入口です。今回はHTTPプロトコルベースのREST APIを通じて、バックエンドのLambda関数を呼び出します。
     

  • AWS Lambda:
    バックエンドのロジックを担当します。今回はPythonを使用して、DynamoDBからクイズデータを取得・加工する処理を記述します。
     

  • Amazon DynamoDB:
    クイズデータを格納するNoSQLデータベースです。スキーマレスで柔軟なデータ構造を持てるため、今回のようなクイズアプリのデータベースで採用しました。

データの経路(リクエスト・レスポンス)

  1. 静的コンテンツのロード:
    ユーザーがブラウザでS3のエンドポイントにアクセスし、HTML/CSS/JSをロード。
  2. APIリクエスト:
    JavaScriptがAPI Gatewayに対して「クイズ取得」のリクエスト(GET)を送信。
  3. 処理のトリガー:
    API GatewayがLambda関数を起動。
  4. データ取得:
    LambdaがDynamoDBからクイズデータを取得。
  5. レスポンスの返却:
    LambdaがデータをJSON形式に整え、API Gateway経由でブラウザへ返却。
  6. クイズの表示:
    JavaScriptがJSONを解析し、画面上に俳句と選択肢をレンダリング。

なぜこの構成か

  • 高いスケーラビリティ: アクセス数に応じて自動スケール。
  • コスト効率: 従量課金のため、リクエストがない時は費用がほぼゼロ。
  • 運用負荷の低減: サーバー管理が不要で、ビジネスロジックの開発に集中できる。

3. 構築手順:Amazon Q とコンソール操作の組み合わせ

今回の構築では、すべてをAI任せにするのではなく、 「ロジック生成は Amazon Q」「リソース配置と設定はコンソールでの手動操作」 と役割を分けました。コンソールを自分で操作することで、各サービスの設定項目を正しく理解し、アーキテクチャへの学びを深めることを目的としています。

ステップ1:バックエンド(Lambda)の生成とデプロイ

まず、APIの核となるロジックを Amazon Q に依頼して生成します。

  • Amazon Q へのプロンプト:

AWS Lambdaでシンプルなクイズデータ取得APIをap-northeast-1に作りたいです。 DynamoDBのテーブル名は 'QuizTable' と仮定する。このテーブルから全データを読み込み、JSON形式で返すPython 3.12のLambda関数コードを記述してください。 このLambdaをデプロイするためのSAMテンプレートも作成し、必要なIAM権限(DynamoDBへの読み取り)が自動で付与されるようにしてください。ただし、API Gatewayの定義は含めないでください。

  • コンソールでの操作:
    生成されたSAMテンプレートをもとにLambda関数を作成します。次のコマンドでデプロイを実行します。
sam deploy --stack-name QuizStack --resolve-s3 --capabilities CAPABILITY_IAM

 

ステップ2:データベース(DynamoDB)の構築

DynamoDBテーブルを作成し、AIが生成したクイズデータを登録します。

  • コンソールでの操作(テーブル作成):
    DynamoDBコンソールから QuizTable を作成し、パーティションキーを quizId (String) に設定します。
  • Amazon Q へのプロンプト(データ生成):

以下のJson形式の例に倣って、クイズを3つ作ってください。テーマは「 任意のテーマ 」で、問題文は中級レベルの俳句形式にしてください。
{  "quizId": {"S": “0"},
  "questionText": {"S": "朝起きて 鏡に映る 寝ぐせ髪"},
  "options": {"L": [{"S": "前髪"}, {"S": "後ろ髪"}, {"S": "横髪"}, {"S": "つむじ"}]},
  "correctAnswerIndex": {"S": "1"},
  "explanation": {"S": "寝ぐせの王道といえば後ろ髪!前髪は気にして直すけど、後ろは見えないから一日中ハネてることも。みんな経験ありますよね。"}}
explanationではその問題の面白さをフレンドリー面白く教えてください。出力結果はDynamoDBのコンソール画面でjson形式でインプットできる形で出力してください。

  • コンソールでの操作(データ投入):
    出力されたJSONデータを、DynamoDBの「項目の作成」からインプットします。
     

ステップ3:フロントエンド基盤(S3)の設定

Webサイトを公開するためのインフラを準備します。

  • コンソールでの操作:
    S3バケットを作成し、「静的ウェブサイトホスティング」を有効化します。アクセスポリシーを設定し、外部から閲覧可能な状態に整えます。
    以下はバケットポリシーの例です。ポリシーは状況に応じて適切に設定してください。

{ "Version": "2012-10-17",
"Statement": [ {
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::バケット名/
"
} ]}
 

ステップ4:APIの公開(API Gateway)

バックエンドとフロントエンドを繋ぐゲートを作成します。

  • コンソールでの操作:
    API Gatewayコンソールから「REST API(またはHTTP API)」を作成。リソースとメソッド(GET)を定義し、ステップ1で作ったLambda関数と紐付けます。デプロイを行い、エンドポイントURLを発行します。

ステップ5:UI(HTML/CSS/JS)の生成と公開

最後に、ユーザーが触れる画面を Amazon Q に作ってもらいます。

  • Amazon Q へのプロンプト:

S3にホスティングするシンプルなクイズWebサイトを構築したい。index.html, style.css, script.js の3つのファイルを生成してください。回答ボタンを持ち、選択肢は黒文字にする。API GatewayのURLは「 発行したURL 」にしてください。 ※APIから返される日本語がUnicodeエスケープされているため、JSON.parse()前にデコード処理を追加してください。

  • コンソールでの操作:
    生成されたファイルをS3バケットにアップロードして、全工程が完了です。

4. 実装のポイント:直面した課題と解決策

AIが生成したコードをベースにしつつ、実用レベルに調整したポイントを整理します。

  • Unicodeデコード処理:
    日本語が \u30b5... 形式(Unicodeエスケープ)で返ってくることをから、JavaScript側でデコードするロジックを指示しました。

  • Few-shotによる精度向上:
    データの作成依頼時にJSONの具体例を一つ提示することで、DynamoDBにそのまま登録可能な形式を確実に得るようにしました。

5. まとめ

今回のチャレンジを通じて、Amazon Q Developer という強力なパートナーがいれば、AWSの王道アーキテクチャを驚くほどスムーズかつ正確に構築できることが実感できました。

特に、具体的なプロンプトを投げることで、「コードを書く作業時間」を「アーキテクチャを理解し、最適化を検討する時間」に変えられる点に、開発における生成AIの真価があると感じています。

この記事が、サーバーレスをこれから学ぶ方や、AIを活用した開発に興味がある方の参考になれば幸いです。

7
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?