Vite + Vue3のプロジェクトをGithub Pagesを使って5分でデプロイする

目的

タイトルの通り今ちょっとしたwebアプリを開発していて、完成はしていないが一旦デプロイしようと思い、一番簡単なイメージかつまだ経験のないGithub Pagesを利用してみることにした。

結論

作業時間自体はうまくいけば5分もかからないが、詰まることはあるかもしれない。

前提

Githubにレポジトリを既に作成済みで、使い方もなんとなくわかっていること

方法

mainもしくはmasterブランチに変更

去年masterからmainにデフォルトブランチ名が変更されたが、変わらずmasterを使っている場合はmasterに作業ブランチを切り替える。
このブランチがデプロイするブランチという認識。

vite.config.tsをいじる

ブランチをmainかmasterに変更したら、vite.config.tsを少し変更する。
自分の場合はVuetifyとか使っているので、読者の方とは違うかもしれないが、base: '<REPO_NAME>',をdefineConfigに追加すれば問題ない。
にはGitのレポジトリ名を入れてくだちゃい。

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from '@vuetify/vite-plugin' 

const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  base: 'QiitaSearch', //追加
  plugins: [
    vue(),
    vuetify({
      autoImport: true,
    }),
  ],
  define: { 'process.env': {} },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

ビルドする

自分はyarnでpackage.jsonの"scripts"を参考に下記コマンドを実行する。

yarn build

これでルートディレクトリにdistフォルダが追加され、その中にビルドされたindex.htmlとassets/jsファイルなど、が追加される。

変更をステージング、コミット

いつもはgit add .とかで全ての変更をステージングしているかもしれない。
今回はdistだけステージングする、かつ.gitignoreでdistがgitに追加できないように指定されている。
そのため-fで強制的にdistファイルをgh-pagesブランチにのせる

git add dist -f
git commit -m"adding dist"

リモートにまだ存在しないgh-pagesブランチにpushする

git subtree push --prefix dist origin gh-pages

確認する

Settings > Pages > Your site is published at https://USER_NAME.github.io/REPOGITORY_NAME
という形で表示されている

もっと簡単にしたい人へ

実はステージング〜pushまでを簡単に行える方法がある。
gh-pagesというまさにこの作業のためのライブラリである。
こちらをインストールするっす。

npm install gh-pages

これでgh-pagesコマンドが使えるようになったため、package.jsonをいじってyarn deployだけでステージング〜pushまでを行えるようにする。

package.json

"scripts": {
    "serve": "vite preview",
    "build": "vite build",
    "dev": "vite",
    "preview": "vite preview",
    "deploy": "gh-pages -d dist" // 追加
  },

こうすることで、masterブランチ上で下記の二つのコマンドを入力するだけで、デプロイが可能になる、、

yarn build
yarn deploy

これからgithub actionとか使ってCI/CDをもっとガッツリ実装していくので、少々お待ちください！

参考