Vercelと環境変数のやり取りを簡単にする方法

概要

Vercelへの環境変数のアップロードとダウンロードを簡単に行えるようにします。
主にチームで開発している方向けの簡単な方法です。

前提

今回は、.envで環境変数を管理している場合を想定します。
開発環境用：.env.development, .env.development.local
本番環境用：.env.production, .env.production.local

.localがついてあるファイルには秘匿したい環境変数を記載しています。
.localがついていないファイルには、NEXT_PUBLIC_から始まる名前の環境変数を記載しています。

.env.development

NEXT_PUBLIC_FIREBASE_API_KEY="hogehoge"

セットアップ

まず、こちらのサイトを参考にVercelのコマンドを叩ける状態にします。
npmの場合

npm i -g vercel

以下のコマンドでVersionが確認できれば成功です。

vercel --version

手順１ Vercelと接続をする

Vercelと接続を行うためには

vercel link

を実行する必要があります。

私の場合はMakefile内に上記のコマンドを記載しています。

Makefile

.PHONY: setup

setup:
	vercel link

Makefileのsetupを実行することでVercelとの接続が完了します。

make setup

手順2 ローカルの環境変数をアップロードする

以下のようなコードでローカルの.envに書かれている環境変数をVercelにアップロードします。
scriptsフォルダの中に下記ファイルを保存しています。
すでに存在するものに関してはアップロードを行わないようにしています。

deploy_env.sh

#!/bin/bash

deploy() {
  # The environment to deploy to (production, preview, or development)
  ENVIRONMENT=$1
  ENV_FILE=$2

  # Fetch the existing environment variables
  vercel env ls --environment="$ENVIRONMENT" > existing_envs.txt

  # Read the .env file line by line
  while IFS= read -r line || [[ -n "$line" ]]
  do
    # Split the line into name and value
    IFS='=' read -ra parts <<< "$line"
    name="${parts[0]}"
    value="${parts[1]}"

    # Check if the variable already exists
    if ! grep -q "$name" existing_envs.txt; then
      # Deploy the environment variable
      echo "$value" | vercel env add "$name" "$ENVIRONMENT"
      if [ "$ENVIRONMENT" == "production" ]; then
        echo "$value" | vercel env add "$name" "preview"
      fi
    fi
  done < $ENV_FILE

  # Delete the file with the existing variables
  rm existing_envs.txt
}

main() {
  for environment in "production" "development"
  do
    for file_type in "" ".local"
    do
      deploy "$environment" ".env.$environment$file_type"
    done
  done
}

main

手順3 Vercelに設定されている環境変数を取得する

Vercelに設定されている環境変数を取得してきてローカルに保存します。
NEXT_PUBLIC_からはじまるものとそれ以外で書き込み先を変えています。
scriptsフォルダの中に下記ファイルを保存しています。

fetch_env.sh

#!/bin/bash

# $1: environment flag: (e.g. production, preview, development)

# Fetch environment variables from Vercel
echo "Fetching environment variables for $1"
vercel env pull .env.temp --environment=$1

[ -e .env.$1 ] && rm .env.$1
[ -e .env.$1.local ] && rm .env.$1.local

# Separate the variables based on the prefix
grep -E "^NEXT_PUBLIC_" .env.temp | grep -vE "^VERCEL|^NX_DAEMON=|^TURBO_REMOTE_ONLY=|^TURBO_RUN_SUMMARY=|^# Created by Vercel CLI" > .env.$1
grep -vE "^NEXT_PUBLIC_" .env.temp | grep -vE "^VERCEL|^NX_DAEMON=|^TURBO_REMOTE_ONLY=|^TURBO_RUN_SUMMARY=|^# Created by Vercel CLI" > .env.$1.local

# Delete the temporary file
rm .env.temp

不要なものが入ってきてしまうので以下のコードで取り除いています。

grep -vE "^VERCEL|^NX_DAEMON=|^TURBO_REMOTE_ONLY=|^TURBO_RUN_SUMMARY=|^# Created by Vercel CLI"

一度、env関連のファイルを削除してから作成し直しているので、環境変数に変更を加えた後にこのスクリプトを実行すると追加した環境変数が消えてしまうので注意してください。

手順4 Makefileでスクリプトを実行できるようにする

Vercelとの環境変数とのやり取りをMakefileで実行できるようにします。

Makefile

.PHONY: download_env

download_env:
	bash ./scripts/fetch_env.sh production
	bash ./scripts/fetch_env.sh development

.PHONY: deploy_env

deploy_env:
	bash ./scripts/deploy_env.sh

ダウンロードする場合

make download_env

アップロードする場合

make deploy_env

まとめ

これでVercelを通してチームメンバーと簡単に環境変数を共有できるようになります。
ぜひ試してみてください。