AWSを使って、DynamoDBに保存された投稿データをHTMLで表示するWeb APIを構築してみましょう。
この記事では「データの読み込み（表示）機能」に絞り、API GatewayとLambdaを使ってサーバレスで動作するシンプルな投稿一覧システムを作成します。
⛏️ 構成イメージ
[ブラウザ] → [API Gateway (HTTP API)] → [Lambda関数] → [DynamoDB]
- 投稿データをDynamoDBに保存し、それをLambda関数で読み込み、HTMLとして返します。
📓 今回の作業内容
- DynamoDBの準備
- Lambda関数の作成
- Lambdaのコード記述（DynamoDBからデータを取得しHTMLで返す）
- API Gatewayで公開
- ブラウザで動作確認
1. DynamoDBの準備
テーブル作成
- AWSコンソール → DynamoDB → 「テーブルを作成」
- テーブル名：
PostsTable - パーティションキー：
postId（文字列型） - ソートキーは無しでOK
- その他の設定はデフォルトで作成
サンプルデータの追加（手動で）
{
"postId": "1",
"author": "User A",
"timestamp": "2024-01-01 10:00:00",
"content": "これはサンプル投稿です。"
}
2. Lambda関数の作成
手順
- AWSコンソール → Lambda → 「関数の作成」
- 「一から作成」を選択
- 関数名：例）
fetchPostsHandler - ランタイム：Python 3.12
- 実行ロール：
AWSLambdaBasicExecutionRoleに加えて、DynamoDBアクセス権限があるもの（AmazonDynamoDBFullAccessを事前に付与済みとします）
3. Lambda関数のコード（Python）
以下のコードを Lambda 関数にコピペします：
import json
import boto3
dynamodb = boto3.resource('dynamodb')
table = dynamodb.Table('PostsTable')
def lambda_handler(event, context):
result = table.scan()
html = "<html><meta charset='UTF-8'><body><h1>投稿一覧</h1>"
for item in sorted(result['Items'], key=lambda x: x['timestamp'], reverse=True):
html += "<div style='margin-bottom:20px;border:1px solid #ccc;padding:10px;'>"
html += f"<strong>投稿者：</strong>{item['author']}<br>"
html += f"<strong>投稿日時：</strong>{item['timestamp']}<br>"
html += f"<strong>内容：</strong>{item['content']}"
html += "</div>"
html += "</body></html>"
return {
'statusCode': 200,
'body': html,
'headers': {
'Content-Type': 'text/html'
}
}
4. API Gateway の設定
- Lambda関数の画面 → 「トリガーを追加」 → 「API Gateway」
- APIタイプ：HTTP API（推奨）
- セキュリティ：オープン（認証なし）
- 作成後に表示されるエンドポイントURLをコピーしておきます
5. 動作確認
ブラウザで発行されたAPI GatewayのURLにアクセスすると、DynamoDBに登録された投稿一覧がHTMLで表示されます。
表示されれば成功です！
🔐 IAMについて（補足）
この構成では Lambda 関数が DynamoDB にアクセスするため、IAM実行ロールに下記のような権限が必要です：
dynamodb:Scandynamodb:DescribeTable
本記事では、AmazonDynamoDBFullAccess ポリシーがあらかじめ実行ロールに付与されている前提で進めています。
✅ おわりに
これで API Gateway + Lambda + DynamoDB による HTML形式の投稿一覧API が完成しました！
シンプルですが、サーバレスの基本構成としてとても良いハンズオン題材になります。
✨ 次のステップ（応用編）
- HTMLフォームを用いた投稿機能（DynamoDBへの書き込み）
- Bootstrapなどを使ったデザイン改善
- タイムスタンプの自動化・整形
- 投稿一覧と詳細ページの分離
🧑🏫 こんな方におすすめ
- AWSの構成を動かしながら学びたい方
- LambdaやDynamoDBを実用的に使ってみたい方
- フロントエンドとAPIの連携を学びたい方
ご質問があればコメントでお知らせください！
次回は「投稿機能（書き込み編）」を予定しています。お楽しみに！