サーバレスだから出来た！2つのサービスのフルスクラッチリニューアルの全貌

by Kazuki Miura

Slide 1

Slide 1 text

サーバレスだから出来た！サーバレスだから出来た！ 2つのサービスの 2つのサービスのフルスクラッチリニューアルの全貌フルスクラッチリニューアルの全貌 JAWSDAYS 2022 三浦一樹

Slide 2

Slide 2 text

自己紹介 #Sauna #Sapporo #HTB #Amplify #StepFunctions #Serverless #AWSSamurai2019 #Marvel #Hinatazaka46 #radio 三浦一樹（36）

Slide 3

Slide 3 text

JAWS DAYS で人生変わった人です

Slide 4

Slide 4 text

#JAWSDAYS #JAWSDAYS2022 #JAWSDAYS2022_C

Slide 5

Slide 5 text

札幌会場の様子

Slide 6

Slide 6 text

前夜祭もやったよ

Slide 7

Slide 7 text

サービスリニューアルに関してどんな感じで進めたのかストーリー ◯話す事サービスリニューアルのあれこれ今後の展望大好きなAWS サービスの機能この機能があったから、めっちゃ助かった！採用した理由とかサービス紹介しながら、諦めた系の話を差し込んでいきます Linux ? SQL? Network? コンテナ？ﾁｮｯﾄﾅﾆｲｯﾃﾙｶﾜｶﾗﾅｲ ✖︎ 話さない事 VPC の内側の話言えない話 AWS サービス自体の説明ドキュメント読んでね♪ 比較的な話は触れますが詳しくは「すすきの」で

Slide 8

Slide 8 text

裏番組はこんな感じ

Slide 9

Slide 9 text

VOD EC 3 ヶ月くらいでフルスクラッチ 3 ヶ月くらいでフルスクラッチ

Slide 10

Slide 10 text

開発体制についてエンジニア 6 人くらいで作ってます興味がある人がゼロから勉強することを始めました + 週1 内製開発支援

Slide 11

Slide 11 text

ゼロから始める内製開発

Slide 12

Slide 12 text

出来ないことは出来ないリリースされなければ無価値制約と誓約

Slide 13

Slide 13 text

制約と誓約（例）制約幻影旅団以外には使わない誓約幻影旅団以外に使った場合は命を絶つ

Slide 14

Slide 14 text

制約と誓約制約 VPC の内側に手を出さないアプリケーションに近いところから考える誓約事業に貢献する。（利益を最大化する）

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

VPC LESS VPC LESS VPC LESS

Slide 17

Slide 17 text

Amplify AppSync Step Functions

Slide 18

Slide 18 text

2020.10〜有料ライブ配信ライブコマースライブコマースイベント 2019.10〜 2020.05〜 2020.07〜 2020.10〜有料ライブ配信 Lift & Shift VODオフロード React Nuxt.js JavaScript Lambda この3年で作ったサービス

Slide 19

Slide 19 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 開発完全リニューアル完全リニューアルこの3年で作ったサービス 2022.09 〜固定化 Lambda

Slide 20

Slide 20 text

今日メインで触れるのはこの2つのサービス 2022.04.28 〜 2022.03.01 〜内製開発

Slide 21

Slide 21 text

サービスリニューアルのあれこれ

Slide 22

Slide 22 text

VOD EC オンプレで外部にまるっと発注してた CMS 触るだけ運用

Slide 23

Slide 23 text

VOD EC 3 ヶ月くらいでフルスクラッチ

Slide 24

Slide 24 text

VOD EC 3 ヶ月くらいでフルスクラッチ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 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 32

Slide 32 text

AWS Amplify AWS AppSync AWS Step Functions 大好きなAWS サービスの機能

Slide 33

Slide 33 text

Amplify AppSync Step Functions

Slide 34

Slide 34 text

Amplify AppSync Step Functions

Slide 35

Slide 35 text

Amplify frontend Amplify Console リポジトリを連携するだけで簡単にCI/CD 環境が手に入る Basic 認証やリダイレクト設定もコンソールから簡単環境ごとの環境変数もコンソールから設定可能開発環境の構築時間を最小化したい

Slide 36

Slide 36 text

Amplify frontend リポジトリ繋げてブランチ選んで yaml をちょっと書いたらデプロイされる Route 53 のドメインをつけるのもコンソールからポチポチ

Slide 37

Slide 37 text

Amplify frontend S3 + CloudFront 構成だと Lambda@Edge してましたブランチ選んで、値を入力するだけ

Slide 38

Slide 38 text

Amplify frontend ただし、増えてくると辛い、、、（CLI だとブランチの上書きが動かないと思っている）

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Amplify backend +

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Amplify AppSync Step Functions

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

AppSync DynamoDB DynamoDB DynamoDB AppSync BFF query GraphQL API フロント側で好きなデータを持ってこれる

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Amplify AppSync Step Functions

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Step Functions DynamoDB DynamoDB DynamoDB AppSync Step Functions API-GW BFF Lambda API-GW API-GW ＋ Lambda っていう構成がどんどん Step Functions に変化していった＞

Slide 52

Slide 52 text

Step Functions Workflow Studio がすごい！！

Slide 53

Slide 53 text

Step Functions GUI で作れる ASL とかYAML はもう触らない SDK が直接叩けるこれが爆速で最高

Slide 54

Slide 54 text

Step Functions

Slide 55

Slide 55 text

Amplify AppSync Step Functions 再現性のある形で事業に近い開発に時間を割くことが出来たコスト低め、運用負荷低め

Slide 56

Slide 56 text

リリースして気がつくことたくさん！ You Build, You Build, You Build, You Run it. You Run it. You Run it.

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

まとめ

Slide 59

Slide 59 text

サーバーもネットワークも知らなくてもサービスは作れる！！ 01 リリースしてから気がつくことってたくさんある 02 Amplify いいぞ！！！ AppSync いいぞ！！！ Step Functions いいぞ！！ 03