🔗

Vercelで「このデプロイのコミット」のリンクを出す

2 min read

完成品

ついにIEを考慮する時代が終焉しつつあるので、<details>&<summary>タグを使うぜ!

レポジトリのURLと、デプロイの元になったコミットのURLを取得。プレビューデプロイで「これほんとにさっきのコミットか??」と疑いたくなる時がたまにあるので作った。(スタイルつけ忘れてますがどちらもリンクです)

(Can I use: https://caniuse.com/details)

Vercelで環境変数の露出をする

VercelのSettingsAutomatically expose System Environment Variablesにチェックを入れておきます。

実装

Next.js

const repo =
  process.env.NODE_ENV == 'development'
    ? 'Not available on local'
    : `https://github.com/${process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_OWNER}/${process.env.NEXT_PUBLIC_VERCEL_GIT_REPO_SLUG}`;
const commit =
  process.env.NODE_ENV == 'development'
    ? ''
    : `${repo}/commit/${process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA}`;
const commitMessage = `${
  process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_MESSAGE ?? 'Not available on local'
}`;

const RepoInfo = () => (
  <details>
    <summary>Repository Info</summary>
    <div>
      <div>
        Repo:{` `}
        <a href={repo} target="_blank" rel="noreferrer">
          {repo}
        </a>
      </div>

      <div>
        Commit:{` `}
        <a href={commit}>{commitMessage}</a>
      </div>
    </div>
  </details>
);

export default RepoInfo;

プレフィックス (NEXT_PUBLIC_) を付けているのでnext.config.jsで設定する必要はありません。

コンポーネントの描画を切り替えるとレイアウトの検証ができないので、文字列を環境で切り替えています。デプロイすれば動くんですが、undefinedが描画されてると不安になりません?

その他のフレームワーク

Nuxtの場合はNEXT_PUBLIC_NUXT_ENV_に書き換えてください。(あとVueで書き直さないといけない)

その他のフレームワークの場合は以下の一覧を参照してください。

https://vercel.com/docs/environment-variables#system-environment-variables

VercelのNODE_ENVに注意

プレビューデプロイもNODE_ENVproductionなんですよ。

このコンポーネントをプレビューデプロイ限定にするなら、Vercelの設定から環境別の変数を設定するといった方法が考えられます。

GitHubで編集を提案

Discussion

ログインするとコメントできます