VercelのRemote Cacheが無料開放されたのでTurborepoのRemote Cache Serverとして早速導入してみた
こんにちは、個人開発をしている最中にturborepoのcacheどう管理しようかと悩むことあると思います。
GitHub Actionsなら actions/cache で .turbo をでキャッシュしたり、
自前でRemote Cache Server環境を構築したり、
色々やり方はあるかと思います。
私の場合は構成をシンプルにしたかったので、
.turboをactions/cacheでキャッシュとして保存する方法で管理していました。
が、先日VercelよりRemote Cacheを完全に無料化したとアナウンスがあったので、
導入しないメリットは無いと思い早速試してみました！
※もちろんプラン毎に使用上限はありますが、個人開発用途なら気にしなくても問題無いくらいの制限でした
大前提として、無料のhobbyプランでは商用利用は出来ないので注意が必要です。
Vercelでプロジェクトが作成されていることを前提に以下よりセットアップ方法を書いています。
実際に対応した内容として、以下を参考にしていただけるとスムーズに設定が出来るかと思います。
まずはローカル環境でのセットアップ
Vercel Remote Cacheをローカル環境で使用するための設定を行います。
参考にしたドキュメントは以下になります。
① Vercelで認可を行う
環境に応じてnpxやpnpxで実行しても大丈夫です。
turbo login
ブラウザでVercelの認可画面が表示されるのでそのまま許可をします。
以下は設定時のログです。
$ turbo login
>>> Opening browser to https://vercel.com/turborepo/token?redirect_uri=http%3A%2F%2F127.0.0.1%3A9789
>>> Success! Turborepo CLI authorized for ***************
To connect to your Remote Cache, run the following in any turborepo:
npx turbo link
② 手元のリポジトリでVercel Remote Cacheと紐づける
Vercel Remote Cacheと紐づけたいリポジトリに移動して↓を叩きます。
turbo link
紐づけ対象のパスを確認されるので、問題がなければyesで進んでください。
$ turbo link
>>> Remote Caching
Remote Caching makes your caching multiplayer,
sharing build outputs and logs between developers and CI/CD systems.
Build and deploy faster.
For more information, visit: https://turbo.build/repo/docs/core-concepts/remote-caching
? Enable Vercel Remote Cache for ~/Documents/git/******** ? yes
✔ Which Vercel scope (and Remote Cache) do you want associated with this Turborepo?
[Use arrows to move, type to filter] · ********
>>> Success! Turborepo CLI authorized for ********
To disable Remote Caching, run `npx turbo unlink`
以上でローカル環境でのセットアップは完了です。
手元に残っているturborepoのcacheを削除して、
taskを初回実行するとremote cache serverへ書き込まれるかと思います。
2回目の実行で FULL TURBO になるか確認してみてください。
GitHub Actionsでのセットアップ
参考にしたドキュメントは以下になります。
① VercelでRemote Cache Server用のTokenを発行する
Tokenの管理画面で TURBO_TOKEN を発行します。
Scopeには使用するプロジェクトを設定するのが良いかと思います。
② 生成したTokenをActionsのSecretに設定する
①で生成したTokenをActionsのSecretに TURBO_TOKEN という名前で設定します。
③ ActionsのVariableにTURBO_TEAMを設定する
TURBO_TEAM という名前で設定します。
値はVercelでのProject名を入れてください。
公式ドキュメントにも記載がありますが、
プロジェクト名はアドレスバーで確認することが出来ます。
④ Workflowを修正する
ここまでに設定した TURBO_TOKEN と TURBO_TEAMを環境変数として読み込ませます。
env:
TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
TURBO_TEAM: ${{ vars.TURBO_TEAM }}
以上でGitHub Actions上でVercel Remote Cacheを利用出来るようになります。
成果物を秘密鍵で署名して安全にキャッシュを利用する
ここまでのセットアップでローカル環境とGitHub Actions上でVercel Remote Cacheを利用することが出来るようになったかと思いますが、
公式では成果物に署名を行って完全性と真正性を検証するためのガイドもあったので、
安全にキャッシュを扱うために導入をしました。
① 署名キーを発行
openssl rand -hex 32
② 署名キーをActionsのSecretに設定
①で発行した署名キーを TURBO_REMOTE_CACHE_SIGNATURE_KEY という名前で設定します。
③ Workflowを修正する
turborepoを使用するworkflowで環境変数に TURBO_REMOTE_CACHE_SIGNATURE_KEY を設定します。
env:
TURBO_REMOTE_CACHE_SIGNATURE_KEY: ${{ secrets.TURBO_REMOTE_CACHE_SIGNATURE_KEY }}
ローカル環境では良しなに TURBO_REMOTE_CACHE_SIGNATURE_KEY が環境変数として読み込まれる状態にしてください。
④ Vercelにも署名キーを設定する
vercelでも同じく TURBO_REMOTE_CACHE_SIGNATURE_KEY を設定することで完了です。
まとめ
これまでは .turbo をキャッシュ管理していましたが、
CI上では上手いことFULL TURBOにならなくて困っていました。
Vercel Remote Cacheを導入したことにより、
remote cacheをしっかりフル活用出来るようになったので良かったです。
無料で開放してくれているVercelに感謝です🙌
Discussion