AWS Blocks が楽しい #ゆるWeb札幌

ゆるWeb勉強会@札幌 #31
https://mild-web-sap.connpass.com/event/400434/

Transcript

1. AWS Blocks (Preview) 楽しい ゆるWeb勉強会@札幌 #31 2026/08/22 tacck 1
2. Kihara, Takuya 木原 卓也 / @tacck / Sapporo, Japan CO-OP Sapporo 生活協同組合コープさっぽろ Software Engineer / Flutter, TypeScript, Vue.js, React 好きなフィギュアスケートの技 スプレッド・イーグル Community ゆるWeb勉強会@札幌 Amplify Japan User Group Auth0 Hero 主催 運営メンバー Since 2025 AWS Community Builder Since Q2 2021 Category: Front-end Web and Mobile / Dev Tools 2
3. AWS Blocks とは AWS Blocks is a backend toolkit for building full-stack applications on AWS. Each Block is a self-contained backend capability that bundles your application code, a local development setup, and the infrastructure to run it. Pick the Blocks you need, compose them, and AWS Blocks defines the AWS infrastructure for you following AWS best practices. Your entire application runs locally without an AWS account — when you're ready, deploy the same code to AWS without changing it. https://github.com/aws-devtools-labs/aws-blocks#aws-blocks-preview 3
4. AWS Blocks とは (Gemini 日本語訳) AWS Blocksは、AWS上でフルスタックアプリケーションを構築するためのバック エンドツールキットです。各Blockは、アプリケーションコード、ローカル開発環境、お よびそれを実行するためのインフラストラクチャをバンドルした、自己完結型のバック エンド機能です。 必要なBlockを選択して組み合わせるだけで、AWS BlocksがAWSのベストプラ クティスに沿ってインフラストラクチャを自動的に定義します。アプリケーション全体 はAWSアカウントなしでローカルに動作し、準備ができたら、コードを変更すること なくそのままAWSにデプロイできます。 4
5. AWS Blocks とは (私のまとめ) バックエンドを機能単位で Block (アプリケーションコードの塊) 化。 Block を定義し、組み合わせることで、ローカルでも AWS 上でも動かすことがで きる。ローカルで動く状態のまま、コード変更無しに AWS へデプロイできる。 ローカルで動かすだけなら AWS アカウント不要。 5
6. 用意されている Blocks (2026/08/21 現在) Category Blocks Data & storage KVStore, DistributedTable, Database, DistributedDatabase, FileBucket Authentication AuthBasic, AuthCognito, AuthOIDC Compute & background AsyncJob, CronJob AI Agent, KnowledgeBase Communication Realtime, EmailClient Configuration AppSetting Observability Logger, Metrics, Tracer, Dashboard Hosting Hosting 6
7. Data and storage Block KVStore Description Key-value storage with AWS service Amazon DynamoDB conditional writes DistributedTable Structured data with Amazon DynamoDB indexes and queries Database SQL with Kysely query Amazon Aurora builder (managed Serverless v2 Postgres) DistributedDatabase Serverless SQL with Amazon Aurora DSQL zero idle cost FileBucket File storage with presigned URLs Amazon S3 7
8. Authentication Block AuthBasic AuthCognito Description AWS service Username/password Amazon DynamoDB + with state machine API JWT Managed auth with Amazon Cognito MFA, groups, passkeys AuthOIDC OIDC sign-in (Google, OAuth redirect flow GitHub, Okta) 8
9. AI Block Agent Description AI agent with tools, AWS service Amazon Bedrock HITL approval, conversation persistence KnowledgeBase Semantic document Amazon Bedrock retrieval and RAG Knowledge Bases 9
10. Communication Block Realtime EmailClient Description AWS service WebSocket pub/sub Amazon API Gateway channels WebSocket Transactional email Amazon SES 10
11. Configuration Block AppSetting Description AWS service Configuration values AWS Systems Manager and secrets Parameter Store 11
12. Observability Block Logger Metrics Description AWS service Structured logging with Amazon CloudWatch correlation IDs Logs Custom application Amazon CloudWatch metrics Tracer Distributed request AWS X-Ray tracing Dashboard Auto-generated Amazon CloudWatch observability dashboard 12
13. Hosting and deployment Block Hosting Description AWS service Frontend deployment Amazon CloudFront + with SSR support (CDK Amazon S3 layer, import from @aws-blocks/blocks/cd k) 13
14. つまり Frontend フロントエンドを実装 14
15. つまり Frontend Hosting ホスティング準備 15
16. つまり Frontend Distribu ted Table データ永続化 Hosting 16
17. つまり 認証機能追加 Frontend Auth Cognito Distribu ted Table Hosting 17
18. つまり 欲しくなった機能を都度追加 Frontend Auth Cognito Distribu ted Table Hosting 18
19. つまり 欲しくなった機能を都度追加 Frontend Auth Cognito Distribu ted Table Hosting 直接インフラを触らずに 機能を追加できる 19
20. 実行環境: Local Local Sandbox Production Frontend Backend (Mock) 20
21. 実行環境: Sandbox Local Sandbox Production Frontend Backend (AWS) 21
22. 実行環境: Production Local Sandbox Production Frontend Backend (AWS) 22
23. 簡単なデモ 23
24. まとめ • • • AWS Blocks とは、フロントエンドに「バックエンド+インフラ」を 手軽に追加できるフレームワーク。 ローカル開発時は、インフラ(AWS)を気にせずに使える。 ローカルでうまく動いたら、AWSへそのままデプロイ 24