ci: Storybook を VRT へ送るワークフローを追加 - #491
Open
yupix wants to merge 5 commits into
Open
Conversation
apps/frontend の Storybook をビルドし、セルフホストの VRT (https://vrt.koyori.app) へアップロードして baseline と比較する。 Chromatic の onlyChanged に相当する --only-changed を使い、変更された ストーリーだけを撮影対象に絞る。 vrt CLI はリリース配布が無いため koyori-app/vrt を checkout して ソースからビルドする。ビルドが重いのでバイナリを VRT_REF 込みのキーで キャッシュし、ヒット時は checkout から build までを丸ごとスキップする。 VRT_REF は可動 ref にするとキーが変わらないまま上流だけ進んで古い バイナリを使い続けるため、コミット SHA で固定する。 CI 固有の前提: - vrt の .cargo/config.toml が Linux で mold リンカを要求するため apt で mold を入れる - --only-changed は baseline コミットまでの git 履歴を辿るため fetch-depth: 0 が必要。shallow clone では全撮影へフォールバックする - --only-changed は storybook build --stats-json が出す preview-stats.json を使う 利用には Actions secret の VRT_TOKEN が必要 (スコープは write:build と read:build の両方)。
Deploying koyori with
|
| Latest commit: |
0565f06
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://79a5c5c3.koyori.pages.dev |
| Branch Preview URL: | https://ci-vrt-storybook.koyori.pages.dev |
pull_request イベントでは actions/checkout が既定で main へのマージ コミットを detached HEAD で置くため、CLI の `git rev-parse --abbrev-ref HEAD` が "HEAD" を返して次のエラーで終了コード 2 になっていた。 failed to resolve branch from git: detached HEAD: pass --branch explicitly --branch を明示的に渡すよう修正する。あわせて checkout する ref を PR の head コミットに変更する。理由は 2 つ: - CLI の差分は `git diff <baseline> HEAD` を使う。マージコミットのままだと main 側の変更まで差分に混ざり、撮影対象が不必要に広がる - VRT に記録される commit SHA は GitHub App がコミットステータスを貼る先に なる。マージコミットは GitHub 上に残らないため、PR ブランチに実在する head SHA でなければステータスを貼れない push イベントでは pull_request コンテキストが空になるため github.sha / github.ref_name にフォールバックする。
- fork 由来の PR には VRT_TOKEN が渡らず必ず失敗するため、job レベルの if で skip - vrt-actions の cli-version 既定値 latest を cli-v0.1.0 に固定し、将来の Release 公開で挙動が変わらないようにする
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概要
apps/frontendの Storybook をビルドし、koyori-app/vrt-actionsを使ってセルフホストの VRT (https://vrt.koyori.app) へアップロードし、baseline と比較するワークフローを追加する。Chromatic の
onlyChanged: trueに相当するonly-changed: trueを使い、依存グラフ上で影響のあるストーリーだけを撮影対象に絞る。マージ前に必要な設定
Actions secret
VRT_TOKENの登録が必要（未設定だとアップロードのステップで失敗する）。VRT の Settings → Personal access tokens で発行し、スコープは
write:buildとread:buildの両方を付ける（結果待ちにread:buildが要る）。構成
apps/frontend（push: main / PR:apps/frontend/**変更時）koyori/taskkoyori-app/vrt-actions（コミット SHA で固定）VRT CLI をリポジトリから checkout して Rust でビルドする構成はやめ、
vrt-actionsにアップロード、finalize、結果待ちを委譲する。これにより mold / Rust / sccache / CLI バイナリキャッシュのセットアップが不要になり、ワークフローを簡素化できる。vrt-actionsは Storybook モードでkoyori-app/vrtの Release から対象ランナー向け CLI を取得し、チェックサムを検証して実行する。Action 自体は既存ワークフローの規約に合わせて 40 桁のコミット SHA で固定している。CI 固有の前提
only-changedは baseline コミットまでの git 履歴を辿るためfetch-depth: 0が必要。shallow clone だと履歴が足りず全撮影へフォールバックするonly-changedはstorybook build --stats-jsonが出すpreview-stats.jsonを使うvrt-actionsが PR head の情報を優先して解決する差分検出時の挙動
wait: trueの結果がそのまま step / job の結果になる。passed,approvedchanges_detectedfailed,rejected, 想定外視覚差分は「バグ」ではなく「レビュー待ち」なので、CI を赤くしたくない場合は最後のステップに
continue-on-error: trueを付けるか、wait: falseにする。この選択肢はワークフロー内のコメントにも記載してある。確認したこと
git diff --checkが成功vrt-actionsのaction.yml/ README と input 契約を確認uses:はすべて 40 桁のコミット SHA で固定