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

Transcript

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

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

   with

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

4. None

5. EVENTDRIVEN EVENTDRIVEN EVENTDRIVEN

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

   OS 　LESS EVENTDRIVEN EVENTDRIVEN EVENTDRIVEN

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

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

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

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

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 福岡以降でリリースしたやつ

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

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

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

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

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

17. None

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

19. アーキテクチャ紹介

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

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

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

    Frontend Backend MediaConvert

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

    Frontend Backend MediaConvert

24. S3 S3 DynamoDB DynamoDB DynamoDB AppSync Lambda API-GW Amplify Amplify

    BFF ざっくりアーキテクチャ Frontend Backend MediaConvert

25. S3 S3 DynamoDB DynamoDB DynamoDB AppSync Lambda API-GW Step Functions

    API-GW Amplify Amplify BFF ざっくりアーキテクチャ Frontend Backend MediaConvert

26. S3 S3 DynamoDB DynamoDB DynamoDB AppSync Lambda API-GW Step Functions

    API-GW Amplify Amplify BFF ざっくりアーキテクチャ Frontend Backend OIDC OIDC OIDC MediaConvert

27. S3 MediaConvert S3 DynamoDB DynamoDB DynamoDB AppSync Lambda API-GW Step

    Functions API-GW Amplify Amplify 担当者向け CMS 倉庫 システム BFF ざっくりアーキテクチャ Frontend Backend OIDC OIDC OIDC

28. AWS Amplify

29. Amplify backend amplify-cli DynamoDB DynamoDB DynamoDB AppSync BFF Backend スキーマを書いて

    AppSync の裏にある DynamoDB と その connection を定義し てデプロイ

30. Amplify backend +

31. Amplify backend 40 + DynamoDB Tables

32. Amplify backend amplify-cli Dynamo のテーブル同士を connection する。 マイページに 表示したいデータ AppSync

    は amplify-CLI しばり AppSync を経て 一発で欲しいデータにアク セスできるように構築

33. Amplify backend GraphQL Transformer v1 のままです GraphQL Transformer v2 で新しくなったけど

    一部機能が実現できなくな ったので、まだ更新できて ないです、、、

34. AWS AppSync

35. AppSync DynamoDB DynamoDB DynamoDB AppSync Lambda API-GW Step Functions API-GW

    BFF query mutation subscription GraphQL API Pub/Sub API

36. AppSync DynamoDB DynamoDB DynamoDB AppSync BFF query GraphQL API フロント側で好きなデータ

    を持ってこれる 基本的に最初に全部持ってき て、フロントで保持しちゃう 検索はフロントだけで実現

37. AppSync DynamoDB DynamoDB DynamoDB AppSync Lambda BFF mutation mutation subscription

    Pub/Sub API

38. AppSync DynamoDB DynamoDB DynamoDB AppSync Lambda BFF mutation mutation subscription

    Pub/Sub API websocket リロード無しで 画面更新が可能
39. None

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

41. AWS Step Functions

42. 100 State machines Step Functions + DynamoDB DynamoDB DynamoDB AppSync

    Step Functions API-GW BFF

43. z Step Functions DynamoDB DynamoDB DynamoDB AppSync Step Functions API-GW

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

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

45. Step Functions GUI で作れる ASL とかYAML はもう 触らない できたらYAML コピ

    って sls いれれCI/CD SDK が直接叩ける これが爆速で最高

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

47. 注文履歴 create 決済処理 〉 〉 発注履歴 作成 発送情報 発送リスト create

    〉 発送指示 外部流通サービス 〉 注文履歴 update 更新

48. 注文履歴 create 決済処理 〉 〉 発注履歴 作成 発送情報 発送リスト create

    〉 発送指示 外部流通サービス 〉 注文履歴 update 更新

49. 決済処理 メール送信 ユーザ向けデータ 保存 kintone 用保存 MAP 担当 社内用保存 配送業者用保存

    ユーザが待つのは ここまで 購入確定ボタン押した後
50. None
51. None
52. None
53. None
54. None

55. 決済処理 メール送信 ユーザ向けデータ 保存 kintone 用保存 MAP 担当 社内用保存 配送業者用保存

    ユーザが待つのは ここまで 落ちた時、再起しやすい単位で分割

56. 決済処理 メール送信 ユーザ向けデータ 保存 kintone 用保存 MAP 担当 社内用保存 配送業者用保存

    ユーザが待つのは ここまで Design for Failure 再起動したら メールとか飛んじ ゃう 再起動しても影響 がない様に分割

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

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

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