<blockquote>
<p>本記事は、<a href="https://qiita.com/advent-calendar/2023/timee" target="_blank" rel="nofollow noopener noreferrer">Timee Advent Calendar 2023</a> 4日目の記事です。</p>
</blockquote>
<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p>リングフィットアドベンチャーの2周目の終わりがようやく見えてきた <a href="https://github.com/redshoga" target="_blank" rel="nofollow noopener noreferrer">@redshoga</a> です。</p>
<p>本記事では<a href="https://corp.timee.co.jp/" target="_blank" rel="nofollow noopener noreferrer">株式会社タイミー</a>で扱っているウェブフロントのステージング環境を扱うbotについて紹介します。前提としてVercelを扱っています。Vercelの環境やステージング環境の扱いに困っている方の参考になれば幸いです。</p>
<h1 id="%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AAbot%E3%81%8B">
<a class="header-anchor-link" href="#%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AAbot%E3%81%8B" aria-hidden="true"></a> どのようなbotか</h1>
<p>Slackの特定チャンネルで以下のような発言をすると、対象のブランチの実装が即時にステージング環境に反映されます。</p>
<div class="code-block-container"><pre class="language-jsx"><code class="language-jsx">vercel<span class="token operator">-</span>deploy alia<span class="token operator">-</span>branch <span class="token punctuation">{</span>対象のブランチ<span class="token punctuation">}</span> <span class="token punctuation">{</span>対象のVercelプロジェクト<span class="token punctuation">}</span>
</code></pre></div><p><img src="https://storage.googleapis.com/zenn-user-upload/b00162810f07-20231129.png" alt="実際にbotを使っている様子" loading="lazy" class="md-img"></p>
<p>実運用では、このbotは以下のプロジェクトの動作確認時に使われています。</p>
<ul>
<li>クライアント向けの管理画面用Next.jsプロジェクト</li>
<li>クライアント向けのアカウント開設用Next.jsプロジェクト</li>
</ul>
<h1 id="%E3%81%AA%E3%81%9Cbot%E3%81%8C%E5%BF%85%E8%A6%81%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F%E3%81%8B">
<a class="header-anchor-link" href="#%E3%81%AA%E3%81%9Cbot%E3%81%8C%E5%BF%85%E8%A6%81%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F%E3%81%8B" aria-hidden="true"></a> なぜbotが必要になったか</h1>
<h2 id="%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E5%95%8F%E9%A1%8C">
<a class="header-anchor-link" href="#%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E5%95%8F%E9%A1%8C" aria-hidden="true"></a> ドメインの問題</h2>
<p>Vercelはデフォルトの機能として、PRごとに以下のようなURLで確認できるpreview環境を提供します。</p>
<div class="code-block-container"><pre class="language-jsx"><code class="language-jsx"><span class="token literal-property property">https</span><span class="token operator">:</span><span class="token operator">/</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">{VercelのプロジェクトID}-git-{ブランチ名}-{Vercelのチーム名}<span class="token char-set class-name">.</span>vercel<span class="token char-set class-name">.</span>app</span><span class="token regex-delimiter">/</span></span>
</code></pre></div><p>作成するウェブサービスによっては、ステージング環境はこのpreview環境で済む場合もあります(タイミー上の一部のLPはこのpreview環境を用いています)。</p>
<p>しかし以下のような都合上、ステージング環境のドメインを固定に扱いたいことが発生します。</p>
<ul>
<li>認証まわりでの制約 (ex: OAuth)</li>
<li>通信まわりでの制約 (ex: CORS)</li>
<li>Cookieまわりでの制約 (ex: SameSite)</li>
</ul>
<p>タイミーのウェブサービスも同様の課題が生じたので、ドメインを固定で設定できるようにする必要がありました。</p>
<h2 id="vercel-cli%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">
<a class="header-anchor-link" href="#vercel-cli%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> Vercel CLIについて</h2>
<p>VercelのCLIを用いれば、特定のブランチのビルドを特定のドメインに反映することができます。</p>
<p>しかし以下の点から懸念があり、Vercel CLIを実運用で用いることはしませんでした。</p>
<ul>
<li>黒い画面(ターミナル)を扱える人、Vercelの権限がある人しか操作できない
<ul>
<li>学習コストや環境構築のコストが高い</li>
</ul>
</li>
<li>操作ログが共有されない (誰がどの環境を操作しているがすぐわからない)
<ul>
<li>Vercel CLIで操作したところで、操作内容を共有する必要が生じる</li>
</ul>
</li>
<li>スコープを絞ることができない (間違ってproduction環境を操作する可能性)
<ul>
<li>誤って操作した場合のリスクが高い</li>
</ul>
</li>
</ul>
<h1 id="bot%E3%81%AE%E4%B8%AD%E8%BA%AB%E3%82%84%E6%A7%8B%E6%88%90">
<a class="header-anchor-link" href="#bot%E3%81%AE%E4%B8%AD%E8%BA%AB%E3%82%84%E6%A7%8B%E6%88%90" aria-hidden="true"></a> botの中身や構成</h1>
<p>SlackのOutgoing Webhookを使っています。</p>
<p>Webhookの先はVercel上でServerless Functionを作っています。この<a href="https://vercel.com/templates/other/nodejs-serverless-function-express" target="_blank" rel="nofollow noopener noreferrer">Node.js Serverless Functionテンプレート</a>を用いています。</p>
<p>Serverless Functionでは、<a href="https://vercel.com/docs/rest-api/endpoints" target="_blank" rel="nofollow noopener noreferrer">Vercel REST API</a>を用いてVercelのDeployment (※1)やドメインを操作します。流れとしては以下の通りです。</p>
<ol>
<li>権限やスコープのチェックやコマンドの文字列のparse</li>
<li>対象のブランチのDeployment一覧を取得</li>
<li>Deployment一覧から最新のDeploymentのdeploymentIdを取得</li>
<li>deploymentIdを用いて対象のステージング環境のドメインへaliasを貼る ※</li>
</ol>
<p>※1: Deploymentはコミット(≒ビルド)ごとに作成されるコンテナのようなものです。特定のDeploymentにドメインへaliasを貼ることで、そのドメインでビルドを確認できるようになります。またコンテナのようなものなので、即時にステージング環境に反映できます。</p>
<h1 id="%E8%A3%9C%E8%B6%B3%E3%81%A8%E4%BD%99%E8%AB%87">
<a class="header-anchor-link" href="#%E8%A3%9C%E8%B6%B3%E3%81%A8%E4%BD%99%E8%AB%87" aria-hidden="true"></a> 補足と余談</h1>
<ul>
<li>当たり前ですがSlackのbotとして運用すると、自動的にログが残り副次的な恩恵を受けられます。</li>
<li>botの入力がただの文字列なので、Slackのリマインダーを用いて予約投稿できたり、ワークフローからコマンド生成なども行なえます (UNIX哲学的なそれを感じる)。</li>
<li>Vercel REST APIを用いるときにAccess Tokenが必要なのですが、そのトークンが個人アカウントに依存してしまう問題があったりします(<a href="https://github.com/anuraghazra/github-readme-stats/issues/1754" target="_blank" rel="nofollow noopener noreferrer">チームがトークンを作れたり</a>すると依存関係がスッキリするんですが…)。</li>
</ul>
<h1 id="%E4%BB%8A%E5%BE%8C">
<a class="header-anchor-link" href="#%E4%BB%8A%E5%BE%8C" aria-hidden="true"></a> 今後</h1>
<p>タイミーで運用しているVercelのステージング環境を扱うbotを紹介しました。</p>
<p>当初はVercel CLIをそのまま扱えば良いのではと考えていたのですが、約2年程度運用して結果として作ってよかったと思っています。</p>
<p>今後ステージング環境を複数使えるようにするプロジェクトが動いており、このbotをカスタマイズすることである程度簡単に解決できるのではないかという話があります。具体的なビルドの操作をする仕組み(Vercel CLI)をより開発のユースケースに沿わせ扱いやすいようにした抽象レイヤーを用意すると便利かもしれないという話でした。</p>


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

Discussion