vue-cli で作ったサイトを GitHub Pages にデプロイする

サーバー処理をしない静的サイトを公開するのには GitHub Pages が便利です。
クライアントで動く JavaScript は使えるので Vue.js で作ったサイトも公開できます。
Vue.js のプロジェクトは vue-cli から作るのがいいようなので Mac で vue-cli のインストールから GitHub Pages にデプロイするまでの手順です。

vue-cli のインストール

sudo npm install -g npm
sudo npm install -g @vue/cli
npm --version # 6.9.0
vue --version # 3.5.1

※ sudo npm install -g vue-cli でもインストールできるのですがバージョンが古く 2.9.6 でした。

プロジェクトの作成

vue create --default project-name

project-name ディレクトリが作成され git init された状態になります。
GitHub に空の project-name リポジトリを作成し push します。

cd project-name/
git remote add origin git@github.com:UserName/project-name.git
git push -u origin master

ビルド

GitHub Pages ではリポジトリの直下または docs ディレクトリを公開できます。
デフォルトだとビルド成果は dist ディレクトリに出力されるようになっているので vue.config.js を作成して設定を変更します。
※ vue-cli 2 だと config/index.js が予め存在していたのですがなくなっているので新規作成する。
また GitHub Pages の公開 URL に合わせて publicPath も変更します。

// vue.config.js
module.exports = {
    publicPath: '/project-name/',
    outputDir: 'docs'
}

ビルドコマンドで /docs を出力します。

npm run build

デプロイ

ビルドされて出来た docs ディレクトリを GitHub に push するだけです。
既に出力ディレクトリを変更しているので動作には影響しませんが意味合い的に .gitignore の /dist をコメントアウトまたは削除しておきます。

#/dist

Git でデプロイ。

git add ./
git commit -m "message"
git push

GitHub Pages の設定

GitHub 上でリポジトリの設定から Options にある GitHub Pages を有効にします。
[master branch /docs folder] を選択してください。
設定の項目に出てくる URL にアクセスできれば完成です。
※ CDN の反映に時間がかかるのかしばらくは 404 が表示されていました。

参考

Vue.js を vue-cli を使ってシンプルにはじめてみる
Vue CLI 3.0 で TypeScript な Vue.js プロジェクトをつくってみる
Vue CLI 3でsrcパスの変更方法

Tweet