Zenn
🤖

Vercel REST APIを用いたステージング環境反映botについて

2023/12/04に公開
Vercel
frontend
tech

本記事は、Timee Advent Calendar 2023 4日目の記事です。

はじめに

リングフィットアドベンチャーの2周目の終わりがようやく見えてきた @redshoga です。

本記事では株式会社タイミーで扱っているウェブフロントのステージング環境を扱うbotについて紹介します。前提としてVercelを扱っています。Vercelの環境やステージング環境の扱いに困っている方の参考になれば幸いです。

どのようなbotか

Slackの特定チャンネルで以下のような発言をすると、対象のブランチの実装が即時にステージング環境に反映されます。

vercel-deploy alia-branch {対象のブランチ} {対象のVercelプロジェクト}

実際にbotを使っている様子

実運用では、このbotは以下のプロジェクトの動作確認時に使われています。

  • クライアント向けの管理画面用Next.jsプロジェクト
  • クライアント向けのアカウント開設用Next.jsプロジェクト

なぜbotが必要になったか

ドメインの問題

Vercelはデフォルトの機能として、PRごとに以下のようなURLで確認できるpreview環境を提供します。

https://{VercelのプロジェクトID}-git-{ブランチ名}-{Vercelのチーム名}.vercel.app/

作成するウェブサービスによっては、ステージング環境はこのpreview環境で済む場合もあります(タイミー上の一部のLPはこのpreview環境を用いています)。

しかし以下のような都合上、ステージング環境のドメインを固定に扱いたいことが発生します。

  • 認証まわりでの制約 (ex: OAuth)
  • 通信まわりでの制約 (ex: CORS)
  • Cookieまわりでの制約 (ex: SameSite)

タイミーのウェブサービスも同様の課題が生じたので、ドメインを固定で設定できるようにする必要がありました。

Vercel CLIについて

VercelのCLIを用いれば、特定のブランチのビルドを特定のドメインに反映することができます。

しかし以下の点から懸念があり、Vercel CLIを実運用で用いることはしませんでした。

  • 黒い画面(ターミナル)を扱える人、Vercelの権限がある人しか操作できない
    • 学習コストや環境構築のコストが高い
  • 操作ログが共有されない (誰がどの環境を操作しているがすぐわからない)
    • Vercel CLIで操作したところで、操作内容を共有する必要が生じる
  • スコープを絞ることができない (間違ってproduction環境を操作する可能性)
    • 誤って操作した場合のリスクが高い

botの中身や構成

SlackのOutgoing Webhookを使っています。

Webhookの先はVercel上でServerless Functionを作っています。このNode.js Serverless Functionテンプレートを用いています。

Serverless Functionでは、Vercel REST APIを用いてVercelのDeployment (※1)やドメインを操作します。流れとしては以下の通りです。

  1. 権限やスコープのチェックやコマンドの文字列のparse
  2. 対象のブランチのDeployment一覧を取得
  3. Deployment一覧から最新のDeploymentのdeploymentIdを取得
  4. deploymentIdを用いて対象のステージング環境のドメインへaliasを貼る ※

※1: Deploymentはコミット(≒ビルド)ごとに作成されるコンテナのようなものです。特定のDeploymentにドメインへaliasを貼ることで、そのドメインでビルドを確認できるようになります。またコンテナのようなものなので、即時にステージング環境に反映できます。

補足と余談

  • 当たり前ですがSlackのbotとして運用すると、自動的にログが残り副次的な恩恵を受けられます。
  • botの入力がただの文字列なので、Slackのリマインダーを用いて予約投稿できたり、ワークフローからコマンド生成なども行なえます (UNIX哲学的なそれを感じる)。
  • Vercel REST APIを用いるときにAccess Tokenが必要なのですが、そのトークンが個人アカウントに依存してしまう問題があったりします(チームがトークンを作れたりすると依存関係がスッキリするんですが…)。

今後

タイミーで運用しているVercelのステージング環境を扱うbotを紹介しました。

当初はVercel CLIをそのまま扱えば良いのではと考えていたのですが、約2年程度運用して結果として作ってよかったと思っています。

今後ステージング環境を複数使えるようにするプロジェクトが動いており、このbotをカスタマイズすることである程度簡単に解決できるのではないかという話があります。具体的なビルドの操作をする仕組み(Vercel CLI)をより開発のユースケースに沿わせ扱いやすいようにした抽象レイヤーを用意すると便利かもしれないという話でした。

Discussion