Upgrade to Pro — share decks privately, control downloads, hide ads and more …

サーバーレス環境で スピーディーに構築するLINE Platform アプリ

sumihiro3
November 14, 2020

サーバーレス環境で スピーディーに構築するLINE Platform アプリ

LPF REVUP 2020 大阪トラック登壇資料
https://revup.jp/

sumihiro3

November 14, 2020
Tweet

More Decks by sumihiro3

Other Decks in Programming

Transcript

  1. αʔόʔϨε؀ڥͰ
    εϐʔσΟʔʹߏங͢Δ
    -*/&1MBUGPSNΞϓϦ
    LPF REVUP 2020
    େࡕτϥοΫ 2020.11.14
    Sumihiro Kagawa

    View Slide

  2. ⾃⼰紹介

    View Slide

  3. 加川 澄廣(かがわ すみひろ)
    n Keywords
    l LINE API Expert
    l python , TypeScript, Nuxt.js,
    AWS, GCP
    l “LINE Pay API SDK for python“
    Contributor
    sumihiro3 sumihiro.kagawa
    3

    View Slide

  4. 本⽇のテーマ

    View Slide

  5. LINE Platform
    Application
    Serverless
    Architecture
    5

    View Slide

  6. サーバーレスとは︖

    View Slide

  7. サーバーが無い︖
    ではなく
    7

    View Slide

  8. サーバーの存在を
    意識しない
    8

    View Slide

  9. サーバーレス
    nサーバーの存在を意識しない
    サーバー管理
    スケーリング調整
    ⾼可⽤性確保
    リソース・コスト調整
    9

    View Slide

  10. サーバーレス
    nサーバーの存在を意識しない
    サーバー管理
    スケーリング調整
    ⾼可⽤性確保
    リソース・コスト調整
    サービス開発に注⼒できる
    10

    View Slide

  11. サーバーレス
    nいいこと尽くめでもない
    ⾃由度が低い
    監視対象数は増加しがち
    開発前に決めておくことは多い
    開発費⽤は⾼くなるかも
    11

    View Slide

  12. サーバーレス
    n導⼊が向いているケース
    スタートアップ
    新規事業
    機能要件の更新頻度が⾼い事業
    規模等の⾒積もりが難しい事業
    12

    View Slide

  13. サーバーレス・アーキテクチャの詳細
    は、専⾨記事などをご参照ください
    https://aws.amazon.com/jp/serverless/patterns/serverless-pattern/ 13

    View Slide

  14. LINE Platform アプリと
    サーバーレス
    との親和性

    View Slide

  15. LINE pf アプリ と サーバーレス との親和性
    nLINE の特徴
    Ø ユーザーが⽇常使うサービス
    Ø ユーザーとの距離が近すぎる(良い意味で)
    Ø ミニアプリ普及でもっと⽣活に密接なる
    15

    View Slide

  16. LINE pf アプリ と サーバーレス との親和性
    nそのため、LINE 上で動くサービスは更新頻度が⾼い
    Ø ユーザーを飽きさせない
    Ø 状況に応じて新しいことをどんどん取り込む
    - 利⽤状況の変化
    - ニューノーマルなど世情の変化
    Ø 実験的なサービスをやりやすい など
    16

    View Slide

  17. LINE pf アプリ と サーバーレス との親和性
    nLINE Platform 上で動かすアプリでの特徴
    認証は LINE 側で実施
    ステートレスを求められがち
    ⾮同期処理がしやすい API 構成
    UI は LINE アプリに依存しがち
    17

    View Slide

  18. LINE pf アプリ と サーバーレス との親和性
    nLINE Platform 上で動かすアプリでの特徴
    認証は LINE 側で実施
    ステートレスを求められがち
    ⾮同期処理がしやすい API 構成
    αʔόʔϨεͱͷ
    ਌࿨ੑ͕ߴ͍
    UI は LINE アプリに依存しがち
    18

    View Slide

  19. LINE Platform アプリ
    での
    サーバーレスアーキテクチャ
    の使い所

    View Slide

  20. Webhook イベントの
    受け付けとリプライ
    (Messaging API / LINE Bot)
    20

    View Slide

  21. LINE Bot (Messaging API)
    nWebhook イベントの受け付けとリプライ
    Message, Follow, Post back, Beacon etc.
    Webhook event
    Reply API
    21

    View Slide

  22. Webhook イベントの受け付けとリプライ
    nWebhook イベントの受け付けとリプライ処理の流れ
    Webhook event リクエストの
    レスポンスでなくてOK︕
    Webhook event
    Reply API
    22

    View Slide

  23. Webhook イベントの受け付けとリプライ
    nWebhook イベントの受け付けとリプライ処理の流れ
    Webhook event リクエストの
    レスポンスでなくてOK︕
    Webhook event
    Reply API
    ඇಉظͰ0,ʂ
    23

    View Slide

  24. Webhook イベントの受け付けとリプライ
    nWebhook イベントのリクエスト受け付けと、リ
    プライは同⼀リクエスト内ではなくてよい
    Webhook
    event
    Response
    レスポンス = リプライ ではない
    24

    View Slide

  25. Webhook イベントの受け付けとリプライ
    n Webhook イベント受け付けと、リプライは分けて実⾏
    l Webhook リクエストへのレスポンスは即返す
    l イベント処理はQueue を挟んで⾮同期での処理後に返す
    Webhook
    event
    Response
    Reply API
    Webhook処理 ビジネスロジック
    Reply API 実行
    25

    View Slide

  26. Webhook処理 ビジネスロジック
    Reply API 実行
    Webhook イベントの受け付けとリプライ
    n Webhook イベント受け付けと、リプライは分けて実⾏
    l Webhook リクエストへのレスポンスは即返す
    l イベント処理はQueue を挟んで⾮同期での処理後に返す
    Webhook
    event
    Response
    Reply API
    Webhook event の
    振り分けのみ実施
    実際のロジックは
    ⾮同期の後続で実施
    Reply には時間的な
    余裕あり(数⼗秒程度)
    26

    View Slide

  27. Webhook処理 ビジネスロジック
    Reply API 実行
    Webhook イベントの受け付けとリプライ
    n 受け付けと処理・リプライを分ける⽬的
    l ユーザーへのレスポンスを優先
    l 責任分界点の明確化
    Ø ビジネスロジックはLINE API への依存を薄くして他 Platform へも展開可とする
    Ø 単体テストをしやすく
    Webhook
    event
    Response
    Reply API
    LINE の「Webhookイベント
    オブジェクト」への依存は
    ここで留める
    ビジネスロジックは
    LINE API への依存を
    薄くする
    頻繁に利⽤する API
    実⾏処理は分離・共通化
    27

    View Slide

  28. Messaging API
    実⾏エラー時の
    リトライ処理
    28

    View Slide

  29. Messaging API 実⾏エラー時のリトライ処理
    nAPI 再実⾏時に “リトライキー” を設定していないと
    https://developers.line.biz/ja/docs/messaging-api/retrying-api-request/
    スクリーンショット 2020-11-10 13.44.02
    "1* ϦΫΤετ͕
    ೋॏͰ࣮ߦ͞ΕΔ৔߹΋
    29

    View Slide

  30. Messaging API 実⾏エラー時のリトライ処理
    nAPI 実⾏エラーに備え “リトライキー” の設定が推奨
    https://developers.line.biz/ja/docs/messaging-api/retrying-api-request/
    スクリーンショット 2020-11-10 13.44.02
    -*/&QGଆͰೋॏ࣮ߦΛ
    ੍ޚͯ͘͠ΕΔ
    30

    View Slide

  31. Messaging API 実⾏エラー時のリトライ処理
    nとはいえ、リトライ判別処理を各所に実装︖
    スクリーンショット 2020-11-10 13.44.02
    https://developers.line.biz/ja/docs/messaging-api/retrying-api-request/ 31

    View Slide

  32. Messaging API 実⾏エラー時のリトライ処理
    n ビジネスロジックからAPI 実⾏処理を分離
    l 責任分界点の明確化
    Ø ビジネスロジックに LINE API 独⾃の仕様を
    混⼊しない
    "1* ࣮ߦ
    3FUSZLFZ
    3FUSZLFZ
    3FUSZLFZ
    3FUSZLFZ
    ビジネスロジックから
    API 実⾏処理を分離する
    ビジネスロジック
    LINE API 実行
    32

    View Slide

  33. Messaging API 実⾏エラー時のリトライ処理
    n ビジネスロジックからAPI 実⾏処理を分離
    l API 実⾏側でもインフラに任せられる部分(リトライ)は任せる
    Ø インフラ側で担保されているのであれば、
    むやみに⾃前で実装しない
    "1* ࣮ߦ
    API 実⾏エラーが発⽣しても
    Queue のリトライ機能で安全に
    再実⾏できる
    Push API などの実⾏処理を共通化し、
    リクエスト拒否(Conflict) 時は
    再実⾏しないようにしておく
    3FUSZLFZ
    3FUSZLFZ
    3FUSZLFZ
    3FUSZLFZ ビジネスロジック
    LINE API 実行
    33

    View Slide

  34. ユーザー⾏動履歴の記録・分析
    34

    View Slide

  35. ユーザー⾏動履歴の記録・分析
    n ユーザーへの即応を優先
    l ⾏動履歴の記録や分析など、即応が求められないものは極⼒⾮同期で処理する
    Ø その他
    - エラー通知、課⾦に必要なサービス利⽤履歴の記録など
    ユーザーへのレスポンスは
    最優先で返す
    形式が求められない場合は
    既存の可視化ツールを活⽤
    (kintone, QuickSight など)
    データ分析⽤の処理はDB トリガーや
    定期実⾏などで後から処理する
    35

    View Slide

  36. LIFF アプリ on SPA
    36

    View Slide

  37. LIFF アプリ on SPA
    nLINE アプリ(Native app)上のアプリだからこそ
    ページ切り替えを素早く⾏う
    l ユーザーからすれば Native app/Web app の違いなど気に
    しない
    Ø 逆に⾔うと Native app 相当のものが求められる
    現状、SPA (Single Page App) を選択
    37

    View Slide

  38. LIFF アプリ on SPA
    nSPA + クラウドストレージ + CDN
    l LIFF アプリやミニアプリには、従来のWeb アプリと⽐べ、
    画⾯切り替え時間が短い SPA を選択
    SPA 部分のアプリリソースをS3 に
    配置し、CloudFront でCDN 配信する
    BFF (Backend For Frontend)
    となる API は
    API Gateway + Lambda で展開する
    38

    View Slide

  39. SSG x LIFF で
    静的サイトを LIFF アプリ化
    39

    View Slide

  40. SSG x LIFF で静的サイトを LIFF アプリ化
    nLIFF を静的サイトに組み込んでユーザー⾏動を分析
    l オウンドメディアやブログを LIFF アプリ化
    Ø サイト上で実⾏される LIFF SDK (JS) でLINE ログインす
    ることでユーザー識別も可能
    - LINE アプリ上で表⽰すれば、ログイン操作不要でユーザー識別可
    - LIFF SDK は LINE アプリ内ブラウザ以外にも対応しているため、既存サイ
    トにも簡単に適⽤できる
    40

    View Slide

  41. SSG x LIFF で静的サイトを LIFF アプリ化
    n Headless CMS + SSG(Static Site Generator) + LIFF SDK
    l CMS でのコンテンツ更新時に、コンテンツを静的サイトとして⽣成
    Ø アクセスの度にDB 等へアクセスしないので⾼速
    - いわゆる JAMStack 構成
    メディア担当者などが CMS で
    記事を更新時にビルド(SSG)実⾏
    SPA と同様にサイトリソースをS3 に
    配置し、CloudFront でCDN 配信する
    LIFF SDK で LINE ログインや、
    ShareTargetPicker などを利⽤できる
    41

    View Slide

  42. 開発事例

    View Slide

  43. LPF REVUP 2020 Landing Page
    n静的サイト + LIFF を JAMStack 構成で構築
    l LIFF + Headless CMS + SSG の例
    Ø 登壇情報の配信 + 予約状況の表⽰
    - セッション情報などのコンテンツは microCMS へ事務局担当者が投稿
    • 投稿をトリガーにして、SSG がメディアサイトをビルド
    - CDN であるNetlify へ配信
    - 予約状況は connpass API を実⾏してセッションページなどに表⽰
    - ShareTargetPicker などの LIFF 機能を利⽤
    43

    View Slide

  44. 44

    View Slide

  45. 頻繁に利⽤する API
    実⾏処理は分離・共通化
    予約状況のみ外部API で
    都度取得
    45

    View Slide

  46. 46

    View Slide

  47. LPF REVUP 2020 Landing Page
    n システム構成
    l Headless CMS
    Ø microCMS
    l SSG
    Ø Nuxt.js (Full static generation)
    l CDN
    Ø Netlify Hosting
    l BFF
    Ø Netlify functions
    l CD
    Ø Netlify
    47

    View Slide

  48. LPF REVUP 2020 LP (https://revup.jp)
    Netlify Functions
    REVUP 事務局
    microCMS Netlify
    NuxtJS
    Vue.js LIFF
    開発者 GitHub
    connpass Speaker Deck
    更新通知
    コンテンツ取得
    ビルド&デプロイ
    git push
    更新通知
    ソースコード取得
    システム構成図
    セッション、スピーカー
    などのイベント情報編集
    参加者
    サイト閲覧・申込み
    48

    View Slide

  49. C向けオンライン予約システム
    nBot + LIFF でサービス提供
    l 予約フォーム
    Ø 予約データを⼊⼒すると BFF 経由で記録、予約担当者へ通知
    l 診断フォーム
    Ø LIFF アプリ上でいくつかの質問に回答してデータ収集、BFF
    経由でユーザー情報としてデータ登録
    - データ記録と並⾏して、分析データをS3 へ保管し
    データ分析(Firehose + Athena + Lambda + QuickSight)へ
    49

    View Slide

  50. C向けオンライン予約システム
    n システム構成
    l フロント
    Ø SPA (Nuxt.js) + S3 + CloudFront
    l BFF
    Ø API Gateway + Lambda + DynamoDB + SQS + SNS (Email +
    kintone)
    l データ分析
    Ø Firehose + Athena + Lambda + QuickSight
    l CD
    Ø GitHubActions + Zappa
    50

    View Slide

  51. システム構成図
    ユーザー
    SPA (LIFF)
    管理者
    予約・診断
    予約・診断
    予約・診断
    予約・診断
    予約通知
    診断データ分析
    診断データ確認
    ユーザー
    予約・診断
    データ確認
    予約・診断
    51
    BFF
    データ分析

    View Slide

  52. LINE Pay Drink Bar
    nLIFF + LINE Pay API で構築
    l 書籍「 LINE API 実践ガイド」に掲載した実装例
    Ø ドリンクの注⽂・決済・くじ引き
    - LIFF アプリ
    • 商品⼀覧での選択
    • ドリンク抽出画⾯でのプログレス表⽰
    • くじびき抽選など
    - サーバーサイド
    • LINE Pay API、obniz Cloud と連携
    52

    View Slide

  53. ঎඼Ұཡ ܾࡁ࣮ߦ ܾࡁ׬ྃ υϦϯΫநग़ நબ։࢝ நબ׬ྃ
    画⾯遷移
    53

    View Slide

  54. LINE Pay Drink Bar
    n システム構成
    l フロント
    Ø SSR(Nuxt.js) + Google App Engine
    l サーバーサイド
    Ø Nuxt.js + Firestore
    l CD
    Ø GitHubActions + firebase CLI
    l ハードウェア
    Ø obniz + エアーポンプ + シリコンチューブ
    54

    View Slide

  55. 55

    View Slide

  56. 56

    View Slide

  57. LINE Pay Drink Bar
    (ソフトウェア)
    LINE Pay Drink Bar
    (ハードウェア)
    obniz Board
    ユーザー
    LINE
    LINE Front-end
    Framework
    (LIFF)
    エアーポンプ
    Google App
    Engine
    Cloud Firestore
    NuxtJS
    Vue.js
    決済実⾏
    注⽂・決済
    ドリンク注⽂・決済
    システム構成図
    ドリンク抽出
    57

    View Slide

  58. まとめ

    View Slide

  59. まとめ
    nまずやってみる場合サーバーレスを最初の選択肢に
    l 必ず適する訳ではないが、⽴上げ期には良い選択肢
    nLINE Platform アプリとの親和性は⾼い
    l API 実⾏箇所だけ使うのでも良いかも
    n組み合わせは要件次第でいくつものパターン有り
    59

    View Slide

  60. 宣伝

    View Slide

  61. 書籍「LINE API実践ガイド」発売中︕
    nLINE API はコレを⾒れば分かる
    l Expert 達が思い思いに綴った480P
    Ø なんと 8.3円/ページとお買得︕
    Ø 最終章(7.2)のHW 連携を担当
    l 本イベントで
    Twitter キャンペーン
    実施中︕
    https://book.mynavi.jp/ec/products/detail/id=117310
    (税込: 3,993円)
    61

    View Slide

  62. SNS アカウントなど
    @sumihiro3
    Sumihiro.Kagawa
    LINE API Expert
    62

    View Slide

  63. ご清聴
    ありがとうございました︕

    View Slide

  64. E.O.C.

    View Slide