Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
サーバレスでVODとECをリニューアルして、さらにくっつけてみました!
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Kazuki Miura
PRO
December 17, 2022
Technology
1.5k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
サーバレスでVODとECをリニューアルして、さらにくっつけてみました!
Kazuki Miura
PRO
December 17, 2022
More Decks by Kazuki Miura
See All by Kazuki Miura
地域のCCoEの拡大を目指す 企業間コミュニティ 「re:light local」について
miu_crescent
PRO
0
53
us-east-1 に障害が起きた時に、 ap-northeast-1 にどんな影響があるか 説明できるようになろう!
miu_crescent
PRO
13
5.2k
これだけはやっておいた方がよさそう?awsにおけるランサムウェア対策
miu_crescent
PRO
1
160
生成AIを活用した音声文字起こしシステムの2つの構築パターンについて
miu_crescent
PRO
4
460
なぜ あなたはそんなに re:Invent に行くのか?
miu_crescent
PRO
0
430
エンタメ方向のTを広げよう!Werner先生の クロージングキーノートを 深掘りするための小ネタ10
miu_crescent
PRO
1
210
Amazon Bedrockを活用した 報道向け文字起こしシステムの開発
miu_crescent
PRO
1
200
us-east-1 の障害が 起きると なぜ ソワソワするのか
miu_crescent
PRO
0
95
us-east-1 の障害が 起きると なぜ ソワソワするのか
miu_crescent
PRO
3
1.2k
Other Decks in Technology
See All in Technology
システム監視入門
grimoh
2
520
歴史から理解するクラウドインフラのしくみ
kizawa2020
0
110
全社でのソフトウェアサプライチェーン攻撃対策をやってみた with Takumi Guard
z63d
0
300
ダッシュボード"開発"について 〜使われるダッシュボードのつくりかた〜
kimichan
0
220
テックカンファレンス三大ステークホルダーの文化人類学 ─ 違いを認め合う関係性作り
bash0c7
2
490
【公開用】AI_Dev_Ex2026_AI_登壇資料
matsuritechnologies
PRO
2
590
そのドキュメント、自動化しませんか?
yuksew
1
430
副作用のある Lambda でも Lambda Power Tuning は使えるのか / lambda-power-tuning-side-effects
koukihosaka
2
150
OPENLOGI Company Profile for engineer
hr01
1
75k
PHPで作って学ぶリアルタイム音声対話AIとWebSocket入門 by ムナカタ
munakata
0
150
設計レビューとAIハーネスで向き合う AIが生み出した新しいボトルネックの対処法 / Design Reviews and AI Harnesses Against New Bottlenecks Created by AI
nstock
5
490
Power Automateアップデート情報
miyakemito
0
240
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
6k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
420
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
From π to Pie charts
rasagy
0
240
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
560
AI: The stuff that nobody shows you
jnunemaker
PRO
9
840
BBQ
matthewcrist
89
10k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
400
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
430
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3.3k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
1
3.7k
Transcript
サーバレスでVODとECを リニューアルして さらにくっつけてみました! 三浦一樹 @miu_crescent
三浦一樹 HTB 自社サービスの 開発チームのキャプテン 開発初めてやっと 3年経ちました AWS + SaaS が多い
with
システムを作りたいんじゃない ビジネスをしたいんだ
None
EVENTDRIVEN EVENTDRIVEN EVENTDRIVEN
VPC LESS VPC LESS VPC LESS OS LESS OS LESS
OS LESS EVENTDRIVEN EVENTDRIVEN EVENTDRIVEN
2019年はお世話になりました
いいぞ! いいぞ! いいぞ! いろんな人にオススメされて
素直に全部やってみました
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
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 福岡以降でリリースしたやつ
VOD EC 2012年4月から 2005年9月から
VOD EC 2012年4月から 2005年9月から Lift & Shift やだ!!!
VOD EC 2012年4月から 2005年9月から 共通垢運用 したい!
VOD EC 3 ヶ月くらいで フルスクラッチ 3 ヶ月くらいで フルスクラッチ 2012年4月から 2005年9月から
2022.04.28 〜 2022.03.01 〜 社内外の声から 大小合わせて 100以上の 機能改善
None
放送業界で賞をもらいまいた!
アーキテクチャ紹介
ワーナー先生が紹介してくれましたw
DynamoDB DynamoDB DynamoDB AppSync Amplify Amplify BFF ざっくりアーキテクチャ Frontend Backend
S3 S3 DynamoDB DynamoDB DynamoDB AppSync Amplify Amplify BFF ざっくりアーキテクチャ
Frontend Backend MediaConvert
S3 S3 DynamoDB DynamoDB DynamoDB AppSync Amplify Amplify BFF ざっくりアーキテクチャ
Frontend Backend MediaConvert
S3 S3 DynamoDB DynamoDB DynamoDB AppSync Lambda API-GW Amplify Amplify
BFF ざっくりアーキテクチャ Frontend Backend MediaConvert
S3 S3 DynamoDB DynamoDB DynamoDB AppSync Lambda API-GW Step Functions
API-GW Amplify Amplify BFF ざっくりアーキテクチャ Frontend Backend MediaConvert
S3 S3 DynamoDB DynamoDB DynamoDB AppSync Lambda API-GW Step Functions
API-GW Amplify Amplify BFF ざっくりアーキテクチャ Frontend Backend OIDC OIDC OIDC MediaConvert
S3 MediaConvert S3 DynamoDB DynamoDB DynamoDB AppSync Lambda API-GW Step
Functions API-GW Amplify Amplify 担当者向け CMS 倉庫 システム BFF ざっくりアーキテクチャ Frontend Backend OIDC OIDC OIDC
AWS Amplify
Amplify backend amplify-cli DynamoDB DynamoDB DynamoDB AppSync BFF Backend スキーマを書いて
AppSync の裏にある DynamoDB と その connection を定義し てデプロイ
Amplify backend +
Amplify backend 40 + DynamoDB Tables
Amplify backend amplify-cli Dynamo のテーブル同士を connection する。 マイページに 表示したいデータ AppSync
は amplify-CLI しばり AppSync を経て 一発で欲しいデータにアク セスできるように構築
Amplify backend GraphQL Transformer v1 のままです GraphQL Transformer v2 で新しくなったけど
一部機能が実現できなくな ったので、まだ更新できて ないです、、、
AWS AppSync
AppSync DynamoDB DynamoDB DynamoDB AppSync Lambda API-GW Step Functions API-GW
BFF query mutation subscription GraphQL API Pub/Sub API
AppSync DynamoDB DynamoDB DynamoDB AppSync BFF query GraphQL API フロント側で好きなデータ
を持ってこれる 基本的に最初に全部持ってき て、フロントで保持しちゃう 検索はフロントだけで実現
AppSync DynamoDB DynamoDB DynamoDB AppSync Lambda BFF mutation mutation subscription
Pub/Sub API
AppSync DynamoDB DynamoDB DynamoDB AppSync Lambda BFF mutation mutation subscription
Pub/Sub API websocket リロード無しで 画面更新が可能
None
AppSync クォータ が ちょっと特殊 トークン消費量 に注意
AWS Step Functions
100 State machines Step Functions + DynamoDB DynamoDB DynamoDB AppSync
Step Functions API-GW BFF
z Step Functions DynamoDB DynamoDB DynamoDB AppSync Step Functions API-GW
BFF Lambda API-GW API-GW + Lambda っていう構成がどんどん Step Functions に変化していった > Step Functions の中のLambda もゼロにしたいなぁ
Step Functions Workflow Studio がすごい!!
Step Functions GUI で作れる ASL とかYAML はもう 触らない できたらYAML コピ
って sls いれれCI/CD SDK が直接叩ける これが爆速で最高
Step Functions Step Functions 複雑な処理ってみなさん どうやってやってますか?
注文履歴 create 決済処理 〉 〉 発注履歴 作成 発送情報 発送リスト create
〉 発送指示 外部流通サービス 〉 注文履歴 update 更新
注文履歴 create 決済処理 〉 〉 発注履歴 作成 発送情報 発送リスト create
〉 発送指示 外部流通サービス 〉 注文履歴 update 更新
決済処理 メール送信 ユーザ向けデータ 保存 kintone 用保存 MAP 担当 社内用保存 配送業者用保存
ユーザが待つのは ここまで 購入確定ボタン押した後
None
None
None
None
None
決済処理 メール送信 ユーザ向けデータ 保存 kintone 用保存 MAP 担当 社内用保存 配送業者用保存
ユーザが待つのは ここまで 落ちた時、再起しやすい単位で分割
決済処理 メール送信 ユーザ向けデータ 保存 kintone 用保存 MAP 担当 社内用保存 配送業者用保存
ユーザが待つのは ここまで Design for Failure 再起動したら メールとか飛んじ ゃう 再起動しても影響 がない様に分割
Step Functions Step Functions 複雑な処理ってみなさん どうやってやってますか? ツイートとかLT とかで教えて!!
こういう細かい話も サーバーレスコミュニティで 共有していきたい!
札幌にて オフラインで会いましょう!! 三浦一樹 @miu_crescent