$30 off During Our Annual Pro Sale. View Details »

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

Kazuki Miura
December 17, 2022

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

Kazuki Miura

December 17, 2022
Tweet

More Decks by Kazuki Miura

Other Decks in Technology

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