setup-vp GitLab対応の裏側

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