"AWSはちょっと苦手"でも大丈夫。AWS Blocks で手軽に作る Flutter のバックエンド #FlutterKaigi

FlutterKaigi 2026
https://2026.flutterkaigi.jp/

Day1 / Cupertino / 15:50 – 16:00

Flutter のバックエンドとして AWS Blocks を使えるという紹介 LT

Transcript

1. "AWSはちょっと苦手"でも 大丈夫。 AWS Blocks で手軽に作る Flutter のバックエンド FlutterKaigi 2026 2026/10/29 (Day1) tacck (Kihara, Takuya) FlutterKaigi 2026 #FlutterKaigi 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 GDG Sapporo AWS Community Builder Co-Organizer Since Q2 2021 Category: Front-end Web and Mobile / Dev Tools FlutterKaigi 2026 #FlutterKaigi 2
3. 2026/10/28(水) 札幌市内 FlutterKaigi 2026 #FlutterKaigi 3
4. アプリを作ってサービスリリースしたい • アプリはもちろん Flutter • バックエンドに必要な機能は? • ログイン機能のとユーザー管理をしてくれる IdP • データ永続化のためのデータベース • ユーザーのファイル管理のためのオブジェクトストレージ • etc... FlutterKaigi 2026 #FlutterKaigi 4
5. バックエンドはやっていますか? • 何で作れば良いんだろう? • Dart という選択肢もあるが。。 • インフラ周りをどうすれば? • 言語の問題よりも、場所の問題 FlutterKaigi 2026 #FlutterKaigi 5
6. クラウドインフラはやっていますか? • AWS / Google Cloud / Auzre などなど • どのクラウドのどのサービスをどうやって使えば良いの? • 詳しくないのにやっちゃうと、セキュリティも心配。 FlutterKaigi 2026 #FlutterKaigi 6
7. 本当にやりたいことは何ですか? • サービスをリリースしたい。 • そのために、まずは PoC から始めたい。 • 機能を確認できれば良くて、クラウドが無くても良いよね。 • 確認できたものが、そのままクラウドに持っていけたら最高。 FlutterKaigi 2026 #FlutterKaigi 7
8. そんなあなたに AWS Blocks • 2026年6月に発表された、新しいフレームワーク。 https://aws.amazon.com/jp/about-aws/whats-new/2026/06/aws-blocks-preview/ FlutterKaigi 2026 #FlutterKaigi 8
9. AWS Blocks とは AWS Blocks is a backend toolkit for building full-stack applications on AWS. Each Block is a self-contained backend capability. It bundles your application code, a local development setup, and the infrastructure to run it. Every Block works with every other Block, so any combination produces a functioning backend. Pick the ones you need, combine them, and AWS Blocks automatically defines the 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 anything. https://docs.aws.amazon.com/blocks/latest/devguide/what-is-blocks.html FlutterKaigi 2026 #FlutterKaigi 9
10. AWS Blocks とは (私のまとめ) バックエンドを機能単位で Block (アプリケーションコードの塊) 化。 Block を定義し、組み合わせることで、ローカルでも AWS 上でも動かすこ とができる。ローカルで動く状態のまま、コード変更無しに AWS へデプロ イできる。 ローカルで動かすだけなら AWS アカウント不要。 AWS へのデプロイも、ベストプラクティスに沿った形。 FlutterKaigi 2026 #FlutterKaigi 10
11. AWS Blocks とは (私のまとめ) バックエンドを機能単位で Block (アプリケーションコードの塊) 化。 Block を定義し、組み合わせることで、ローカルでも AWS 上でも動かすこ とができる。ローカルで動く状態のまま、コード変更無しに AWS へデプロ イできる。 すぐに試せる ローカルで動かすだけなら AWS アカウント不要。 AWS へのデプロイも、ベストプラクティスに沿った形。 詳しくなくても (多少は)安心 FlutterKaigi 2026 #FlutterKaigi 11
12. AWS Blocks の使い方 • Flutter プロジェクト作成 • AWS Blocks 追加 • AIと一緒に開発 • AGENTS.md も整備されているので、スムーズに使える。 FlutterKaigi 2026 #FlutterKaigi 12
13. 例えば PoC でアプリを作りたい • 画像をアップロードして、管理するアプリを作りたい。 • 複数ユーザー • 写真のアップロード・削除 • いいね • バックエンドの要件は? • ユーザー認証 • 画像の保存 (オブジェクトストレージ) • 画像情報の保存・表示 (データベース) • 登録されたデータをユーザー間で連携 (リアルタイム通信) • これらを動かすクラウドインフラ FlutterKaigi 2026 #FlutterKaigi 13
14. 今回使う AWS Blocks のブロック Category Block AWS service 説明 Authentication AuthBasic Amazon DynamoDB + JWT 認証 Data and storage DistributedTable Amazon DynamoDB データベース (NoSQL) Data and storage FileBucket Amazon S3 オブジェクトストレージ API ApiNamespace Amazon API Gateway REST API (ドキュメント に無いが利用されている) Communication Realtime Amazon API Gateway WebSocket WebSocket Pub/Sub FlutterKaigi 2026 #FlutterKaigi 14
15. AWS Blocks でブロック定義 Authの場合 TypeScript でブロック定義 Dart を生成 FlutterKaigi 2026 #FlutterKaigi 15
16. AWS Blocks でブロック定義 生成したメソッドを Widget 内から呼び出し FlutterKaigi 2026 #FlutterKaigi
17. デモ • Flutter (macOS / Web) で 同じバックエンドを共有して確認。 FlutterKaigi 2026 #FlutterKaigi 17
18. sandbox を使うなら $ aws sso login --profile your_profile $ cd aws-blocks-dir $ npm run sandbox … (しばらく待ちます) … Outputs: your-prefix-eXXXXX-xxxx-fXXXXX.ApiUrl = https://XXXXXXXXXX.execute-api.ap-northeast1.amazonaws.com/prod/aws-blocks/api your-prefix-eXXXXX-xxxx-fXXXXX.DefaultComputeAPIEndpoint9FCD6A84 = https://XXXXXXXXXX.execute-api.apnortheast-1.amazonaws.com/prod/ your-prefix-eXXXXX-xxxx-fXXXXX.RealtimeWsUrl = wss://YYYYYYYYYY.execute-api.ap-northeast-1.amazonaws.com/rt … $ FlutterKaigi 2026 #FlutterKaigi 18
19. まとめ • AWS Blocks で Flutter 向けのバックエンド機能を作れる • 開発用であれば、ローカルPC内で完結 • sandbox で、安全にクラウドでの動作も確認可能 • まだ Preview (2026/10/24) なので、本番で使うのは今後 • Flutter 版はまだ素直に使えない箇所もある • OSS なのでコントリビュートしていこう!! • 伸び代のあるフレームワークを、 みんなで伸ばしていこう!! FlutterKaigi 2026 #FlutterKaigi 19