ViteとGithub ActionsでPagesに自動ビルド（覚え書）

出尽くした情報かもしれませんが，自分への覚書として残しておきます．

リポジトリ→ tomkimra/vite-actions-test

1. Githubで空のレポジトリを作成

vite-actions-test という名前とします

2. Vite側のセットアップ

npm create vite@latest
✔ Project name: … vite-actions-test
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript
cd vite-actions-test/
npm i

npm run dev でテスト実行し，http://127.0.0.1:5173/ にアクセスすると問題なくテンプレートアプリが表示される．

ここでPagesにデプロイする場合，デフォルトは (名前).github.io/(リポジトリ名)/ というアドレスになり，デプロイしたいファイルで/から始まる絶対パスを使っているとパスがズレてちゃんと表示できなくなる．Viteで作成されるindex.htmlのjsやcssのパスが絶対パスになっているので，./から始まるように修正が必要．

vite.config.js

export default defineConfig({
  plugins: [vue()],
  base: "./", # 追加
})

とりあえずgit initでリポジトリにしておく．Viteではnpm run buildした際にdistフォルダに公開するファイルができるが，それをGithub側にやってもらうため，ここではスルー

作成したGithubのリポジトリにpushしておく

3. Actionsの作成

ここはこちらの記事を参照．Github ActionsによるGithub Pagesのデプロイを試してみた

Githubのリポジトリを開き，"Settings" から "Pages"
Build and deploymentのSourceをGithub Actionsにする

Static HTMLのテンプレートを選び，下記のようにビルドしてできるdistフォルダをデプロイするように変更．onをpushで設定すると，pushされた時も，pull requestがマージされた際も実行される．

deploy.yml

name: build and deploy

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: build
        run: npm i && npm run build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # ビルド生成物はdistフォルダ
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

上記をdeploy.ymlという名前でcommitする．これによりpushが起こり，最初のworkflowが実行される．
実行状況はリポジトリのActionsタブから見ることができる．

以上！