目指せアーキテクチャマスター！#3

Transcript

1. 21 April, 2026 Japan AWS Jr.champions 目指せAWS アーキテクチャマスター！ #3 ~ 手を動かして学ぶ環境構築~
2. 運営メンバー 落合 彩佳 株式会社ギークフィード 穴田 竜⼤ 株式会社アンチパターン 2025 Japan AWS Jr. Champion 2025 Japan AWS Jr. Champion
3. Japan Aws Jr.Champions って？ AWS Partner Network （APN ）参加企業に所属し、 社会人歴1 ～3 年目でAWS を積極的に学び、自発的なアクションによって 周囲に影響を与えている若手エンジニアを選出する日本独⾃の認定プログラム 2025 Japan AWS Jr. Champions クライテリアと応募方法のお知らせ より引用
4. 本日の趣旨 構成図の上では繋がっている線も、実際に動かすと 権限エラー、CORS エラー、応答しないAPI…… 現実には無数の罠が潜んでいます。 エラーメッセージを読み解き、原因を特定し、 修正する。その一連の流れを体験することで、 AWS の「なぜ動かないか」がわかるエンジニアを 目指します。
5. スクリーンショット・SNS 投稿をする場合があります。 　 NG の⽅はお申し出ください。 イベント趣旨と関係のない営業活動、採用勧誘、他者への攻撃的な発⾔などは 　 ご遠慮ください。 ハッシュタグ：#2025Japan_AWS_Jr_Champions 参加ルール・マナー
6. 本日のスケジュール 19:30 　オープニング 19:40 　問題内容説明 19:55 　トラブル 　シューティング 20:20 　休憩時間 20:30 　トラブル 　シューティング 20:55 　クロージング
7. 完成版画面イメージ ハンズオン背景 背景 あなたは前任者がCloudFormation で開発したAI チャットの開発を 引き継ぐことに！ しかし…… 実際に触ってみると、 あなたの前には致命的な４つの 不具合が立ち塞がります！
8. アーキテクチャ図
9. 完成版画面イメージ アーキテクチャ図 背景・アーキテクチャ図
10. 準備 CloudFormationにインポートするtemplate.yamlをダウンロード する AWSコンソールを開く
11. ①「スタックの作成」をクリック 準備 ②以下の設定をして「次へ」をクリック 既存のテンプレートを選択 テンプレートファイルのアップロード template.yamlをアップロード
12. ③スタック名を以下と同じにして「次へ」 をクリック architecture-master 準備 ④以下の☑をして「次へ」をクリック 「AWS CloudFormation によって IAM リソースが作成される場合がある ことを承認します。 」
13. ⑤確認画面で内容を確認して「送信」を クリック スタックが作成されるまで3～5分程待ち ます 準備 ⑥全てのスタックが緑色になればOK
14. ⑦出力タブからキーが「CloudFrontUrl」 の欄を探し、値のリンクをクリックする 準備
15. BUG#1 不具合１ ページが開けない
16. BUG#1 不具合１ ページが開けない ヒント Error の内容は？ 開発者ツール（F12 ）の Console にはどのように 表示されている？ エラーログはCloudWatch で確認できるかも？
17. SOLUTION#1 不具合１ CloudFront のOAC が正しく設定されておらず、S3 バケットへの アクセスが拒否されていた OACってなに？ CloudFront からS3 へのアクセス制御の仕組みです。 CloudFront 経由のリクエストだけS3 に届けることで、S3 バケットを非公開のまま安全 に公開できます。 CloudFront 側・S3 側の両方に設定されていないと403 エラーになります。 CloudFront ：Origin にOAC をアタッチ S3 ：バケットポリシーで CloudFront サービスプリンシパルからのGetObject を許可
18. アーキテクチャ図
19. 不具合１ / 解決編 ①CloudFormationのリソースタブを開き 「Distribution」欄のURLをクリック ②オリジンタブを開き、 「S3Origin」を 選択して「オリジンを作成」をクリック
20. 不具合１ / 解決編 ③オリジンアクセスが「Public」になって いることを確認し、 「Origin access control settings (recommended)」に変更する ④すぐ下の「Create new OAC」をクリック 名前の.s3～以降は削除して「Create」をク リック
21. 不具合１ / 解決編 ⑤ポリシーをコピーをクリックして、 下部の「変更を保存」をクリック ⑥CloudFormationのリソースタブを開き 「FrontendBucket」欄のURLをクリック
22. 不具合１ / 解決編 ⑦アクセス許可タブのバケットポリシー欄 の「編集」をクリック ⑧手順⑤でコピーしたポリシーを貼り付け て画面下部の「変更の保存」をクリック
23. 不具合１ / 解決編 ⑨403エラーが消えて画面が表示される ように！ ……けど、なにかおかしい？
24. BUG#2 不具合２ AI からの返答がない
25. BUG#2 不具合２ AI からの返答がない ヒント Error の内容は？ 開発者ツール（F12 ）の Console にはどのように 表示されている？ エラーログはCloudWatch で確認できるかも？
26. SOLUTION#2 不具合２ API Gateway でドメインを許可していなかったため、 ブラウザがCORS エラーを出してしまった CORSってなに？ 異なるオリジン（ドメイン）間でのリソース共有をブラウザレベルで制御する仕組みで す。例えばフロントエンドがAPI を呼ぶとき、サーバー側が「このオリジンからのリク エストは許可する」と明示する必要があります。 フロントエンド（chat.example.com ）⇔　API （api.example.com ）
27. アーキテクチャ図
28. 不具合２ / 解決編 ①AIチャットのURLをコピーしておく ②CloudFormationのリソースタブを開き 「RestApi」欄のURLをクリック
29. 不具合２ / 解決編 ③/chatを選択して「CORSを有効にする」 をクリック ④Access-Control-Allow-Originに手順① でコピーしたURLを入れる ※最後の/も削除 例： https://d3rtsrdhqxyoc8.cloudfront.net
30. 不具合２ / 解決編 ⑤右上の「APIをデプロイ」をクリック ⑥ステージを「prod」に変更し、 「デプロ イ」をクリック
31. 不具合２ / 解決編 ⑨十数秒待ってからAIチャット画面を更新 して再度メッセージを送ってみると…… 別のエラーに変わっている！
32. BUG#3 不具合３ AI からの返答がない ver.2
33. BUG#3 不具合３ AI からの返答がない ver.2 ヒント Error の内容は？ 開発者ツール（F12 ）の Console にはどのように表 示されている？ エラーログはCloudWatch で確認できるかも？
34. SOLUTION#3 不具合３ Lambda がBedrock のモデルを呼び出す権限を持っていなかった 権限の設定 Lambda がAWS の他サービスを操作するための権限を付けてあげる必要があります。 Lambda └─ IAM ロール（許可証） └─ ポリシー（できること一覧） ├─ s3:PutObject （S3 に書き込める） ├─ dynamodb:GetItem （DB を読める） └─ logs:CreateLogGroup （ログを書ける）
35. アーキテクチャ図
36. 不具合３ / 解決編 ①開発者ツールを確認すると、エラー 500（Internal Server Error）が発生し ている。 →バックエンド側（Lambda）の問題 ②CloudFormationのリソースタブを開き 「ChatFunction」欄のURLをクリック
37. 不具合３ / 解決編 ③モニタリングタブを開き、 「CloudWatchログを表示」をクリック ④メニューからログ管理を選択し、ログ グループから /aws/lambda/architecture-master-chat を選択する
38. 不具合３ / 解決編 ⑤ログストリームをクリック ⑥ログイベントを確認すると、 AccessDeniedException～と出ている。 →LambdaがBedrockのモデルを呼び出そ うとしたが、そのIAMロールに権限がな いため拒否されたことがわかる。
39. 不具合３ / 解決編 ⑦ ・arn:aws:bedrock:ap-northeast- 1::foundation-model～ ・InvokeModelWithResponseStream の部分をコピーしておく ⑧Lambdaに戻り、設定タブを開いて 実行ロールのロール名をクリック
40. 不具合３ / 解決編 ⑨IAMが開くので、 「許可を追加」→ 「インラインポリシーを作成」の順に クリック ⑩サービス：Bedrock アクション許可： InvokeModelWithResponseStream を入力し、チェックを入れる
41. 不具合３ / 解決編 ⑪foundation-model欄の「ARNを追加」 をクリックし、手順⑦でコピーしておい たARNをリソースARN欄に入力して 「ARNを追加」をクリック ⑫画面下部の「次へ」をクリック
42. 不具合３ / 解決編 ⑬ポリシー名に「InvokeBedrock」と入 力して「ポリシーの作成」をクリック ⑭AIチャットの画面に戻り、更新をする と、エラーは出なくなっているが……？
43. BUG#4 不具合４ AI からの返答がない ver.3
44. BUG#4 ヒント 不具合４ AI からの返答がない ver.3 Error の内容は？ バックエンドからの応答は ある？ アーキテクチャのどの部分 のバグか？
45. SOLUTION#4 不具合４ API のレスポンス転送モードをバッファード→ストリームに変更 なんでバッファードだとだめなの？ Bedrock のInvokeModelWithResponseStream はストリーミング専用のAPI です。 バッファードモードのAPI Gateway はレスポンスを全部受け取ってからクライアントに 返す動作をします。ストリーミングレスポンスは終端が明確でないため、API Gateway が待ち続けてタイムアウトしたり、うまく処理できなかったりします。 ストリームモードに変えることで来たデータをそのまま流す動作になり、Bedrock のレ スポンスをそのままクライアントまで届けられるようになったのが理由です。
46. アーキテクチャ図
47. 不具合４ / 解決編 ①開発者ツールのNetworkのHeaderを確 認するとContent-Typeがeventにはなっ ているが、Response・EventStreamタブ から返ってきていないことがわかる ②CloudWatchのロググループを開き 「/aws/lambda/architecture-master- chat」のURLをクリック
48. 不具合４ / 解決編 ③最新のログストリームをクリック ④特にエラーやおかしなところがないこ とを確認
49. アーキテクチャ図
50. 不具合４ / 解決編 ⑤CloudFormationのリソースから、 RestApiのリンクをクリック ⑥POSTメソッドの統合リクエストタブに ある「編集」をクリック
51. 不具合４ / 解決編 ⑦ レスポンス転送モードがバッファード になっているのを確認 ストリームを選択して「保存」をクリック ⑧APIをデプロイをクリック
52. 不具合４ / 解決編 ⑨ステージはprodを選択し「デプロイ」 をクリック ⑩少し待ってからAIチャット画面を更新し て、再度文章を送信すると……！
53. ポイント 困ったら開発者ツールを確認 サービスのあたりがついたらログ確認 ログが出ない場合はサービスの設定を確認しよう
54. お片付け CloudFrontのスタックから「architecture-master」を選択して「スタックを削除」 をクリック スタック名を入力して「スタックを削除」をクリック ※CloudWatch logs、OACは手動で削除する必要あり
55. アンケート https://forms.gle/rHKLAC9ckzZtbA3o8
56. ご清聴ありがとう ございました！