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のパスが絶対パスになっているので,./
から始まるように修正が必要.
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がマージされた際も実行される.
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タブから見ることができる.
以上!
Discussion