この記事が役立つかもしれない人

Vercel で Production, Preview, Development 環境ごとにビルドの処理を変えたい人

方法

Vercel の Project Settings にアクセスします。
ナビゲーション上では Settings と表記されています。

Project Settings の General > Build & Development Settings に Build Command という項目があるので、そこに次のようなスクリプトを入力します。

Build Command

if [ "$VERCEL_ENV" = "production" ]; then npm run build:prod; else npm run build:dev; fi

コマンドに対応する package.json の例は次の通りです。

package.json (対応する部分のみ抜粋)

"scripts": {
  "build:dev": "npx prisma db push && nest build",
  "build:prod": "npx prisma migrate deploy && nest build"
}

上記のように設定すると production 環境でビルドされるときは npm run build:prod が実行され、それ以外の preview 環境、development 環境の際は npm run build:dev が実行されます。

Build Command に入力した bash スクリプトですが、改行とインデントを入れると次のような形になります。

if [ "$VERCEL_ENV" = "production" ]; then
  npm run build:prod;
else
  npm run build:dev;
fi

シンプルな条件分岐ですね。

$VERCEL_ENV は Vercel が提供している環境変数で、デプロイ環境が production preview development のいずれかの値で入っています。
そのため、どの環境で実行されているのかを判別してビルドの処理を変えることが可能です。

$VERCEL_ENV のような環境変数は他にも色々と用意されています。

Vercel によって自動作成される URL を取得できる VERCEL_URL なんかも便利そうですね。

この記事が役に立ったら 🩷 を頂けると嬉しいです！