AWSのBedrockを、API Gateway経由でLambdaから呼び出す手順を整理しました。
Claude 3.7 Sonnetモデルを使い、日本語応答を得るまでの構成を実際に構築したときのメモです。
💡 構成概要
- HTML → API Gateway → Lambda → Bedrock（Claude 3.7 Sonnet）
- リージョン：ap-northeast-1（東京）
- モデルID：apac.anthropic.claude-3-7-sonnet-20250219-v1:0
🧾 手順一覧
前提条件：東京リージョンでBedrockが使用できるようになっていること
1 Lambda関数作成
2 IAMロール変更（Bedrockアクセス許可）
3 タイムアウト延長（3秒→30秒）
4 Lambdaコード実装・デプロイ
5 Lambdaテスト
6 API Gateway作成（REST API）
7 リソース 作成
8 ANYメソッド追加
9 CORSを有効化
10 画像送信設定
11 デプロイ&ステージ作成
12 実行URL確認
13 curlでOPTIONS確認
14 HTMLフォームで実行テスト
15 画像送信対応（multipart/form-data対応）
16 CloudWatchでログ確認
手順
1 Lambda関数作成
2 IAMロール変更（Bedrockアクセス許可）
3 タイムアウト延長（3秒→30秒）
★画像は15分だけど30秒でいいかも
4 Lambdaコード実装・デプロイ
Lambdaコードを張り付けてデプロイする
🐍 Lambda関数（Python）
import json
import boto3
import base64
from email.parser import BytesParser
from email.policy import default
def lambda_handler(event, context):
# --- OPTIONS プリフライト対応 ---
if event.get("requestContext", {}).get("http", {}).get("method") == "OPTIONS":
return {
"statusCode": 200,
"headers": cors_headers(),
"body": json.dumps({"message": "CORS OK"})
}
bedrock = boto3.client("bedrock-runtime", region_name="ap-northeast-1")
model_id = "apac.anthropic.claude-3-7-sonnet-20250219-v1:0"
system_prompt = "必ず日本語で答えてください"
max_tokens = 1000
user_input = ""
images = []
try:
headers = event.get("headers", {}) or {}
content_type = headers.get("content-type") or headers.get("Content-Type")
body_raw = event.get("body", "")
is_b64 = event.get("isBase64Encoded", False)
# --- multipart/form-data の場合 ---
if content_type and "multipart/form-data" in str(content_type).lower():
if isinstance(body_raw, bytes):
body_bytes = body_raw
elif is_b64:
body_bytes = base64.b64decode(body_raw)
else:
body_bytes = bytes(body_raw, "latin-1", errors="ignore")
parser = BytesParser(policy=default)
msg = parser.parsebytes(b"Content-Type: " + content_type.encode() + b"\n\n" + body_bytes)
for part in msg.iter_parts():
disp = part.get("Content-Disposition", "")
if "form-data" not in disp:
continue
name = part.get_param("name", header="content-disposition")
if name == "message":
raw = part.get_payload(decode=True)
if raw:
user_input = raw.decode(errors="ignore").strip()
elif name == "images":
mime = part.get_content_type()
if mime not in ["image/png", "image/jpeg"]:
continue
data = part.get_payload(decode=True)
b64 = base64.b64encode(data).decode().replace("\n", "")
images.append({"mime": mime, "data": b64})
# --- JSON 形式の場合 ---
elif body_raw:
body_data = json.loads(body_raw)
user_input = body_data.get("message", "")
if "images" in body_data:
for img in body_data["images"]:
images.append({"mime": "image/png", "data": img})
except Exception as e:
return error_response(f"リクエスト解析エラー: {str(e)}")
# --- テキスト未入力対策 ---
if not user_input.strip():
user_input = "画像を解析してください。"
# --- Claude 入力構築 ---
user_content = [{"type": "text", "text": user_input}]
for img in images:
user_content.append({
"type": "image",
"source": {
"type": "base64",
"media_type": img["mime"],
"data": img["data"]
}
})
payload = {
"anthropic_version": "bedrock-2023-05-31",
"system": system_prompt,
"max_tokens": max_tokens,
"messages": [{"role": "user", "content": user_content}]
}
# --- デバッグ出力 ---
print("=== PAYLOAD HEAD ===", json.dumps(payload)[:500])
try:
response = bedrock.invoke_model(modelId=model_id, body=json.dumps(payload))
body = response.get("body")
if hasattr(body, "read"):
body = body.read()
res_json = json.loads(body)
output_text = res_json["content"][0]["text"]
return {
"statusCode": 200,
"headers": cors_headers(),
"body": json.dumps({"reply": output_text}, ensure_ascii=False)
}
except Exception as e:
print("Error:", e)
return {
"statusCode": 500,
"headers": cors_headers(),
"body": json.dumps({"error": str(e)}, ensure_ascii=False)
}
def error_response(msg):
return {
"statusCode": 400,
"headers": cors_headers(),
"body": json.dumps({"error": msg}, ensure_ascii=False)
}
def cors_headers():
return {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "OPTIONS,POST,GET",
"Access-Control-Allow-Headers": "Content-Type,x-amz-date,authorization,x-api-key,x-amz-security-token"
}
5 Lambdaテスト
LamdaからBedrockに通信できることを確認
この時点で画像添付はできないので、後で確認する
"message": "これはテストです。"
6 API Gateway作成（REST API）
7 リソース 作成
8 POSTメソッド追加
ai階層で作成する
9 CORSを有効化
10 画像送信設定
11 デプロイ＆ステージ作成
ここで初めてステージを作成している
12 実行URL確認
13 curlでOPTIONS確認
curl -i -X OPTIONS https://XXXXXXXXXX.execute-api.ap-northeast-1.amazonaws.com/dev/ai
14 HTMLフォームで実行テスト
curlでの確認で「できた」と思ったが
htmlで実行すると、CORS関連エラーと画像添付できない問題が発生していた。
🌐 HTMLテストページ
★const API_URL に自身のBedrockAPIアドレスを入れる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Bedrock API テスト（複数画像対応）</title>
<style>
body { font-family: sans-serif; padding: 20px; }
textarea { width: 100%; height: 100px; }
button { padding: 8px 16px; margin-top: 10px; }
#reply { margin-top: 15px; white-space: pre-wrap; border: 1px solid #ccc; padding: 10px; }
#preview img { max-width: 150px; margin: 5px; border: 1px solid #ccc; }
</style>
</head>
<body>
<h2>Bedrock API テスト（複数画像対応）</h2>
<textarea id="inputText" placeholder="メッセージを入力..."></textarea><br>
<!-- ✅ 複数画像選択対応 -->
<input type="file" id="imageInput" multiple accept="image/*"><br>
<!-- ✅ 選択済み画像のプレビュー -->
<div id="preview"></div>
<button id="sendBtn">送信</button>
<div id="reply"></div>
<script>
const API_URL = "https://xxxxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/ステージ/リソース";
const btn = document.getElementById("sendBtn");
const input = document.getElementById("inputText");
const imageInput = document.getElementById("imageInput");
const reply = document.getElementById("reply");
const preview = document.getElementById("preview");
// --- 画像プレビュー ---
imageInput.onchange = () => {
preview.innerHTML = "";
for (const file of imageInput.files) {
const img = document.createElement("img");
img.src = URL.createObjectURL(file);
preview.appendChild(img);
}
};
// --- 送信処理 ---
btn.onclick = async () => {
const msg = input.value.trim();
const files = imageInput.files;
if (!msg && files.length === 0) {
reply.textContent = "⚠️ テキストか画像を入力してください。";
return;
}
reply.textContent = "送信中...";
btn.disabled = true; // 二重送信防止
const formData = new FormData();
formData.append("message", msg);
// ✅ 複数画像を1つずつ追加
for (let i = 0; i < files.length; i++) {
formData.append("images", files[i], files[i].name);
}
try {
const res = await fetch(API_URL, {
method: "POST",
body: formData // Content-Typeは自動設定（boundary含む）
});
const text = await res.text();
let message = "";
try {
const data = JSON.parse(text);
message = data.reply || data.error || text;
} catch {
message = text;
}
reply.textContent = message;
} catch (e) {
reply.textContent = "通信エラー: " + e.message;
} finally {
btn.disabled = false;
}
};
</script>
</body>
</html>
15 画像送信対応（multipart/form-data対応）
通常ローカルでの送信はCORSでlocalhostを認識できないため、
ブラウザ経由ではエラーになるが、これまでの設定で回避している。
16 CloudWatchでログ確認
エラーが出た場合の確認はClowdWatchでの確認を行う。
(Lamda上で[$LATEST]を記載し、検索しやすくしている)
- START RequestId 〜 END RequestId の間に、Bedrock応答テキストが出力されているか確認
🧩 注意点
- Bedrockは応答がやや遅いので、Lambdaのタイムアウトを30秒以上に設定すること。
- API GatewayでCORSを有効化しないと、ブラウザからPOSTできない。
- multipart/form-dataを扱う場合は、Lambdaをboto3＋base64対応に改修する必要あり。
(今回のLambdaは改修済み)
✅ まとめ
この構成を使えば、HTMLフォームから画像添付し、claude3.7の東京リージョンに
送付が可能となります。
- CORS・タイムアウト・IAMロールの3点を調整することで安定動作します。