Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

EVENTDRIVEN EVENTDRIVEN EVENTDRIVEN

Slide 6

Slide 6 text

VPC LESS VPC LESS VPC LESS OS 　LESS OS 　LESS OS 　LESS EVENTDRIVEN EVENTDRIVEN EVENTDRIVEN

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

アーキテクチャ紹介

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

AWS Amplify

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Amplify backend +

Slide 31

Slide 31 text

Amplify backend 40 + DynamoDB Tables

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

AWS AppSync

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

AWS Step Functions

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Step Functions Workflow Studio がすごい！！

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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