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

by sumihiro3

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

⾃⼰紹介

Slide 3

Slide 3 text

加川澄廣（かがわすみひろ） 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

Slide 4

Slide 4 text

本⽇のテーマ

Slide 5

Slide 5 text

LINE Platform Application Serverless Architecture 5

Slide 6

Slide 6 text

サーバーレスとは︖

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Webhook イベントの受け付けとリプライ（Messaging API / LINE Bot） 20

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

LIFF アプリ on SPA 36

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

開発事例

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

まとめ

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

宣伝

Slide 61

Slide 61 text

書籍「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