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

CloudNative DaysはカンファレンスのシステムをどうCI/CDしているのか

CloudNative DaysはカンファレンスのシステムをどうCI/CDしているのか

ツナカン(TUNA-JP Conference) #4 で話した資料です!
https://tuna-jp.connpass.com/event/254710/

システム運用で失敗した話については、Cloud Operator Days Tokyo 2021の発表をどうぞ
https://www.youtube.com/watch?v=T0KB_9wKvTw

Kazuto Kusama

August 22, 2022
Tweet

More Decks by Kazuto Kusama

Other Decks in Technology

Transcript

  1. CloudNative Daysはカンファレンスの
    システムをどうCI/CDしているのか
    Kazuto Kusama @jacopen

    View full-size slide

  2. Kazuto Kusama
    @jacopen
    Senior Solutions Engineer @HashiCorp Japan
    Co-Chair @CloudNative Days

    View full-size slide

  3. CloudNative Days
    2018年に、Japan Container Daysとしてスタート
    2019年からCloudNative Daysという名前に。福岡・東京・関西で開催
    2020年からオンライン開催。年1回のCloudNative Daysの他、テーマ特化型
    イベントを開催

    View full-size slide

  4. CloudNative Days
    国内最大の、クラウドネイティブの祭典
    6トラック同時配信、
    2日間でおおよそ70セッションという
    大規模カンファレンス

    View full-size slide

  5. 課題の多い、オンラインカンファレンスのUX
    勉強会や小規模カンファレンスの、
    1トラックの配信であれば
    それほど難しくない。
    ZoomなりYouTube Liveなりで
    垂れ流せば良い
    では複数トラックだと?
    13:00-13:40
    Aさんの発表
    14:00-14:40
    Bさんの発表
    15:00-15:40
    Cさんの発表

    View full-size slide

  6. 課題の多い、オンラインカンファレンスのUX
    セッションごとに別のYouTube Liveを埋
    め込みパターン
    視聴者はセッションが終わるごとにリン
    クをクリックして,次のセッションを
    表示する
    ⇒ とても体験が悪い

    View full-size slide

  7. 課題の多い、オンラインカンファレンスのUX
    トラックごとに別のYouTube Liveを埋め
    込みパターン
    視聴者は視聴したいセッションが別ト
    ラックにある場合、リンクをクリックし
    てトラックを移動する必要がある
    ⇒ これもあまり体験が良くない
    もっと簡単な操作で、複数トラックを
    渡り歩けるUIであるべき

    View full-size slide

  8. 他にも欲しい機能が沢山ある
    ● スポンサーのロゴを画面に表示したい
    ○ 既存の仕組みだと、動画側にうまく埋め込む必要がある
    ● 事前収録・オンライン登壇・会場登壇をうまくミックスしたい
    ○ OBS等を活用して職人芸でスイッチング作業する
    ● スポンサーに提供する「リード」を取得したい
    ○ 参加者の情報をどうやって取得するか。
    YouTube Liveではそういった情報は取れない。
    ● できればイベントの告知は配信と同じサイトで行いたい
    ● できればCFPなども同じサイトで募集したい
    ● などなど

    View full-size slide

  9. 以前からモヤモヤしていたこと
    2018年のJapan Container Daysや2019年のCloudNative Daysは
    会場を借りてのリアル開催。
    良いイベントが出来たとは思うが、カンファレンスの運営でクラウドネイ
    ティブ技術を活用する余地はあまりなかった。
    クラウドネイティブ技術を体験
    できる参加型コンテンツ
    「showKs」などの企画もやった
    が、あくまでもコンテンツのひと
    つでしかなかった。

    View full-size slide

  10. 以前からモヤモヤしていたこと
    オンライン開催にあたっては、既存ベンダーのCMSをカスタマイズしてもら
    う案もあったが、柔軟なカスタマイズは行ってもらえそうになかった。
    また、カスタマイズのための要件定義やコミュニケーションもメール経由で
    しか受け付けてもらえないとのことだった。

    View full-size slide

  11. じゃあどうするか
    理想のカンファレンスを実現するには
    システムを内製するしかない!

    View full-size slide

  12. イベントプラットフォーム「Dreamkast」
    CloudNative Daysへの参加申し込みや、
    カンファレンスの視聴が行えるWebアプリケーション。
    設計のコンセプトは
    「大晦日のテレビ感覚で見られるUX」
    ・歌合戦
    ・笑ってはいけない
    ・格闘技
    ・トークバラエティ
    ・グルメ
    ずっと同じ番組を見ても良いし、好きな人が出ていると
    きだけその番組に切り替える、あるいはチャンネルを回
    して面白そうなものを見るという視聴スタイル

    View full-size slide

  13. ワンボタンでトラック切り替え
    選択トラックの過去セッション
    を視聴することも可能
    チャットとQ&Aを一体化
    視聴中セッションの情報 スポンサーロゴ

    View full-size slide

  14. イベントプラットフォーム「Dreamkast」
    イベント告知ページ タイムテーブル イベント参加申込
    配信視聴 プロポーザル
    応募フォーム
    スピーカー向け
    ダッシュボード

    View full-size slide

  15. メンバー
    初期メンバー
    現在
    役割は、ざっくり分けると
    ・バックエンド/API開発
    ・フロントエンド開発
    ・インフラ/プラットフォーム
    の3つ (兼務も多い)

    View full-size slide

  16. テクノロジースタック
    2020年6月に開発をスタート。
    この時点で本番まで3ヶ月しかなかったので、とにかく開発の効率性を最優
    先に考え、初期メンバーのjacopenやr_takaishiが知見を持ち合わせていた
    Ruby on Railsを利用したモノリシックなアプリケーションに。
    プラットフォームはHerokuを利用。
    言語・フレームワーク リポジトリ IdP
    プラットフォーム
    動画配信

    View full-size slide

  17. DreamkastとCI/CD
    開発メンバーは全員がコミュニティ活動の一環として参加しており、プラ
    イベートの時間を割いて開発している。
    なので、平日夜や休日のほんの数時間しか使えない。
    だからこそ、少ない労力でチーム開発を行っていくためのCI/CDの整備は
    開発における生命線であり、開発の初手から最優先で整備した

    View full-size slide

  18. Dreamkast v1
    2020/09 - CloudNative Days Tokyo 2020

    View full-size slide

  19. Review App
    DreamkastとCI/CD
    コードを修正し、GitHubにPull Requestを作成すると、GitHub Actionsによって自動的にテストを
    実行する(CI)。
    また、自動的にレビュー用アプリがHeroku上に作成され、動作確認ができる。PRがマージされると
    自動的にStagingにデプロイされる(CD)。Productionへは手動トリガーでデプロイ
    Pull Request
    Main Branch
    GitHub ActionsでRSpec実行(CI)
    Merge
    Staging
    Production
    PRごとにレビュー用アプリ
    を自動デプロイ
    自動デプロイ
    自動デプロイ(トリガーは手動)
    Commit

    View full-size slide

  20. DreamkastとCI/CD
    6/15 初回コミット
    ~6/22 手元でプロトタイプ実装
    6/18 本番向けプラットフォーム検討開始
    6/25 Continuous Deliveryできるようにアプリを修正
    6/27 プラットフォームをHerokuに決定
    7/2 レビューアプリデプロイを自動化

    View full-size slide

  21. Review App
    DreamkastとCI/CD
    Pull Request
    Main Branch
    GitHub ActionsでRSpec実行(CI)
    Merge
    Staging
    Production
    PRごとにレビュー用アプリ
    を自動デプロイ
    自動デプロイ
    自動デプロイ(トリガーは手動)
    Commit
    コードレビュー 動作確認
    レビューして問題無ければ
    Approve

    View full-size slide

  22. 無事、イベントを開催できました
    2020/09/07

    View full-size slide

  23. 本番中にもバリバリ開発・リリース
    ● 正直言うと結構不具合起きた
    ● 不具合報告を受けたらイベント中でも即座に修正・リリース
    ● すぐに実現出来る機能要望やフィードバックは即実装・リリース
    イベント開催中にリアルタイムで
    修正して反映している

    View full-size slide

  24. DreamkastとCI/CD
    開発メンバーは全員がコミュニティ活動の一環として参加しており、プラ
    イベートの時間を割いて開発している。
    なので、平日夜や休日のほんの数時間しか使えない。
    だからこそ、少ない労力でチーム開発を行っていくためのCI/CDの整備は
    開発における生命線であり、開発の初手から最優先で整備した
    時間が無いからCI/CDの整備は後回し・・・というケースも多いが悪手
    時間が無い・人が居ないからこそ、優先的にCI/CDを構築すべき

    View full-size slide

  25. Dreamkast v1 - 良かったことと気になったこと
    ● 本番まで3ヶ月を切る中で、ゼロから開発を開始して本番にこぎ着けた
    RailsとHerokuの生産性すごかった
    ● CI/CDを初手から行ったおかげで上手く分担して開発が出来た
    ● HerokuがビルトインでCD周りを提供してくれたのが最高に助かった
    ● 総じてテクノロジー選択は最適だったと思う
    気になったこと
    ● クラウドではあるがクラウドネイティブではない
    ○ テクノロジースタックとしては枯れているもの。今回はポジティブ面が
    目立ったが、今後どうなるか?
    ● DB周りの安定度
    ○ Heroku AddonのDBは本番向けには難が多く、直前にAmazon RDSに切り替
    えた
    ● UI周りの開発が早々に限界に
    ○ jQueryを使ったが、インタラクティブなUIの作成には向いていないと感じた

    View full-size slide

  26. Dreamkast v2
    2021/03 - CloudNative Days Spring 2021 ONLINE

    View full-size slide

  27. テクノロジースタック
    UXを改善して行くにはフロントエンドの進化が必須。
    そのため、視聴UIをNext.jsを使ったアプリケーションに分離。Railsから
    APIで情報を渡すように。
    インフラはAWSに移行し、EKSを中心にAWSのサービスを利用。

    View full-size slide

  28. Deployment
    デプロイにはArgoCDを利用。Contourを使ってDreamkastとUIをPath
    based routing
    RDS
    ElastiCache
    S3

    View full-size slide

  29. Review Apps
    HerokuのReview apps機能の開発体験がとても良かったので、k8sでも実
    現したいと思った。そこで、Pull Requestが上がるとActionsでManifest
    を生成して、Infra Repositoryにコミットするようにした。
    いわゆるGitOpsで一式が揃ったReview Appが立ち上がるように。
    Pull Request
    Commit
    Dreamkast
    Repository
    Infra
    Repository
    Unit Test
    Image Build
    Manifest生成
    HTTPProxy

    View full-size slide

  30. 無事、イベントを開催できました
    2021/03/11

    View full-size slide

  31. Dreamkast v2.x
    2021/09 - CI/CD Conference 2021
    2021/11 - CloudNative Days Tokyo 2021
    2022/03 - Observability Conference 2022

    View full-size slide

  32. ReleaseBot
    @kanatakitaが作ってくれた、Production環境へのリリースを、Slackか
    らのChatOpsで行えるようにするBot。ものすごくリリース作業が楽に
    なった。
    出先でも風呂からでも、スマホさえあればリリースが出来る

    View full-size slide

  33. reviewapp-operator
    GitHub Actionsで頑張ってやっていたReview app作成を、K8sの
    Operatorで実現できるようにした。
    GitHubのPull Requestをチェックし、新しいPRがあればManifestを作成
    してInfra Repoにコミットし、アプリのURLをPRにコメントする。

    View full-size slide

  34. reviewapp-operator
    実装については、主開発者の @kanatakita の記事に詳細があります
    https://zenn.dev/kanatakita/articles/about-reviewapp-operator

    View full-size slide

  35. Dreamkast v3
    2022/08 - CloudNative Security Conference 2022

    View full-size slide

  36. reviewapp-operator

    View full-size slide

  37. reviewapp-operatorは退役しました

    View full-size slide

  38. ArgoCD ApplicationSet
    ArgoCD v2.3からArgoCD本体に取
    り込まれた仕組み。
    ArgoCDのApplicationをまとめて生
    成・管理できる。

    View full-size slide

  39. ArgoCD Application
    これまで取っていたパターン
    Pull Request
    pr-123
    App Repo
    Infra Repo
    Pull Request
    pr-124 Dreamkast
    Deployment
    Dreamkast UI
    Deployment
    Contour
    HTTPProxy
    MySQL
    Statefulset
    Redis
    Statefulset
    ArgoCD Application (pr-124)
    Dreamkast
    Deployment
    Dreamkast UI
    Deployment
    Contour
    HTTPProxy
    MySQL
    Statefulset
    Redis
    Statefulset
    ArgoCD Application (pr-123)
    App-of-apps pattern
    PRチェック
    Manifest生成

    View full-size slide

  40. ArgoCD
    Application
    ArgoCD
    Application
    apiVersion: argoproj.io/v1alpha1
    kind: ApplicationSet
    metadata:
    name: dreamkast-dk
    namespace: argocd
    spec:
    generators:
    - pullRequest:
    github:
    owner: cloudnativedaysjp
    repo: dreamkast
    template:
    metadata:
    name: 'dreamkast-dk-{{number}}'
    spec:
    project: reviewapps
    source:
    repoURL: https://github.com/cloudnativedaysjp/dreamkast-infra.git
    targetRevision: main
    path: manifests/app/dreamkast/overlays/development/template-dk
    ApplicationSet
    Pull Request
    pr-123
    App Repo
    Pull Request
    pr-124
    ArgoCD ApplicationSet
    ApplicationSet Controller

    View full-size slide

  41. Dreamkast v3.x / v4
    2022/11 - CloudNative Days Tokyo 2022
    and Beyond

    View full-size slide

  42. イベント運営の全てをコード化
    Amazon IVS MediaLive
    Dreamkast Team
    Broadcast
    Team
    OBS Studio
    cndctl
    After Effects
    Export
    動画自動生成
    Observability
    Team
    Monitor
    Stats
    Promotion Team
    Export Export

    View full-size slide

  43. ハイブリッドイベント対応

    View full-size slide

  44. Kubernetes以外の活用
    API Gateway
    Lambda
    ECS
    EKS
    DynamoDB
    新機能
    Amplify
    Promo
    Web
    Heroku時代に比べるとコストが10倍に
    跳ね上がってしまったため、k8sである
    必要がないアプリはAWSの機能で運用し
    ていきたい

    View full-size slide

  45. Kubernetes以外の活用
    API Gateway
    Lambda
    ECS
    EKS
    DynamoDB
    新機能
    Amplify
    Promo
    Web
    これをどうやってCI/CDしていくかは
    チャレンジ

    View full-size slide

  46. CloudNative Days Tokyo 2022
    ● 11/21-22に開催!
    スケジュール空けておいて下さい!
    ● CFPは9月中旬に開始!
    ネタ考えておいてください!
    ● (たぶん)
    ハイブリッド開催!
    オンラインでもオフラインでも登壇でき
    るし参加出来ます

    View full-size slide