setup-vp GitLab対応の裏側

非公式 Vue Fes Japan 2026 タイムテーブル解説会
https://andpad.connpass.com/event/398631/

Transcript

1. setup-vp GitLab対応の裏側 Naoki Haba 非公式 Vue Fes Japan 2026 タイムテーブル解説会 September 15, 2026
2. setup-vp Vite+ をCI環境で利用する際のセットアップを行なってくれる。 GitHub Actions／GitLab CI/CD／Azure Pipelines に対応。 https://github.com/voidzero-dev/setup-vp
3. ある日、Vite+ に要望が届く “GitLab CI/CDでもVite+を使えるようにしてほしい” https://github.com/voidzero-dev/vite-plus/issues/1920
4. GitLab CI/CD ごとに セットアップを自作する？ セットアップの実装・保守も利用者側の責務になる 1 2 3 4 5 6 7 - run: | curl -fsSL https://vite.plus | bash echo "$HOME/.vite-plus/bin" >> "$GITHUB_PATH" - run: vp env use 24 - uses: actions/cache@v5 - run: vp install
5. setup-vp は GitHub Actions として 作られている そのままGitLab CI/CDから利用することはできない。 GitHub Actionsでは “uses:” でGitHub上のリポジトリを Actionとして参照できる。 GitLab CI/CDにはこれと同じ仕組みがない。
6. setup-vp を GitLab CI/CD からも使いたい
7. GitLab 側に mirror を作る？ 実装コストは低い しかし、更新同期・タグ・リリースの整合性など CI対応のためだけに運用対象が増える
8. GitHub で管理したまま GitLab CI/CD から参照したい GitLab CI/CDには、外部URLのYAMLを読み込める “include:remote” がある 1 include: 2 - remote: "https://raw.githubusercontent.com/voidzerodev/setup-vp/..."
9. include:remote で読み込めた これで完成？ ……ではなかった。「読み込める」と「実行できる」は別 include:remote は外部のYAMLをCI設定に追加する仕組み。 読み込めても setup-vp を動かすための Node.js. が 足りない
10. setup-vpを動かす
 Node.jsを誰が用意する？
11. GitLab CI/CDでは 実行環境をimageで選べる 1 test: 2 image: node:24 3 before_script: 4 - ./bootstrap.sh 5 - node dist/gitlab/index.mjs
12. setup-vpが Node.jsを用意すればよくない？ 技術的にはできる。でも、責務が広がる。 Node.jsのセットアップには考慮事項が増える OS / CPU Architecture / Node.js Version / PATH …
13. Node.js は GitLab CI/CDに 委ねる GitLab CI/CDにはimage で実行環境を選ぶ仕組みがある。 GitLabにある仕組みを、setup-vpで作り直さない。 setup-vpの責務を、必要以上に広げない。
14. まとめ OSSへの機能追加は、実装することだけではない。 期待・プラットフォーム・責務の「なぜ」を、愚直に一つずつ 理解していく。 その ”理解の積み重ね” が、トレードオフと向き合い、設計判断 するための土台になる。
15. Naoki Haba Software Engineer at ANDPAD Inc. Vite+ Team Member Vue Fes Japan Core Team Member