Development of a live commerce system using serverless architecture with a focus on Amplify / AppSync on production

Serverless EC Service with watching Video.

https://jawspankration2021.jaws-ug.jp/en

#jawspankration2021 #jawspankration #jawsug #aws

Transcript

1. %FWFMPQNFOUPGBMJWFDPNNFSDF
   TZTUFNVTJOHTFSWFSMFTTBSDIJUFDUVSF
   XJUIBGPDVTPO"NQMJGZ"QQ4ZOD
   POQSPEVDUJPO
   +"841"/,3"5*0/
   FBSMZJOUIFNPSOJOH
   ,B[VL.JVSB
   

   View Slide

2. Hokkaido Television Broadcasting Co., Ltd.
   Kazuki Miura(35)
   JAWS-UG Sapporo
   Media-JAWS JP_Stripes Sapporo
   Introduction
   ASA(Morning)
   • In-house Development
   • Technology Selection
   • Architecture Design
   • Frontend/Backend Development
   • Product Management
   • Project Management
   • Respond to Inquiries
   

   View Slide

3. amplify-cli
   See the documentation for details.
   https://docs.amplify.aws/
   

   View Slide

4. Live Commerce Service
   Shop with watching Video
   Requirement
   0. NO VPC
   1. Stable Video Distribution
   2. Don’t use brower reload
   3. Don’t open another page
   4. 10,000 viewers at the same time
   

   View Slide

5. AWS
   
   
   Amplify
   Frontend
   Amazon CloudFront
   AWS Elemental
   
   
   MediaPackage
   AWS Elemental
   
   
   MediaLive
   AWS Elemental
   
   
   MediaLink
   DynamoDB
   AWS AppSync
   API Gateway AWS Lambda
   HLS / MPEG-DASH
   Video Switcher
   Auido Mixer
   Step Functions DynamoDB
   DynamoDB
   API Gateway
   OIDC
   CloudFront
   Kinesis
   
   
   Data Streams
   Kinesis
   
   
   Data Firehose
   ElasticSearch
   
   
   Service
   Viewer Count
   S3
   HD-SDI
   A lot of Cameras Event Site (Physical)
   

   View Slide

6. AWS
   
   
   Amplify
   Frontend
   Amazon CloudFront
   AWS Elemental
   
   
   MediaPackage
   AWS Elemental
   
   
   MediaLive
   AWS Elemental
   
   
   MediaLink
   DynamoDB
   AWS AppSync
   API Gateway AWS Lambda
   HLS / MPEG-DASH
   Video Switcher
   Auido Mixer
   Step Functions DynamoDB
   DynamoDB
   API Gateway
   OIDC
   CloudFront
   Kinesis
   
   
   Data Streams
   Kinesis
   
   
   Data Firehose
   ElasticSearch
   
   
   Service
   Viewer Count
   S3
   HD-SDI
   A lot of Cameras Event Site (Physical)
   

   View Slide

7. "84
   7JEFP
   1PXFS
   

   View Slide

8. 'BO
   'BO
   'BO
   

   View Slide

9. AWS
   
   
   Amplify
   Frontend
   Amazon CloudFront
   AWS Elemental
   
   
   MediaPackage
   AWS Elemental
   
   
   MediaLive
   AWS Elemental
   
   
   MediaLink
   DynamoDB
   AWS AppSync
   API Gateway AWS Lambda
   HLS / MPEG-DASH
   Video Switcher
   Auido Mixer
   Step Functions DynamoDB
   DynamoDB
   API Gateway
   OIDC
   CloudFront
   Kinesis
   
   
   Data Streams
   Kinesis
   
   
   Data Firehose
   ElasticSearch
   
   
   Service
   Viewer Count
   S3
   HD-SDI
   A lot of Cameras Event Site (Physical)
   

   View Slide

10. AWS
    
    
    Amplify
    Frontend
    Amazon CloudFront
    AWS Elemental
    
    
    MediaPackage
    AWS Elemental
    
    
    MediaLive
    AWS Elemental
    
    
    MediaLink
    DynamoDB
    AWS AppSync
    API Gateway AWS Lambda
    HLS / MPEG-DASH
    Video Switcher
    Auido Mixer
    Step Functions DynamoDB
    DynamoDB
    API Gateway
    OIDC
    CloudFront
    Kinesis
    
    
    Data Streams
    Kinesis
    
    
    Data Firehose
    ElasticSearch
    
    
    Service
    Viewer Count
    S3
    HD-SDI
    A lot of Cameras Event Site (Physical)
    *OTJEFUIFEPUUFEMJOF
    6TJOHBNQMJGZDMJPOMZTDIFNBEF
    fi
    OJUJPO
    8IBUBNQMJGZDMJDBOUEP XFDBOUEP
    

    View Slide

11. Amplify
    Frontend DynamoDB
    AWS AppSync
    REST API AWS Lambda
    Step Functions DynamoDB
    DynamoDB
    HTTP API
    + Cache
    OIDC
    OIDC
    6OBVUIPSJ[FE
    

    View Slide

12. Amplify
    Frontend
    REST API AWS Lambda DynamoDB
    + Cache
    6OBVUIPSJ[FE
    'PSVTFSTCFGPSFMPHHJOHJO
    (PPETJUFNEBUB
    

    View Slide

13. Amplify
    Frontend DynamoDB
    AWS AppSync
    OIDC
    0*%$"VUIFOUJDBUJPO
    6TFSEBUBBOE(PPETJUFNEBUB
    

    View Slide

14. Amplify
    Frontend
    Step Functions DynamoDB
    HTTP API
    OIDC
    0*%$"VUIFOUJDBUJPO
    1BZNFOUBOE*OWFOUPSZ%BUB
    

    View Slide

15. GraphQL
    ① Query
    
    
    • Get/List
    
    
    ② Mutation
    
    
    • Create/Update/Delete
    
    
    ③ Subscription
    
    
    • push update to client
    AWS AppSync
    

    View Slide

16. GraphQL
    ① Query
    
    
    • Get/List
    
    
    ② Mutation
    
    
    • Create/Update/Delete
    
    
    ③ Subscription
    
    
    • push update to client
    AWS AppSync
    

    View Slide

17. When Out of Stock
    I want to disable button without reloading
    *OTUPDL 0VUPGTUPDL
    "EEUP$BSU 0VUPG4UPDL
    without reloading
    

    View Slide

18. Amplify
    DynamoDB
    AWS AppSync
    Step Functions
    React
    Lambda
    

    View Slide

19. Amplify
    DynamoDB
    AWS AppSync
    ᶃDecrease Inventroy stock
    

    View Slide

20. Amplify
    DynamoDB
    AWS AppSync
    ᶃDecrease Inventroy stock
    ᶄ InventroyStock == 0
    

    View Slide

21. Amplify
    DynamoDB
    AWS AppSync
    ᶃDecrease Inventroy stock
    ᶄ InventroyStock == 0
    ᶅɹmutation
    
    
    outOfStockFlg=true
    

    View Slide

22. Amplify
    DynamoDB
    AWS AppSync
    ᶃDecrease Inventroy stock
    ᶄ InventroyStock == 0
    ᶅɹmutation
    
    
    outOfStockFlg=true
    ᶆɹsubscription
    
    
    outOfStockFlg=true
    

    View Slide

23. Amplify
    DynamoDB
    AWS AppSync
    ᶃDecrease Inventroy stock
    ᶄ InventroyStock == 0
    ᶅɹmutation
    
    
    outOfStockFlg=true
    ᶆɹsubscription
    
    
    outOfStockFlg=true
    ᶇɹquery
    
    
    getInventoryTable
    Refetch
    

    View Slide

24. LIMIT
    

    View Slide

25. DynamoDB
    AWS AppSync
    Frontend
    10,000 Users 10,000 access 10,000 Read
    AT THE SAME TIME
    ᶆɹsubscription
    
    
    outOfStockFlg=true
    ᶇɹquery
    
    
    getInventoryTable
    Refetch
    

    View Slide

26. DynamoDB
    AWS AppSync
    Frontend
    10,000 Users 10,000 access 10,000 Read
    Refetch
    Throttle rate per GraphQL API*
    1,000 count/second
    Soft limit
    Hot partition
    3,000 RCUs/second
    Hard limit
    LIMIT
    * In the case of subscription, it is counted when the session is opened.
    

    View Slide

27. DynamoDB
    AWS AppSync
    Frontend
    10,000 Users 10,000 access
    Refetch
    Throttle rate per GraphQL API*
    1,000 count/second
    Soft limit
    LIMIT
    * In the case of subscription, it is counted when the session is opened.
    

    View Slide

28. DynamoDB
    AWS AppSync
    Frontend
    3,000 Users 3,000 access 3,000 Read
    Refetch
    Throttle rate per GraphQL API
    1,000 count/second
    Soft limit
    Hot partition
    3,000 RCUs/second
    Hard limit
    LIMIT
    🔥
    🔥
    🔥
    

    View Slide

29. 😱
    One week before the release
    

    View Slide

30. How to
    fi
    x
    

    View Slide

31. Amplify
    DynamoDB
    AWS AppSync
    ᶃDecrease Inventroy stock
    ᶄ InventroyStock == 0
    ᶅɹmutation
    
    
    outOfStockFlg=true
    ᶆɹsubscription
    
    
    outOfStockFlg=true
    ᶇɹquery
    
    
    getInventoryTable
    Refetch
    

    View Slide

32. Amplify
    DynamoDB
    AWS AppSync
    ᶃDecrease Inventroy stock
    ᶄ All Inventory Data
    ᶅɹmutation
    
    
    All Inventory Data
    ᶆɹsubscription
    
    
    All Inventory Data
    Refetch
    1BTTBMMEBUBOFFEFEGPSEJTQMBZUPUIFGSPOUFOEBTTVCTDSJQUJPOEBUB
    4UPQ3FGFUDI
    

    View Slide

33. Let's do the load test
    as soon as possible.
    

    View Slide

34. Until two years ago
    we had never developed one.
    

    View Slide

35. The reason why…
    • Development starts for the
    fi
    rst time for 2 years ago.
    • Everyone had no development experiment.
    • We wanted to Develop!!!
    • We have to increase what we don’t have to make.
    

    View Slide

36. • VPC
    • IPv4??? Security Group? ACL?
    • EC2
    • Toooo many instance type!!
    • Toooo many OS type!!
    • I Can’t choose one…
    • RDS
    • SQL???
    • Toooo many instance type!!
    • Linux
    • Toooo many directories I don’t know.
    • Toooo many things I didn't prepare myself.
    

    View Slide

37. 😱
    Too dif
    fi
    cult.
    

    View Slide

38. %PZPVLOPX4FSWFSMFTT
    53:
    

    View Slide

39. We Can Focus only on the CODE.
    

    View Slide

40. JAWS-UG had made us Engineers.
    

    View Slide

41. THANK YOU!
    

    View Slide