Vite+におけるGithub Pagesのデプロイ

デプロイ手順

Github Pagesをデプロイするには、vpというVite+専用のコマンドがGithub Actionsで利用できる必要があります（ローカルとデプロイで違うコマンドで作業を進めるのは怖いです）

ただすごいのが、公式では既にCI用のymlテンプレートがありました

https://github.com/voidzero-dev/setup-vp/blob/main/README.md

これを元に行えばあとは従来のviteでのデプロイ手順でできます

vite.config.tsのConfigで、`base: "/<repository-name>/",`を追加
.github/workflows/deploy.ymlの作成
GithubのSettings -> PagesのBuild and deploymentでGithub Actionsを選択

name: Deploy to GitHub Pages


on:
  push:
    branches: [main]


permissions:
  contents: read
  pages: write
  id-token: write


jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4


      # 公式のCI, Github Actionを使用
      - uses: voidzero-dev/setup-vp@v1
        with:
          node-version: "22"
          cache: true        # 依存関係のキャッシュも自動で実行
          run-install: true  # 自動でvp installを実行


      - name: Build with Vite+
        run: vp build


      - name: Setup Pages
        uses: actions/configure-pages@v4


      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: './dist'


      - name: Deploy to GitHub Pages
        uses: actions/deploy-pages@v4

あとがき

Vite+がリリースされました。

アルバイトでリンターやテストコードなどの利便性を享受していますが、いざ自分で作るには大変です。自分も一度やろうとして失敗しました。

このVite+はそういったリンターやフォーマッターも含んで環境構築できるとのことなので、まさにうってつけでした。

ただ環境構築をするのもつまらないので、ついでにデプロイもしてみたいと思いましたが、まだリリースされて日が浅いこともあり、デプロイ手順を挙げている人どころか、環境構築についてブログを書いている人すら数人しか見つからないほどです。

そこでせっかくなのでその手順を残してみました。

生成AIと格闘しても突破できなかった内容を、自分で公式で何か手順言っていないのか？って閃めくことができたことで、なんとか解決できました。アルバイト前はyamlやCIという概念すらまともに知らなかったのですが、ymlやCIがどういう流れで何をしているのかを体験することができたので、閃くことができたと感じます。

軽いデプロイとはいえ自分で開拓できたのは成長を感じることができて嬉しかったです。

Github Actionsおもしれー

Vite+におけるGithub Pagesのデプロイ

田中俊輔