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

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

Kazuki Miura
December 17, 2022
Technology
0
1.2k

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

Kazuki Miura

December 17, 2022
Tweet

More Decks by Kazuki Miura

See All by Kazuki Miura
もめんと会
miu_crescent
0
91
ECサービスでのStripe実装例
miu_crescent
0
74
#MIERUNEBBQ 初めてのAWS Step Functions
miu_crescent
0
110
サーバーレスアーキテクチャにおける AWS と SaaS を活用しての スパイクアクセス対策
miu_crescent
0
160
動画配信サービスの 人気番組配信のスパイクアクセスに、 サーバレスキャッシュで立ち向かう
miu_crescent
1
1.6k
AWS勉強会コミュニティのご紹介
miu_crescent
1
81
LIVE配信においてMediaStoreとS3をオリジンとして比較してみる
miu_crescent
0
94
動画配信サービズの内製開発
miu_crescent
0
230
ガンダムってなんだろう
miu_crescent
0
85

Other Decks in Technology

See All in Technology
技術広報経験0のEMがエンジニアブランディングをはじめてみた
coconala_engineer
1
130
LLMエンジニアリングを加速させるソフトウェアアーキテクチャ
tkikuchi1002
0
520
ニフティの過去・現在・未来 - NIFTY Tech Day 2023
niftycorp
0
160
Generative A.I. + Law - A Year in Review
danielkatz
PRO
0
270
AWS re:Invent 2023に参加してきた ~Amazon Inspectorのアップデートを添えて~ / AWS re:Invent 2023 Participation Bulletin with Amazon Inspector Updates
yuj1osm
0
260
開発組織の体制づくり、いつやるか問題
akiroom
0
2k
10分でわかる株式会社ログラス − エンジニア向け会社説明資料 / Loglass in 10 min for Engineers
loglass2019
2
850
AWS re:Invent 2023 わざわざ現地まで行く意味あるの？→ありました
minorun365
PRO
5
960
ROSCon 2023参加報告：Real-Time Workshop & Zenoh's Current Status and Forecast
takasehideki
1
220
CPOが開発する覚悟 〜コンパウンドスタートアップにおける、爆速の新規プロダクト開発スタイル〜
mosa_siru
9
6.7k
実装がすべてではない、開発者の周りから考える Web プロダクトセキュリティ
oldbigbuddha
1
230
Kaggle Tokyo Meetup2023 CommonLit Solutionの紹介と考え方 - Fulltrain戦略と(Seed/Model)Ensembleの可視化 -
chumajin
2
1.1k

Featured

See All Featured
Designing with Data
zakiwarfel
93
4.6k
Bootstrapping a Software Product
garrettdimon
PRO
299
110k
A designer walks into a library…
pauljervisheath
199
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
342
19k
Rebuilding a faster, lazier Slack
samanthasiow
71
7.9k
How to train your dragon (web standard)
notwaldorf
71
4.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
44
12k
Building Applications with DynamoDB
mza
87
5.3k
The Pragmatic Product Professional
lauravandoore
23
5.4k
GraphQLとの向き合い方2022年版
quramy
26
12k
KATA
mclloyd
13
11k
Faster Mobile Websites
deanohume
296
29k

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