LINE LIFF with Azure ハンズオン資料 - Azure サービス解説
2 likes441 views
ハンズオンで使用した資料です。 LINE ∞ MS Developers ミニアプリNight https://msdevjp.connpass.com/event/188224/
LINE LIFF with Azure ハンズオン資料 - Azure サービス解説
- 1. Azure サービス解説 LINE ∞ MS Developers ミニアプリNight https://msdevjp.connpass.com/event/188224/
- 3. Azure 陣営 Kazumi OHIRAAtsushi YOKOHAMA Microsoft MVP for AI Microsoft MVP for Azure ↑Azureもつよ強の先輩
- 4. ことの発端
- 5. 今回の要件とお気持ち • LIFF (LINE Front-end Framework) を使って何かしよう！ • ぜひ、静的サイトをホストするのに最適な Azure Static Web Apps をご紹介したい！ • LINEログインによる情報を使って、何かできるようにしよう！ • サーバレスでデータベースを使う例をご紹介したい • （Azure の高い的なイメージを払しょくしたい…！）
- 8. 試しに、ミニゲームをつくってみた • 直前の回で選択された色を当てるゲーム • プレイヤーは自分だけとは限らない • が、センスがありませんでした… （連打するとずっと勝ち続けてしまう… （まぁ、今回はゲームの中身は重要ではないので…
- 9. 構成 LIFF (LINE Front-end Framework) Microsoft Azure Azure Static Web Apps + Azure Functions Azure Cosmos DB
- 10. Cosmos DB に保存するデータ構造 global-results {stage: {id: default}, selectedColor: …} {stage: {id: default}, selectedColor: …} {stage: {id: default}, selectedColor: …} {stage: {id: beginner-cup}, selectedColor: …} {stage: {id: beginner-cup}, selectedColor: …} … {lineUser: {id: user1}, selectedColor: …} {lineUser: {id: user1}, selectedColor: …} {lineUser: {id: user2}, selectedColor: …} {lineUser: {id: user2}, selectedColor: …} {lineUser: {id: user2}, selectedColor: …} … player-results 全体のゲーム結果から、前回選択 された色を判定 ユーザーごとの結果も保持
- 11. Azure で静的サイトをホストする Azure Static Web Apps、Azure Functions、Azure Cosmos DB
- 12. Azure Static Web Apps • 静的フロント エンドにフォーカスした PaaS • 様々なフレームワークに対応 • Angular、React、Vue、 Svelte など多数 • 静的フロント エンドに必要な機能がそろっている • GitHub Actions を利用した CI/CD 環境 • APIなどのバックエンドとして Azure Functions が統合されている • 認証機構を簡単に利用できる • Azure AD、GitHub、Facebook、Google、Twitter によるログイン • 現在プレビュー公開中
- 13. Azure Functions • イベント駆動のサーバレス コンピューティングプラットフォーム、FaaS • HTTPリクエストやキューなど、さまざまなイベントを起点に実行 • さまざまな言語で利用可能 • C#、JavaScript/TypeScript、Java、Python、PowerShell など • Durable Functions • ステートフルなファンクションを実装できる（待機中は無課金） • Application Insights によるモニタリング
- 14. Azure Cosmos DB • NoSQLデータベース • 可用性が高い、スケーラブル • 性能 (≒料金)は、秒間に処理できるスループット (RU: Request Units) • データの変更を検知して処理をトリガーする Change feed が秀逸 • コマンド クエリ責務分離（CQRS）パターンの実装に最適
- 15. 細かいポイント紹介
- 16. GitHub Action • Azure Static Web Apps への継続的デプロイを GitHub Actions で行っている • Azure Static Web Apps Deploy · Actions · GitHub Marketplace • 他のアクションと組み合わせたり、プルリクエストなど GitHub の機能 と連携して利用できるので可能性広がる！
- 17. Azure Functions の料金形態 • 頻繁に使わないなら従量課金プラン • ホットスタートが必要なら App Service プラン（AlwaysOn 有効） • 利用頻度が高いなら Premium プラン • 神ブログ記事 • Azure App Service の新しい Premium V3 インスタンスが使えるように なった - しばやん雑記
- 18. Azure Cosmos DB の運用 • Free Tier • Azure Cosmos DB での開発とテストのための最適化 | Microsoft Docs • サーバーレスプラン • Azure Cosmos DB の従量課金ベースのサーバーレス プラン | Microsoft Docs • 神ブログ記事 • Azure Cosmos DB Free Tier をプロダクション環境で使う - PaaSがかり の部屋 • Hack Azure! #2 Ask the Geeks - Cosmos DB 編フォローアップ - し ばやん雑記
- 19. Functions から Cosmos DB を使うには • Azure Functions には、イベント駆動するためのトリガーや入出力を 簡単に連携できバインドという機能がある • Azure Functions のトリガーとバインド | Microsoft Docs • より複雑な操作は SDK が便利 • JavaScript および Node.js 開発者向けの Azure | Microsoft Docs • 今回は両方使ってます
- 20. Cosmos DB のパーティションの話 global-results {stage: {id: default}, selectedColor: …} {stage: {id: default}, selectedColor: …} {stage: {id: default}, selectedColor: …} {stage: {id: beginner-cup}, selectedColor: …} {stage: {id: beginner-cup}, selectedColor: …} … {lineUser: {id: user1}, selectedColor: …} {lineUser: {id: user1}, selectedColor: …} {lineUser: {id: user2}, selectedColor: …} {lineUser: {id: user2}, selectedColor: …} {lineUser: {id: user2}, selectedColor: …} … player-results
- 21. Cosmos DB のパーティションの話 global-results {stage: {id: default}, selectedColor: …} {stage: {id: default}, selectedColor: …} {stage: {id: default}, selectedColor: …} {stage: {id: beginner-cup}, selectedColor: …} {stage: {id: beginner-cup}, selectedColor: …} … {lineUser: {id: user1}, selectedColor: …} {lineUser: {id: user1}, selectedColor: …} {lineUser: {id: user2}, selectedColor: …} {lineUser: {id: user2}, selectedColor: …} {lineUser: {id: user2}, selectedColor: …} … player-results /stage/id をパーティションキーに指定 /lineUser/id をパーティションキーに指定
- 22. Cosmos DB のパーティションの話 global-results {stage: {id: default}, selectedColor: …} {stage: {id: default}, selectedColor: …} {stage: {id: default}, selectedColor: …} {stage: {id: beginner-cup}, selectedColor: …} {stage: {id: beginner-cup}, selectedColor: …} … {lineUser: {id: user1}, selectedColor: …} {lineUser: {id: user1}, selectedColor: …} {lineUser: {id: user2}, selectedColor: …} {lineUser: {id: user2}, selectedColor: …} {lineUser: {id: user2}, selectedColor: …} … player-results /stage/id をパーティションキーに指定 /lineUser/id をパーティションキーに指定 パーテイションをまたがった探索 （クロスパーティション） がないよう注意！ = RUを大量に消費してしまい、 金額が跳ね上がる
- 23. Infrastructure as Code (IaC) • Azureで使うリソースは ARM テンプレートを用いて一括でデプロイ • テンプレートの概要 - Azure Resource Manager | Microsoft Docs • Terraform も Azure で利用できるが、Static Web Apps がまだ 対応してないので待ち • Azure 上の Terraform のドキュメント - チュートリアル、サンプル、リファレン ス、リソース - Terraform | Microsoft Docs