サーバレスライブコマースシステムの構築

 サーバレスライブコマースシステムの構築

#jawsug #jawsug_asa

74cec195bfb6cb5165256d88cb7fcf0f?s=128

Kazuki Miura

October 27, 2020
Tweet

Transcript

  1. session2 JAWS-UG ASA | 2020.10.27 動画配信 お買い物 サーバレス

  2. ⾃⼰紹介 三浦一樹

  3. 動画配信 お買い物 サーバレス こんな感じのシステム作りました

  4. アーキテクチャ サーバレス

  5. こんなイベント がありまして

  6. もともとは全国行脚

  7. 今年も そのはずでした

  8. None
  9. None
  10. 決まったのは8月頭 ※グッズは発注済み

  11. 本番は10月頭

  12. 2ヶ月しかない

  13. 山奥からの 無料動画配信 グッズ販売 当日内容は不明

  14. 動画配信部分

  15. 動画配信 動画配信部分

  16. 動画配信 今までは LiveShellシリーズ OBS

  17. 動画配信 今までは LiveShellシリーズ OBS 操作画面が CEREVOサーバ windows...

  18. 動画配信 安定性がほしい! 当日は何もしたくない!!

  19. 黄色い箱、買っちゃいました

  20. 動画配信 aws から買えるハードウェア $995

  21. 動画配信 アカウント紐付け 刺すだけでinputとして認識 マネージドコンソールから 死活監視ができる

  22. SINGLE_PIPELINE しか設定できないのでMediaLive が2つ必要です 動画配信

  23. お買い物

  24. お買い物 めっちゃ便利 BuyButton ならコピペするだけ

  25. お買い物 完成したも同然だわ

  26. お買い物 9月頭

  27. お買い物 タイムセール するから 9月頭

  28. お買い物 時間限定商品 がある 9月頭

  29. 聞いてねぇぇえ お買い物

  30. お買い物 リロードしたら 動画止まっちゃうし スパイクアクセス怖いし

  31. お買い物

  32. お買い物

  33. お買い物 subscription 使えばリアルタイム更新 出来るって聞いたぞ AppSync

  34. お買い物

  35. お買い物 timeSaleFlg 0 or 1

  36. お買い物 ・query ・mutation ・subscription

  37. query お買い物 { id : 'aircaravan' } type Query {

    singlePost(id: ID!): Post } { "data": { "singlePost": { "id": "aircaravan", "timeSaleFlg": 1 } } } { "id": "aircaravan", "timeSaleFlg": 1 } AppSync Amplify DynamoDB
  38. mutation お買い物 {   timeSaleFlg: 1 } type Mutation {

    putPost(id: ID, timeSaleFlg: Int!): Post } { id: "aircaravan", timeSaleFlg: event.arguments.timeSaleFlg } Item: { id: "aircaravan", timeSaleFlg: event.arguments.timeSaleFlg } { "data": { "singlePost": { "id": "aircaravan", "timeSaleFlg": 1 } } } なんも返してない console AppSync Lambda DynamoDB query用にDynamoDBに保存
  39. subscriptin お買い物 console AppSync Amplify {   timeSaleFlg: 1 }

    type Subscription { onPutPost: Post @aws_subscribe(mutations: ["putPost"]) } { "data": { "onPutPost": { "id": "aircaravan", "timeSaleFlg": 1 } } } WebSocket type Mutation { putPost(id: ID, timeSaleFlg: Int!): Post }
  40. AppSync AppSync お買い物 {   timeSaleFlg: 0 } {  

    timeSaleFlg: 1 } shopify GraphQL 非表示 商品入れ替え 表示 イベント会場でインカム聞きながら コンソールで直操作
  41. AppSync AppSync Amplify お買い物 {   timeSaleFlg: 0 } {

      timeSaleFlg: 1 } shopify GraphQL イベント会場でインカム聞きながら コンソールで直操作 <v-if="timeSaleFlg"> 非表示 表示
  42. お買い物 リロードなし イベント進行に合わせた リアルタイム更新ができた!! AppSync で $4くらい

  43. 他のはまたの機会に VPCの内側 わからない

  44. ツッコミなどは twitter で! @miu_crescent 動画配信 お買い物 サーバレス