【重要】Vercel CLIが生成する.envファイルの正しい扱い方 - Next.js環境変数管理の落とし穴

Posted at 2025-07-13

危険！Vercel CLIが生成した.envファイルをGitにコミットしていませんか？

Vercelを使ってNext.jsアプリを開発している皆さん、.envファイルの扱いに注意していますか？

「.envファイルには機密情報を入れない」という一般的な認識がありますが、Vercel CLIが生成する.envファイルには実際に機密情報が含まれています。

Vercel CLIが生成する.envファイルの中身

# Created by Vercel CLI
DATABASE_URL="postgres://user:password@ep-xxx.us-east-1.aws.neon.tech/neondb"
DATABASE_URL_UNPOOLED="postgresql://user:password@ep-xxx.us-east-1.aws.neon.tech/neondb"
POSTGRES_PASSWORD="npg_xxxxxxxxxxxx"  # ← パスワード！
STACK_SECRET_SERVER_KEY="ssk_xxxxxxxxxxxx"  # ← シークレットキー！
VERCEL_OIDC_TOKEN="eyJhbGciOiJSUzI1NiIsInR5..."  # ← 認証トークン！

これらは全て機密情報です。

なぜこんなことが起きるのか

一般的な誤解

多くの記事やドキュメントでは：

.env → デフォルト値（Gitにコミット可）
.env.local → 機密情報（Gitにコミット不可）

と説明されています。

Vercelの実態

しかし、Vercelは：

vercel env pullコマンドで環境変数をダウンロード
それを.envファイルに保存
その中には本番環境の機密情報が含まれる

今すぐ確認すべきこと

1. .gitignoreの確認

# .gitignoreに.envが含まれているか確認
cat .gitignore | grep "^\.env$"

含まれていない場合は、すぐに追加：

# 環境変数ファイル
.env
.env*.local

2. Gitの履歴を確認

# .envファイルがコミットされていないか確認
git ls-files | grep "^\.env$"

# 過去のコミットも確認
git log --all --full-history -- .env

もし見つかった場合は、すぐに対処が必要です。

緊急対処法

.envファイルをコミットしてしまった場合

# 1. まずGitの追跡から削除
git rm --cached .env
git commit -m "Remove .env from tracking"

# 2. .gitignoreに追加
echo ".env" >> .gitignore
git add .gitignore
git commit -m "Add .env to .gitignore"

# 3. 漏洩した認証情報を無効化
# - データベースのパスワードを変更
# - APIキーを再生成
# - Vercelの環境変数を更新

Gitの履歴から完全に削除

# BFG Repo-Cleanerを使用（推奨）
brew install bfg  # macOSの場合
bfg --delete-files .env
git push --force

# または git-filter-branch（より複雑）
git filter-branch --tree-filter 'rm -f .env' HEAD
git push --force

正しい環境変数の管理方法

1. ファイル構成

プロジェクト/
├── .env                # Vercelから取得（Git管理外）⚠️
├── .env.local          # ローカル開発用（Git管理外）⚠️
├── .env.example        # テンプレート（Git管理）✅
└── .gitignore          # .envを必ず除外

2. .env.exampleの活用

# .env.example
# このファイルをコピーして使用してください
# cp .env.example .env.local

# Required environment variables
DATABASE_URL=
NEXTAUTH_SECRET=
NEXTAUTH_URL=

# Optional
STRIPE_SECRET_KEY=

3. Vercelとの連携フロー

# 開発環境のセットアップ
vercel link                    # プロジェクトと連携
vercel env pull .env.local     # .env.localに保存（.envではない！）

# または
vercel env pull                # デフォルトは.envだが...
mv .env .env.local             # すぐに.env.localに移動

PrismaとNext.jsの環境変数問題

問題の構造

# Next.js → .env.localを優先
npm run dev  # .env.local → .env の順で読む

# Prisma → .envのみ
npx prisma db push  # .envしか読まない！

安全な解決策

// package.json
{
  "scripts": {
    // 方法1: 環境変数を明示
    "db:push": "DATABASE_URL=\"$DATABASE_URL\" prisma db push",
    
    // 方法2: dotenv-cliを使用
    "db:push:local": "dotenv -e .env.local -- prisma db push",
    "db:migrate:local": "dotenv -e .env.local -- prisma migrate dev",
    "db:studio:local": "dotenv -e .env.local -- prisma studio"
  }
}

ワンライナーでの実行

# 最も安全：環境変数を明示的に指定
DATABASE_URL="postgresql://..." npx prisma db push

チーム開発でのベストプラクティス

1. READMEに明確な手順を記載

## 環境構築

1. 環境変数の設定
   ```bash
   # Vercelから環境変数を取得（.env.localに保存）
   vercel env pull .env.local
   
   # または手動で設定
   cp .env.example .env.local
   # .env.localを編集

重要: .envファイルは作成しないでください
データベースのセットアップ
```
npm run db:push:local
```


### 2. pre-commitフックの設定

```bash
# .husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# .envファイルがコミットされようとしていないかチェック
if git diff --cached --name-only | grep -q "^\.env$"; then
  echo "❌ エラー: .envファイルはコミットできません！"
  echo "👉 .gitignoreに追加してください"
  exit 1
fi

セキュリティチェックリスト

.gitignoreに.envが含まれている
.gitignoreに.env*.localが含まれている
Gitリポジトリに.envが存在しない
.env.exampleで必要な環境変数を説明している
READMEに環境構築手順がある
Prismaコマンドは.env.localを使うよう設定
定期的にgit ls-files | grep envで確認

まとめ

Vercel CLIが生成する.envには機密情報が含まれる
.envも.env.localもGitにコミットしない
vercel env pull .env.localで.env.localに保存する
Prismaは環境変数を明示的に指定する

環境変数の扱いを間違えると、データベースのパスワードやAPIキーが公開される危険があります。この記事を読んだら、すぐにプロジェクトをチェックしてください。

参考リンク

安全な開発環境を維持しましょう！🔒

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up