Vuetifyのバージョンがずいぶん前に2系にアップデートされたことで以前作成したサンプルが古くなってしまった。新しく2系でサンプルを作成したので、ついでにデプロイもGitHub Actionsで実装してみた。 作成したプロジェクトは以下。
vuetify2-test/gh-pages.yml at master · nulltemp/vuetify2-test · GitHub
GitHub Actionsについてはほとんど何も分からなかったが、以下を眺めたらなんとなく分かるようになった。
基本
Github ActionsでGithub Pagesを作成する解説記事。とりあえずまずこれを見ておけば何とかなる。
利用するアクション
GitHub Actionsでは公開されている様々なアクションを利用して処理をカスタマイズできる。以下は今回使用したアクション。
Github ActionsでGithub Pagesを作るアクション。今回のメイン。上記基本にある解説記事のサンプルも、ここのサンプルコードを参考にしたものと思われる。
デプロイのためのトークンは何故か公開鍵と秘密鍵を作るほうだとうまく鍵を作れなかったので、Personal Access Tokensを使う方向で実装した。必要な権限が分からなかったがrepoと書いてあったのでrepoの権限つけてトークン作成→秘密鍵に登録で普通に動いた。
Nodeのセットアップ。Yarnを使用しているのでYarnのアクションを使用しようかと思ったが、元々ベータ用に作成されたものですとか書いてあって辞めた。
node_modulesのキャッシュで使うアクション。特に必須ではないが、自分の作った小さいプロジェクトでもyarn installの時間が25s→9sくらいになったので、もっと大きなプロジェクトだと必須になると思われる。
Yarnを使う場合のサンプルはこちらで、最初はyarn-cache-dir-pathを何かに置換して設定しないといけないのかと思ったが、単にここの記述をそのまま書き込むだけでよかった。
YAMLを作ったらあとはプッシュしてSettingsからGitHub PagesのSourceを作成されたブランチに切り替えてやればうまくいくはず。
ただし自分はパスの設定をちゃんとしていなかったせいでちゃんと公開できていなかったので、veu.config.jsのpublicPathを変更してやることでちゃんと動くようになった。
vuetify2-test/vue.config.js at master · nulltemp/vuetify2-test · GitHub
パス云々の話は以下が参考になる（解決方法は微妙に違うが）。
