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
サーバレスだから出来た!2つのサービスのフルスクラッチリニューアルの全貌
Search
Kazuki Miura
PRO
October 08, 2022
Technology
0
1.9k
サーバレスだから出来た!2つのサービスのフルスクラッチリニューアルの全貌
https://jawsdays2022.jaws-ug.jp/sessions/C20/
#jawsdays #jawsdays2022 #jawsdays2022_c
Kazuki Miura
PRO
October 08, 2022
Tweet
Share
More Decks by Kazuki Miura
See All by Kazuki Miura
アクシズを探せ! 各勢力の位置関係についての考察
miu_crescent
PRO
0
35
地方だからできた! 東北でのAWS事例を一挙紹介!#地方だからできる
miu_crescent
PRO
0
20
APIからデータベースまで、全てサーバレスで作ってみよう!
miu_crescent
PRO
0
7
「フィニッシャーズ・スマイル」の開発と当日運用のお話
miu_crescent
PRO
2
80
AWS Systems Manager Incident Manager 使い所を考えてみた
miu_crescent
PRO
0
20
「入門 OpenTelemetry」 入門
miu_crescent
PRO
1
72
AZ 名とAZ ID の違いを 何度でも言うよ
miu_crescent
PRO
1
230
AWS Step Functions で マネコンとCDKの二刀流!
miu_crescent
PRO
1
60
AWS MediaServices の概要と活用事例
miu_crescent
PRO
2
110
Other Decks in Technology
See All in Technology
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
3
1.9k
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
2
1.3k
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
580
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.5k
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
270
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
5
900
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
120
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
160
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
170
ComposeではないコードをCompose化する case ビズリーチ / DroidKaigi 2025 koyasai
visional_engineering_and_design
0
110
AIツールでどこまでデザインを忠実に実装できるのか
oikon48
6
3.4k
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
210
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Music & Morning Musume
bryan
46
6.8k
For a Future-Friendly Web
brad_frost
180
9.9k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
We Have a Design System, Now What?
morganepeng
53
7.8k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Building Adaptive Systems
keathley
44
2.8k
Transcript
サーバレスだから出来た! サーバレスだから出来た! 2つのサービスの 2つのサービスの フルスクラッチリニューアルの全貌 フルスクラッチリニューアルの全貌 JAWSDAYS 2022 三浦一樹
自己紹介 #Sauna #Sapporo #HTB #Amplify #StepFunctions #Serverless #AWSSamurai2019 #Marvel #Hinatazaka46
#radio 三浦一樹(36)
JAWS DAYS で人生変わった人です
#JAWSDAYS #JAWSDAYS2022 #JAWSDAYS2022_C
札幌会場の様子
前夜祭もやったよ
サービスリニューアルに関して どんな感じで進めたのかストーリー ◯話す事 サービスリニューアルのあれこれ 今後の展望 大好きなAWS サービスの機能 この機能があったから、めっちゃ助かった! 採用した理由とか サービス紹介しながら、諦めた系の話
を差し込んでいきます Linux ? SQL? Network? コンテナ? チョットナニイッテルカワカラナイ ✖︎ 話さない事 VPC の内側の話 言えない話 AWS サービス自体の説明 ドキュメント読んでね♪ 比較的な話は触れますが 詳しくは「すすきの」で
裏番組は こんな感じ
VOD EC 3 ヶ月くらいで フルスクラッチ 3 ヶ月くらいで フルスクラッチ
開発体制について エンジニア 6 人くらいで作ってます 興味がある人が ゼロから勉強することを始めました + 週1 内製開発支援
ゼロから始める内製開発
出来ないことは出来ない リリースされなければ無価値 制約と誓約
制約と誓約(例) 制約 幻影旅団以外には使わない 誓約 幻影旅団以外に使った場合は命を絶つ
制約と誓約 制約 VPC の内側に手を出さない アプリケーションに近いところから考える 誓約 事業に貢献する。 (利益を最大化する)
None
VPC LESS VPC LESS VPC LESS
Amplify AppSync Step Functions
2020.10〜 有料ライブ配信 ライブコマース ライブコマース イベント 2019.10〜 2020.05〜 2020.07〜 2020.10〜 有料ライブ配信
Lift & Shift VODオフロード React Nuxt.js JavaScript Lambda この3年で作ったサービス
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 開発 完全リニューアル 完全リニューアル この3年で作ったサービス 2022.09 〜 固定化 Lambda
今日メインで触れるのは この2つのサービス 2022.04.28 〜 2022.03.01 〜 内製開発
サービスリニューアル のあれこれ
VOD EC オンプレで外部に まるっと発注してた CMS 触るだけ運用
VOD EC 3 ヶ月くらいで フルスクラッチ
VOD EC 3 ヶ月くらいで フルスクラッチ
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 AWS AppSync AWS Step Functions 大好きなAWS サービス の機能
Amplify AppSync Step Functions
Amplify AppSync Step Functions
Amplify frontend Amplify Console リポジトリを連携するだけで簡単にCI/CD 環境が手に入る Basic 認証やリダイレクト設定もコンソールから簡単 環境ごとの環境変数もコンソールから設定可能 開発環境の構築時間を最小化したい
Amplify frontend リポジトリ繋げて ブランチ選んで yaml をちょっと書いたら デプロイされる Route 53 のドメインをつけるのも
コンソールからポチポチ
Amplify frontend S3 + CloudFront 構成だと Lambda@Edge してました ブランチ選んで、 値を入力するだけ
Amplify frontend ただし、増えてくると辛い、、、 (CLI だとブランチの上書きが動かないと思っている)
Amplify backend amplify-cli DynamoDB DynamoDB DynamoDB AppSync BFF Backend スキーマを書いて
AppSync の裏にある DynamoDB と その connection を定義し てデプロイ
Amplify backend +
Amplify backend amplify-cli Dynamo のテーブル同士を connection する。 AppSync を経て 一発で欲しいデータにアク
セスできるように構築 マイページに 表示したいデータ
Amplify backend GraphQL Transformer v1 のままです GraphQL Transformer v2 で新しくなったけど
一部機能が実現できなくな ったので、まだ更新できて ないです、、、
Amplify AppSync Step Functions
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 リロード無しで 画面更新が可能
AppSync クォータ が ちょっと特殊 トークン消費量 に注意
Amplify AppSync Step Functions
Step Functions 100 + State machines DynamoDB DynamoDB DynamoDB AppSync
Step Functions API-GW BFF
Step Functions DynamoDB DynamoDB DynamoDB AppSync Step Functions API-GW BFF
Lambda API-GW API-GW + Lambda っていう構成がどんどん Step Functions に変化していった >
Step Functions Workflow Studio がすごい!!
Step Functions GUI で作れる ASL とかYAML はもう 触らない SDK が直接叩ける
これが爆速で最高
Step Functions
Amplify AppSync Step Functions 再現性のある形で 事業に近い開発に時間を割くことが出来た コスト低め、運用負荷低め
リリースして 気がつくことたくさん! You Build, You Build, You Build, You Run
it. You Run it. You Run it.
2022.04.28 〜 2022.03.01 〜 社内外の声から 大小合わせて 100 以上の 機能改善
まとめ
サーバーも ネットワークも知らなくても サービスは作れる!! 01 リリースしてから 気がつくことってたくさんある 02 Amplify いいぞ!!! AppSync
いいぞ!!! Step Functions いいぞ!! 03
WE WERE HIRING
WE WERE HIRING
WE WERE HIRING
THANK YOU