FanstaでのCI/CD・自動化の取り組み

Slide 1

Slide 1 text

Slide 2

Slide 2 text

・Twitter: syossan27 ・何でもやる便利なおじさんです（最近はSREの真似事をやっています）

Slide 3

Slide 3 text

©mixi, Inc, All rights reserverd. 前置き • 時間が短いので進行が早くなりますがご容赦ください • Fanstaではアプリも扱っていますが、時間の関係上Webのみの説明とさせていただきます • 大部分が私の加入する前に構築されていたため、技術選定などについては質問にお答え出来ない部分もございます • Fanstaはリリース１年ほどが経ったばかり＆SRE活動をやっているのが私一人のまだまだやりたいことがやれてないプロジェクト、という前提でお聞きくださると幸いです 3

Slide 4

Slide 4 text

©mixi, Inc, All rights reserverd. Fanstaでの取り組み - CI/CD 4

Slide 5

Slide 5 text

©mixi, Inc, All rights reserverd. Fanstaでの取り組み - CI/CD 5

Slide 6

Slide 6 text

©mixi, Inc, All rights reserverd. Fanstaでの取り組み - CI • API（Ruby/Rails） • RSpec • RuboCop • Frontend（Next.js/TypeScript） • ESLint • Jest • Lighthouse • 計測結果をCircleCIのアーティファクトに乗せているが活用出来てない・・・ • リリースPR自動作成くん • featureブランチがdevelopブランチにマージされるとstagingブランチへのリリースPRを作成 • developブランチがstagingブランチへマージされるとproductionブランチへのリリースPRを作成 • 内訳はgit-pr-releaseを各ブランチへのpushをトリガーにしたGitHub Actionsで動かしてます 6

Slide 7

Slide 7 text

©mixi, Inc, All rights reserverd. Fanstaでの取り組み - CD - GitHub -> CircleCI • デプロイタグを契機にCircleCIが動き出す • GitHub ActionsでPRのデプロイコメントを検知してデプロイタグ付け • このタイミングで「開発環境の使用状況分かるくん」も動き出す ※「開発環境の使用状況分かるくん」についてはこちらを参照 https://syossan.hateblo.jp/entry/2021/12/22 7

Slide 8

Slide 8 text

©mixi, Inc, All rights reserverd. Fanstaでの取り組み - CI/CD 8

Slide 9

Slide 9 text

©mixi, Inc, All rights reserverd. Fanstaでの取り組み - CD - Docker image • CircleCIでDocker imageをbuild, push • google/cloud-sdkをExecuterに設定 • Docker imageをbuildし、CIRCLE_SHA1をtagにする • GCPのContainer RegistryにDocker imageをpush • 部内で作成されたデプロイツールでIaCリポジトリへコミット • yq（jqのYAML版）やkustomizeで、IaCリポジトリにあるmanifestsのimage tagを書き換えるPRやコミットを送る • FanstaのIaCリポジトリでは、Helmでk8s manifestsを管理しています • （ついでに）またCIの取り組みとして、kubeconformを使ったvalidationを行っています • ArgoCD Image Updaterでも似たようなことをしていたりします https://mixi-developers.mixi.co.jp/kubeconform-2bb477371e06 9

Slide 10

Slide 10 text

©mixi, Inc, All rights reserverd. Fanstaでの取り組み - CI/CD 10

Slide 11

Slide 11 text

©mixi, Inc, All rights reserverd. Fanstaでの取り組み - CD - ArgoCD • 最後にIaCリポジトリの変更を検知したArgoCDがGKEへデプロイ • ArgoCD自体もGKEで動かしています • ドキュメントも充実していて普段動かすには困らないんですが、ArgoCD自体の不具合が起こった時に解決するのがめんどい・・・（ログが追い辛い • ArgoCD Notificationsでデプロイが終わったらSlackで通知、とか出来たりします • 類似ツールにSpinnakerやCAさんが作られているPipeCDなどがあったりします ※各種ツールの比較についてはこちらの記事が分かりやすかったので紹介 https://www.pospome.work/entry/2022/02/19/153136 pospomeのプログラミング日記 - k8sの各種CDツールを比較する 11

Slide 12

Slide 12 text

©mixi, Inc, All rights reserverd. Fanstaでの取り組み - CI/CD - まとめ • 基本に忠実なCI/CDを組んでいる！・・・つもり • git-ops-toolのところが他社ではArgoCD Image Updaterになっていたりするかも • CIがもうちょっとなんか出来んかとは思っているところ（継続的にコードカバレッジ見たいとか要望は出ている） • ArgoCD Notificationとかもっと色々積んでみたいが検証時間が・・・ • 現状維持を良しとしない • 気持ち的には「動いてるからまぁいっか」で済ませてしまいそうになる • より利便性を求めて開発者体験を上げるために改善箇所を見つけていく姿勢 • 開発者の「これ使いづらいんだよな〜」を拾い上げる施策などなど • Fanstaでは相談タイムを週１で設けている 12

Slide 13

Slide 13 text

©mixi, Inc, All rights reserverd. 【時間があったら】Fanstaでの取り組み - 自動化 • トイル（繰り返し手作業が発生するタスク）を見つけたら撲滅するよう、色々とちまちま作っている • スクラム関連 • バーンダウンチャートを手動で管理していた • スプレッドシート × BQでポイント管理＆バーンダウンチャート出力 • スプリントプランニングの際に今何ポイント積んだかが分かりづらかった • GitHub Project上にステータス毎の今のポイント数を表示するChrome拡張 • 通知関連 • ImageFluxの障害やメンテナンス情報がメールで来ていた • Slackに流すようにGAS作成 • インフラ作業をお任せしていたらIAPが外れていることがあった • IAPが外れているか都度確認するGAS作成 • PMがTwitterでFanstaのことが呟かれているか都度検索していた • SlackにFanstaに関するツイートが流れるようにGAS作成その他etc… 13

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

©mixi, Inc, All rights reserverd. • Cloud Functions（Go） • GitHub ProjectのCustom Fieldsでポイントを作成し管理 • GitHub Project betaの情報はGraphQL APIで取れるので、shurcooL/githubv4を使って取得 • 取得し加工したポイント情報をBigQueryに格納 • Google Spread Sheet • BQ連携するとBQテーブルがシートとして出力される • データを抽出してセルに起こす • GSSからGAS -> CFを実行するボタン作成（認証を入れる場合直接は無理なので間接的に） • チャートをチェックする際に都度CF実行＆BQ更新 • 次のスプリントになったら抽出期間を変更【時間があったら】Fanstaでの取り組み - 自動化 - 抜粋解説 17