Bedrockで作る “AWS用語 → 人間語” 翻訳フォーム

2025年11月7日開催
第一回品川会登壇資料

Transcript

1. Bedrockで作る “AWS用語 → 人間語” 翻訳フォーム AWS × 生成AI で遊びながら学んだCORS地獄の抜け方
2. 自己紹介 全冠目指して勉強中！ ◆基本情報 社会人３年目 現在風邪気味 AWS開発経験皆無！ 今年からCostExplolerの番人 【AWS資格】新資格AIプラクティショナー試験の概要と合格のコツを徹底解説 | SunnyCloud 残り 残り
3. AWSの用語って難しくないですか？ VPC Peering? Bedrock? TGW?
4. “AWS用語 → 人間語” 翻訳フォーム Amazon Bedrock Bedrock
5. “AWS用語 → 人間語” 翻訳フォーム Amazon Bedrock Bedrock BedrockとはAmazonが提供 する生成AIサービスのプラッ トフォームです。
6. 構成 Amazon API Gateway AWS Lambda Amazon Bedrock (HTTP API) (Titan Text) (Python, boto3) HTML fetch Lambda統合 LambdaがBedrockを呼び出し、人間語説明を返す構成 プロンプト
7. 構成手順 1. IAMポリシー作成 2. Lambdaを作成（bedrock:InvokeModel権限） 3. API GatewayをHTTP APIで作成 4. CORS設定（Origin・Methods・Headersをすべて許可） 5. HTMLフォームで fetch(API_ENDPOINT) 6. curlテスト → ローカルHTMLで確認 ChatGPTに相談しながら30分くらいでサクッと作れる！！
8. 構成手順 1. IAMポリシー作成 2. Lambdaを作成（bedrock:InvokeModel権限） 3. API GatewayをHTTP APIで作成 4. CORS設定（Origin・Methods・Headersをすべて許可） 5. HTMLフォームで fetch(API_ENDPOINT) 6. curlテスト → ローカルHTMLで確認 ChatGPTに相談しながら30分くらいでサクッと作れる！！ うまくいかない！！！！ ３時間かかりました！！！！！
9. ハマってしまった５つの罠 トラブル内容 要因 解決方法 Lambdaが動かない handler not foundエラー ハンドラー名不一致 Lambdaの関数名を修正 curlエラー PowerShellの全角引用符 シングルクォーテーションを織り交ぜた 文に修正 Not Found API GatewayのURLを間違えた 正しいURLに修正 Failed to fetch CORS設定不足 OPTIONSリクエストがブロックされ、POST まで届かない CORS設定修正 localhost拒否 ファイルを直接開いた（file://オリジン）た め、Originがnull扱い python -m http.serverで回避 学び：CORS設定はバックエンドではなく“ブラウザ”の問題
10. 遂に完成！
11. まとめ ➢ Bedrockは想像以上にAPI連携がシンプルで遊びやすい ➢ でもLambdaとAPI Gatewayの設定が9割 ➢ file://問題は“ローカルサーバ起動”で解決！ 触ってみるのが一番！！！！
12. ご清聴ありがとうございました