Tweet
Tweet

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 35

Slide 35 text

がんばります！

Slide 36

Slide 36 text

ありがとうございました！