よそ様のgithubリポジトリを初めて使ってみたら、最高の開発者体験ができた話（vue + githubActions + github-pages)

対象読者

vuecliやnuxtなど、静的サイトを生成するツールで静的サイトをローカルでビルドし、githubにプッシュすることでgithub pagesでホスティングしている人すべて

やること

github actionsを利用して、ローカルでのビルド時間を0秒にする

背景

コロナの影響で時間ができたため、サークルを企業に紹介する静的サイトを作成しようと思い、github pagesをテスト環境にしてメンバーからのフィードバックを得るということをしていました。使用していたのはvuecliだったので、開発中は

npm run serve

このコマンドでホットリローディングしながら常時localhost:8080にアクセスしてコーディングしていました。
サークルメンバーも同様にコロナの影響で暇しているので、フィードバックはとても早く「これってこんな感じがいい？」と実際にコードを書きながら確認することが多くありましたが、ここに若干めんどうなところがありました。
github-pagesに公開する際は、

npm run build

してからリモートに上げることでgithub-pagesの内容を更新していました。ところがこのコマンドを叩くには一旦Ctrl + Cでタスクキルする必要があり、ビルド後再度npm run serveを打たなくてはいけませんでした。これは非常に面倒です。

解決策

調べたところ、github actionsという、github上での様々なイベントをトリガーにlinux,Windows,Macのインスタンス（コンテナの方があっているのでしょうか）を無料で利用でき、そのうえで自由に仕事をさせることができることを知りました。これを設定しておけば、以下のように改善することができます。

before.sh

npm run serve # hot reloading
Ctrl + C
npm run build # 一分ほどTwitterを見に行く
# ビルド結果をgithub-pagesにプッシュ => 公開
npm run serve

after.sh

npm run serve # hot reloading
# ソースコードをgithubにプッシュ => github上でビルド => 公開

gitの操作はGithub Desktopを利用しているため、最初にホットリローディングを開始すれば、開発中途切れさせる必要はありませんでした。ビルドとサーブの開始でTwitterを見に行く必要はもうありません。

github actionsに先駆者がいた。

本題です。
もともとはこの部分を「よし！僕がいっちょ作って公開してQiitaにアウトプットしたら大ヒットや！」と考えいろいろ調べていたところ、同じ考えをした（しかも後続にやさしい）先駆者がいました。
https://github.com/peaceiris/actions-gh-pages
Qiitaで日本語記事も書いてくださっています（神）
https://qiita.com/peaceiris/items/d401f2e5724fdcb0759d

github actionsには、再利用可能にパッケージ化されたワークフローが公開されており、この作者peaceiris様も公開してくださっていました。
このアクションはビルドされた静的コンテンツを入れたディレクトリのパスを渡すだけで、あとはgithub pagesに公開してくれるものです。

え？ビルド結果を特定のディレクトリに入れて公開するだけなら簡単そう

と僕と同じように思う方も多いと思いますが、github actionsで生成されたものはActionsの終了と同時にすべて破棄されてしまいます。また、リモートにコミットして反映させる手法も確かに取れますが、この作業が非常にだるく、このコミットによってループにならないようにしたり、そもそも権限を付与してあげないといけなかったりと、とにかくめんどう！その点、このワークフローはビルド結果のディレクトリと指定されたトークンやシークレットを渡すだけで公開してくれるため、神がかっているのです。

それぞれの方法については作者様のgithubリポジトリに紹介されているので、ご参照ください。私も今回は
https://github.com/marketplace/actions/github-pages-action#%EF%B8%8F-vue-and-nuxt
こちらをコピペして、npm run generateをnpm run buildに書き換えた程度でした。（package.jsonに定義したビルドコマンドに合わせただけ）
細かいことも、ここで下手に説明するより上記URLから参照したほうがよろしいかと思いますので省きます。

詰まったところ

github pagesの設定をもともとmaster ブランチのdocsディレクトリに設定していたため、ビルド結果が反映されず、あれ？となりました。設定ページでgh-pagesブランチに設定しなおしたところちゃんと反映されましたので、導入前からgithub-pagesを利用していたが、なぜかビルド結果が反映されないというかたは参考になるかもしれません。

最後に

nodejsやaxiosといった大手のOSSを利用することはあれど、個人開発のリポジトリを利用するというのは初めてで、最初は「動くのかなあ」とか「動かなかったらデバッグめんどくさそうだ...」と消極的でした。しかし利用し始めてみるとドキュメントも充実していて使いやすく、また、原因不明な不具合なども発生しませんでした。いいプロジェクトに出会えたから、という理由も大きいとは思いますが、githubでよそ様の作ったものを取り入れてみようかなとも思ったというお話でした。