VRTを自動化してみた

今回のお話のサイト

VRTを導入したもののローカルで手動実行する運用だったので
PRのたびに実行し忘れることがあり少し手間に感じていました。

せっかくVRTを入れたのでPRを作成したタイミングで自動実行されるようにしたいと思い
GitHub Actionsを導入することにしました。

GitHub Actionsとは

GitHub Actionsはコードのpushやプルリクエストなどをトリガーにして
あらかじめ設定した処理を自動実行してくれるCI/CDツールです。

GitHubに標準で備わっているので
別途サービスの登録が不要なのが嬉しいポイントです。

例えば今回のようにPRを作成したタイミングで
自動でテストを実行するといったことができます。

`.github/workflows/vrt.yml` を作成して
PR時に以下の流れで自動実行されるようにしました。

カラオケ喫茶HPはNext.jsの静的エクスポート構成なので
`next start` ではなく `serve` を使って静的ファイルを配信しています。

最初はサーバーを起動するステップを追加していなかったので
Playwrightがlocalhost:3000に接続できずエラーになりました。

`npm run start &` でバックグラウンド起動して
`wait-on` でサーバーの起動を待機するようにして解決しました。

Next.jsの静的エクスポート構成では `next start` が使えないことがわかりました。
`npx serve` を使って `out/` ディレクトリを配信する形に変更しました。

GitHub ActionsでベースラインをコミットしてPushしようとしたところ
detached HEAD状態になっていてPushできませんでした。

`git push origin HEAD:${{ github.head_ref }}`

でブランチ名を明示的に指定することで解決しました。

ローカル（Mac）で撮影したスナップショットはdarwin用で
GitHub Actions（Linux）では別のスナップショットが必要でした。

GitHub Actions上でスナップショットを自動生成して
コミットする仕組みを追加することで解決しました。

GitHub ActionsにリポジトリへのWrite権限がなかったため
pushが拒否されていました。

リポジトリの設定で `Read and write permissions` に変更して解決しました。

PRを作成するたびに自動でVRTが実行されるようになったので実行し忘れることがなくなりました。

ハマったことは多かったですが GitHub Actionsの仕組みを理解するいい機会になったと思っています