Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

1

Share

Download to read offline

LINE LIFF with Azure ハンズオン資料 - Azure サービス解説

Download to read offline

ハンズオンで使用した資料です。

LINE ∞ MS Developers ミニアプリNight
https://msdevjp.connpass.com/event/188224/

Related Books

Free with a 30 day trial from Scribd

See all

LINE LIFF with Azure ハンズオン資料 - Azure サービス解説

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

    Nov. 10, 2020

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

Views

Total views

584

On Slideshare

0

From embeds

0

Number of embeds

255

Actions

Downloads

4

Shares

0

Comments

0

Likes

1

×