サーバレスでVODとECをリニューアルして、さらにくっつけてみました！

Transcript

1. サーバレスでVODとECを
   リニューアルして
   さらにくっつけてみました！
   三浦一樹 @miu_crescent
   

   View Slide

2. 三浦一樹 HTB
   自社サービスの
   開発チームのキャプテン
   開発初めてやっと
   3年経ちました
   AWS + SaaS が多い
   with
   

   View Slide

3. システムを作りたいんじゃない
   
   
   ビジネスをしたいんだ
   

   View Slide

4. View Slide

5. EVENTDRIVEN
   EVENTDRIVEN
   EVENTDRIVEN
   

   View Slide

6. VPC LESS
   VPC LESS
   VPC LESS
   OS
   　LESS
   OS
   　LESS
   OS
   　LESS
   EVENTDRIVEN
   EVENTDRIVEN
   EVENTDRIVEN
   

   View Slide

7. 2019年はお世話になりました
   

   View Slide

8. いいぞ！ いいぞ！
   いいぞ！
   いろんな人にオススメされて
   

   View Slide

9. 素直に全部やってみました
   

   View Slide

10. 2020.10〜
    有料ライブ配信
    ライブコマース
    ライブコマース
    イベント
    2019.10〜 2020.05〜 2020.07〜 2020.10〜
    有料ライブ配信 Lift & Shift VODオフロード
    完全リニューアル
    2021.04〜 2021.08 〜
    2021.10〜
    リニューアル
    ちょっとだけ
    サーバーレス化
    2022.04 〜
    2022.03〜
    React
    GraphQL
    TypeScript
    Nuxt.js
    JavaScript
    開発 完全リニューアル 完全リニューアル
    福岡以降でリリースしたやつ
    2022.09 〜
    固定化
    Lambda
    

    View Slide

11. 2020.10〜
    有料ライブ配信
    ライブコマース
    ライブコマース
    イベント
    2019.10〜 2020.05〜 2020.07〜 2020.10〜
    有料ライブ配信 Lift & Shift VODオフロード
    完全リニューアル
    2021.04〜 2021.08 〜
    2021.10〜
    リニューアル
    ちょっとだけ
    サーバーレス化
    2022.04 〜
    2022.03〜
    React
    GraphQL
    TypeScript
    Nuxt.js
    JavaScript
    開発 完全リニューアル 完全リニューアル
    2022.09 〜
    固定化
    Lambda
    福岡以降でリリースしたやつ
    

    View Slide

12. VOD EC
    2012年4月から 2005年9月から
    

    View Slide

13. VOD EC
    2012年4月から 2005年9月から
    Lift & Shift
    やだ！！！
    

    View Slide

14. VOD EC
    2012年4月から 2005年9月から
    共通垢運用
    したい！
    

    View Slide

15. VOD EC
    3
    ヶ月くらいで
    フルスクラッチ 3
    ヶ月くらいで
    フルスクラッチ
    2012年4月から 2005年9月から
    

    View Slide

16. 2022.04.28 〜
    2022.03.01 〜
    社内外の声から
    大小合わせて
    100以上の
    機能改善
    

    View Slide

17. View Slide

18. 放送業界で賞をもらいまいた！
    

    View Slide

19. アーキテクチャ紹介
    

    View Slide

20. ワーナー先生が紹介してくれましたw
    

    View Slide

21. DynamoDB
    DynamoDB
    DynamoDB
    AppSync
    Amplify
    Amplify
    BFF
    ざっくりアーキテクチャ
    Frontend Backend
    

    View Slide

22. S3 S3
    DynamoDB
    DynamoDB
    DynamoDB
    AppSync
    Amplify
    Amplify
    BFF
    ざっくりアーキテクチャ
    Frontend Backend
    MediaConvert
    

    View Slide

23. S3 S3
    DynamoDB
    DynamoDB
    DynamoDB
    AppSync
    Amplify
    Amplify
    BFF
    ざっくりアーキテクチャ
    Frontend Backend
    MediaConvert
    

    View Slide

24. S3 S3
    DynamoDB
    DynamoDB
    DynamoDB
    AppSync
    Lambda
    API-GW
    Amplify
    Amplify
    BFF
    ざっくりアーキテクチャ
    Frontend Backend
    MediaConvert
    

    View Slide

25. S3 S3
    DynamoDB
    DynamoDB
    DynamoDB
    AppSync
    Lambda
    API-GW
    Step Functions
    API-GW
    Amplify
    Amplify
    BFF
    ざっくりアーキテクチャ
    Frontend Backend
    MediaConvert
    

    View Slide

26. S3 S3
    DynamoDB
    DynamoDB
    DynamoDB
    AppSync
    Lambda
    API-GW
    Step Functions
    API-GW
    Amplify
    Amplify
    BFF
    ざっくりアーキテクチャ
    Frontend Backend
    OIDC
    OIDC
    OIDC
    MediaConvert
    

    View Slide

27. S3 MediaConvert S3
    DynamoDB
    DynamoDB
    DynamoDB
    AppSync
    Lambda
    API-GW
    Step Functions
    API-GW
    Amplify
    Amplify
    担当者向け
    CMS
    倉庫
    システム
    BFF
    ざっくりアーキテクチャ
    Frontend Backend
    OIDC
    OIDC
    OIDC
    

    View Slide

28. AWS Amplify
    

    View Slide

29. Amplify backend
    amplify-cli
    DynamoDB
    DynamoDB
    DynamoDB
    AppSync
    BFF
    Backend
    スキーマを書いて
    AppSync
    の裏にある
    DynamoDB
    と
    その connection
    を定義し
    てデプロイ
    

    View Slide

30. Amplify backend
    +
    

    View Slide

31. Amplify backend
    40
    +
    DynamoDB
    Tables
    

    View Slide

32. Amplify backend
    amplify-cli
    Dynamo
    のテーブル同士を
    connection
    する。 マイページに
    表示したいデータ
    AppSync
    は
    amplify-CLI
    しばり
    AppSync
    を経て
    一発で欲しいデータにアク
    セスできるように構築
    

    View Slide

33. Amplify backend
    GraphQL Transformer v1
    のままです
    GraphQL Transformer v2
    で新しくなったけど
    一部機能が実現できなくな
    ったので、まだ更新できて
    ないです、、、
    

    View Slide

34. AWS AppSync
    

    View Slide

35. AppSync
    DynamoDB
    DynamoDB
    DynamoDB
    AppSync
    Lambda
    API-GW
    Step Functions
    API-GW
    BFF
    query
    mutation
    subscription
    GraphQL API
    Pub/Sub API
    

    View Slide

36. AppSync
    DynamoDB
    DynamoDB
    DynamoDB
    AppSync
    BFF
    query
    GraphQL API
    フロント側で好きなデータ
    を持ってこれる
    基本的に最初に全部持ってき
    て、フロントで保持しちゃう
    検索はフロントだけで実現
    

    View Slide

37. AppSync
    DynamoDB
    DynamoDB
    DynamoDB
    AppSync
    Lambda
    BFF
    mutation
    mutation
    subscription
    Pub/Sub API
    

    View Slide

38. AppSync
    DynamoDB
    DynamoDB
    DynamoDB
    AppSync
    Lambda
    BFF
    mutation
    mutation
    subscription
    Pub/Sub API
    websocket
    リロード無しで
    画面更新が可能
    

    View Slide

39. View Slide

40. AppSync
    クォータ が
    ちょっと特殊
    トークン消費量
    に注意
    

    View Slide

41. AWS Step Functions
    

    View Slide

42. 100
    State
    machines
    Step Functions
    +
    DynamoDB
    DynamoDB
    DynamoDB
    AppSync
    Step Functions
    API-GW
    BFF
    

    View Slide

43. z
    Step Functions
    DynamoDB
    DynamoDB
    DynamoDB
    AppSync
    Step Functions
    API-GW
    BFF
    Lambda
    API-GW
    API-GW
    ＋ Lambda
    っていう構成がどんどん
    Step Functions
    に変化していった
    ＞
    Step Functions
    の中のLambda
    もゼロにしたいなぁ
    

    View Slide

44. Step Functions
    Workflow Studio
    がすごい！！
    

    View Slide

45. Step Functions
    GUI
    で作れる
    ASL
    とかYAML
    はもう
    触らない
    できたらYAML
    コピ
    って sls
    いれれCI/CD
    SDK
    が直接叩ける
    これが爆速で最高
    

    View Slide

46. Step Functions
    Step Functions
    複雑な処理ってみなさん
    どうやってやってますか？
    

    View Slide

47. 注文履歴
    create
    決済処理
    〉 〉
    発注履歴
    作成
    発送情報
    発送リスト
    create
    〉
    発送指示
    外部流通サービス
    〉
    注文履歴
    update
    更新
    

    View Slide

48. 注文履歴
    create
    決済処理
    〉 〉
    発注履歴
    作成
    発送情報
    発送リスト
    create
    〉
    発送指示
    外部流通サービス
    〉
    注文履歴
    update
    更新
    

    View Slide

49. 決済処理
    メール送信
    ユーザ向けデータ
    保存 kintone
    用保存
    MAP
    担当
    社内用保存 配送業者用保存
    ユーザが待つのは
    ここまで
    購入確定ボタン押した後
    

    View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. 決済処理
    メール送信
    ユーザ向けデータ
    保存 kintone
    用保存
    MAP
    担当
    社内用保存 配送業者用保存
    ユーザが待つのは
    ここまで
    落ちた時、再起しやすい単位で分割
    

    View Slide

56. 決済処理
    メール送信
    ユーザ向けデータ
    保存 kintone
    用保存
    MAP
    担当
    社内用保存 配送業者用保存
    ユーザが待つのは
    ここまで
    Design for Failure
    再起動したら
    メールとか飛んじ
    ゃう
    再起動しても影響
    がない様に分割
    

    View Slide

57. Step Functions
    Step Functions
    複雑な処理ってみなさん
    どうやってやってますか？
    ツイートとかLT
    とかで教えて！！
    

    View Slide

58. こういう細かい話も
    サーバーレスコミュニティで
    共有していきたい！
    

    View Slide

59. 札幌にて
    オフラインで会いましょう!!
    三浦一樹 @miu_crescent
    

    View Slide