事業会社の未経験エンジニアチームが内製した2つのWebサービスのアーキテクチャを紹介します！

by Kazuki Miura

Slide 1

Slide 1 text

JAWS-UG 山形支部 May 05, 2024 事業会社の未経験エンジニアチームが内製した2 つのWeb サービスのアーキテクチャを紹介します！三浦一樹 #jawsug #jawsugtohoku

Slide 2

Slide 2 text

Part 1: 自己紹介 Part 2: サービス紹介 Part 3: アーキテクチャ紹介 Part 4: 今後の課題

Slide 3

Slide 3 text

自己紹介

Slide 4

Slide 4 text

三浦一樹(みうみう) AWS Community Hero AWS Samurai 2019 北海道テレビ放送平社員総合職エンジニア開発チームキャプテン @miu_crescent 金足出身

Slide 5

Slide 5 text

三浦一樹(みうみう) 運営 JAWS-UG 札幌支部 Media-JAWS JAWS-UG 事務局 #CNDS2024 明日朝イチ新幹線実行委員参加趣味:コミュニティ

Slide 6

Slide 6 text

名古屋千葉 CNDS 札幌 2024年6月札幌

Slide 7

Slide 7 text

三浦一樹(みうみう) 趣味:サウナ 🇫🇮 Sompa Sauna ホームサウナセンチュリオン

Slide 8

Slide 8 text

サービス紹介

Slide 9

Slide 9 text

技術スタック Backend Frontend SaaS Communication

Slide 10

Slide 10 text

hod

Slide 11

Slide 11 text

hod htb オンライン

Slide 12

Slide 12 text

内製で開発運用ゼロスタートで4年目 2サービスを5人で回す hod htb オンライン

Slide 13

Slide 13 text

0から1になれ

Slide 14

Slide 14 text

2020.10〜有料ライブ配信ライブコマースライブコマースイベント 2019.10〜 2020.05〜 2020.07〜 2020.10〜有料ライブ配信 Lift & Shift VODオフロード Nuxt.js JavaScript 期間限定サービスで新技術を覚える

Slide 15

Slide 15 text

2020.10〜有料ライブ配信ライブコマースライブコマースイベント 2019.10〜 2020.05〜 2020.07〜 2020.10〜有料ライブ配信 Lift & Shift VODオフロード Nuxt.js JavaScript 期間限定サービスで新技術を覚える社内に聞ける人がいないのでコミュニティで教えてもらったことを素直にひとつひとつ実践していく

Slide 16

Slide 16 text

2020.10〜有料ライブ配信ライブコマースライブコマースイベント 2019.10〜 2020.05〜 2020.07〜 2020.10〜有料ライブ配信 Lift & Shift VODオフロード完全リニューアル 2021.04〜 2021.08.29 〜 2021.10〜リニューアルちょっとだけサーバーレス化 2022.04.28 〜 2022.03.01 〜 React GraphQL TypeScript Nuxt.js JavaScript 開発完全リニューアル完全リニューアル共通基盤の開発と運用期間限定サービスで新技術を覚える

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

サービス開始して気がつけば２年 hod htb オンライン

Slide 20

Slide 20 text

アーキテクチャ

Slide 21

Slide 21 text

OIDC OIDC OIDC DynamoDB DynamoDB S3 MediaConvert S3 DynamoDB AppSync Lambda API-GW Step Functions API-GW Amplify Amplify BFF Frontend Backend CloudFront Momento Cache アーキテクチャ

Slide 22

Slide 22 text

OIDC OIDC OIDC DynamoDB DynamoDB S3 MediaConvert S3 DynamoDB AppSync Lambda API-GW Step Functions API-GW Amplify Amplify BFF Frontend Backend CloudFront Momento Cache アーキテクチャ

Slide 23

Slide 23 text

AWS Cloud AWS Amplify AWS AppSync AWS Lambda AWS AppSync AWS AppSync Merged API Source API Source API Query Momento Cache Amazon DynamoDB Get/Set

Slide 24

Slide 24 text

OIDC OIDC OIDC DynamoDB DynamoDB S3 MediaConvert S3 DynamoDB AppSync Lambda API-GW Step Functions API-GW Amplify Amplify BFF Frontend Backend CloudFront Momento Cache アーキテクチャ

Slide 25

Slide 25 text

OIDC OIDC OIDC DynamoDB DynamoDB S3 MediaConvert S3 DynamoDB AppSync Lambda API-GW Step Functions API-GW Amplify Amplify BFF Frontend Backend CloudFront Momento Cache アーキテクチャ

Slide 26

Slide 26 text

Amazon DynamoDB AWS Lambda AWS Step Functions だいぶ省略してまして...

Slide 27

Slide 27 text

Amazon DynamoDB AWS Lambda AWS Step Functions 300+ 100+ 40+ Funcitons State Machines Tables

Slide 28

Slide 28 text

AWS Step Functions こんなのがたくさん

Slide 29

Slide 29 text

Amazon DynamoDB AWS Lambda AWS Step Functions 300+ 100+ 40+ Funcitons State Machines Tables 最初は半分くらいだったはず、、 2年で実施した大小100以上の機能改善の結果

Slide 30

Slide 30 text

今後の課題

Slide 31

Slide 31 text

AppSync と DynamoDB がひどい EpisodeGroup 1対多 1対多 DynamoDB AppSync Program Connection ConnectionEpisode Episode 1対多 1対1 1対1 初期ロード時に全てのデータを Recoil に格納 DynamoDB User ユーザ系のデータ（ログイン時）番組情報は全部で10MB くらい amplify-cli で、どんどん増やしちゃった番組系のデータ

Slide 32

Slide 32 text

Gen 2 と CDK でリファクタする DynamoDB AWS Amplify Gen 1 Gen 2 CDK と .ts amplify-cli とスキーマファイル

Slide 33

Slide 33 text

AWS Lambda 300+ Funcitons Lambda ランタイムのバージョンアップ nodejs16.x ->nodejs.18.x たのしくない！！ node16 が200+ くらい SDK も上がるので大変テスト書いてなかったのでJest の導入から... ついでにTS 化とCodeCatalyst でのCI/CD も新しい技術たのしいをモチベーションに SDK v2 SDK v3

Slide 34

Slide 34 text

できれば、Lambda も減らしたい AWS Step Functions Lambda を使うのは SDK で表現できないとき外のAPI を叩く時 State Machine のリファクタも進める！

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text