---
title: setup-vp GitLab対応の裏側
tags: 
author: [Naoki Haba](https://docswell.com/user/naokihaba)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/57GL8331EL.jpg?width=480
description: 非公式 Vue Fes Japan 2026 タイムテーブル解説会 https://andpad.connpass.com/event/398631/
published: September 15, 26
canonical: https://docswell.com/s/naokihaba/ZQ2J9M-2026-10-15-131937
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/57GL8331EL.jpg)

setup-vp 
GitLab対応の裏側
Naoki Haba
非公式 Vue Fes Japan 2026 タイムテーブル解説会
September 15, 2026


# Page. 2

![Page Image](https://bcdn.docswell.com/page/4EQY955NJP.jpg)

setup-vp
Vite+ をCI環境で利用する際のセットアップを行なってくれる。
GitHub Actions／GitLab CI/CD／Azure Pipelines に対応。
https://github.com/voidzero-dev/setup-vp


# Page. 3

![Page Image](https://bcdn.docswell.com/page/KJ4WX99371.jpg)

ある日、Vite+ に要望が届く
“GitLab CI/CDでもVite+を使えるようにしてほしい”
https://github.com/voidzero-dev/vite-plus/issues/1920


# Page. 4

![Page Image](https://bcdn.docswell.com/page/LE1YNKKZ7G.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/GEWG4DD6J2.jpg)

setup-vp は 
GitHub Actions として
作られている
そのままGitLab CI/CDから利用することはできない。
GitHub Actionsでは “uses:” でGitHub上のリポジトリを
Actionとして参照できる。
GitLab CI/CDにはこれと同じ仕組みがない。


# Page. 6

![Page Image](https://bcdn.docswell.com/page/47ZL2GGRJ3.jpg)

setup-vp を 
GitLab CI/CD からも使いたい


# Page. 7

![Page Image](https://bcdn.docswell.com/page/YJ6WVYY1JV.jpg)

GitLab 側に mirror を作る？
実装コストは低い
しかし、更新同期・タグ・リリースの整合性など
CI対応のためだけに運用対象が増える


# Page. 8

![Page Image](https://bcdn.docswell.com/page/GJ5MDGGLJ4.jpg)

GitHub で管理したまま
GitLab CI/CD から参照したい
GitLab CI/CDには、外部URLのYAMLを読み込める
“include:remote” がある
1
 include:
2
- remote: "https://raw.githubusercontent.com/voidzerodev/setup-vp/..."


# Page. 9

![Page Image](https://bcdn.docswell.com/page/9E298YY37R.jpg)

include:remote で読み込めた
これで完成？
……ではなかった。「読み込める」と「実行できる」は別
include:remote は外部のYAMLをCI設定に追加する仕組み。
読み込めても setup-vp を動かすための Node.js. が 足りない


# Page. 10

![Page Image](https://bcdn.docswell.com/page/D7Y46GG8EM.jpg)

setup-vpを動かす

Node.jsを誰が用意する？


# Page. 11

![Page Image](https://bcdn.docswell.com/page/VENYZGG9J8.jpg)

GitLab CI/CDでは
実行環境をimageで選べる
1
test:
2
image: node:24
3
before_script:
4
- ./bootstrap.sh
5
- node dist/gitlab/index.mjs


# Page. 12

![Page Image](https://bcdn.docswell.com/page/Y79PZWW3E3.jpg)

setup-vpが
Node.jsを用意すればよくない？
技術的にはできる。でも、責務が広がる。
Node.jsのセットアップには考慮事項が増える
OS / CPU Architecture / Node.js Version / PATH …


# Page. 13

![Page Image](https://bcdn.docswell.com/page/G78D1NNL7D.jpg)

Node.js は GitLab CI/CDに
委ねる
GitLab CI/CDにはimage で実行環境を選ぶ仕組みがある。
GitLabにある仕組みを、setup-vpで作り直さない。
setup-vpの責務を、必要以上に広げない。


# Page. 14

![Page Image](https://bcdn.docswell.com/page/L7LMQPPQJR.jpg)

まとめ
OSSへの機能追加は、実装することだけではない。
期待・プラットフォーム・責務の「なぜ」を、愚直に一つずつ
理解していく。
その ”理解の積み重ね” が、トレードオフと向き合い、設計判断
するための土台になる。


# Page. 15

![Page Image](https://bcdn.docswell.com/page/4EMY142KEW.jpg)

Naoki Haba
Software Engineer at ANDPAD Inc.
Vite+ Team Member
Vue Fes Japan Core Team Member