Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Kazuki Miura
October 08, 2022

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

https://jawsdays2022.jaws-ug.jp/sessions/C20/

#jawsdays #jawsdays2022 #jawsdays2022_c

Kazuki Miura

October 08, 2022
Tweet

More Decks by Kazuki Miura

Other Decks in Technology

Transcript

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

    View full-size slide

  2. 自己紹介
    #Sauna
    #Sapporo
    #HTB
    #Amplify
    #StepFunctions
    #Serverless
    #AWSSamurai2019
    #Marvel
    #Hinatazaka46
    #radio
    三浦一樹(36)

    View full-size slide

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

    View full-size slide

  4. #JAWSDAYS
    #JAWSDAYS2022
    #JAWSDAYS2022_C

    View full-size slide

  5. 札幌会場の様子

    View full-size slide

  6. 前夜祭もやったよ

    View full-size slide

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

    View full-size slide

  8. 裏番組は
    こんな感じ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. ゼロから始める内製開発

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. VPC LESS
    VPC LESS
    VPC LESS

    View full-size slide

  16. Amplify AppSync Step Functions

    View full-size slide

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

    View full-size slide

  18. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. S3 MediaConvert S3
    DynamoDB
    DynamoDB
    DynamoDB
    AppSync
    Lambda
    API-GW
    Step Functions
    API-GW
    Amplify
    Amplify
    担当者向け
    CMS
    倉庫
    システム
    BFF
    ざっくりアーキテクチャ
    Frontend Backend
    OIDC
    OIDC
    OIDC

    View full-size slide

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

    View full-size slide

  32. Amplify AppSync Step Functions

    View full-size slide

  33. Amplify AppSync Step Functions

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. Amplify backend
    amplify-cli
    DynamoDB
    DynamoDB
    DynamoDB
    AppSync
    BFF
    Backend
    スキーマを書いて
    AppSync
    の裏にある
    DynamoDB

    その connection
    を定義し
    てデプロイ

    View full-size slide

  39. Amplify backend
    +

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. Amplify AppSync Step Functions

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. Amplify AppSync Step Functions

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  51. Step Functions
    Workflow Studio
    がすごい!!

    View full-size slide

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

    View full-size slide

  53. Step Functions

    View full-size slide

  54. Amplify AppSync Step Functions
    再現性のある形で
    事業に近い開発に時間を割くことが出来た


    コスト低め、運用負荷低め

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  58. WE WERE HIRING

    View full-size slide

  59. WE WERE HIRING

    View full-size slide

  60. WE WERE HIRING

    View full-size slide