ハンズオンで使用した資料です。 LINE ∞ MS Developers ミニアプリNight https://msdevjp.connpass.com/event/188224/

1. Azure サービス解説
LINE ∞ MS Developers ミニアプリNight
https://msdevjp.connpass.com/event/188224/

2. Self introduction
自己紹介

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 の高い的なイメージを払しょくしたい…！）

6. 概要
ハンズオンのコンテンツ説明

7. 試しに、ミニゲームをつくってみた
• 直前の回で選択された色を当てるゲーム
• プレイヤーは自分だけとは限らない

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

24. 実際にやってみましょう！
セルフペースドハンズオンをご一緒に
https://github.com/dzeyelid/line-liff-with-azure-handson