【セキュリティ必須】Vercel/Netlifyの環境変数管理を徹底解説｜安全なデプロイの完全ガイド
生徒博士、VercelにNext.jsアプリをデプロイしたんですけど、API Keyとかの秘密情報ってどうやって管理すればいいんですか？GitHubにpushしちゃってもいいんでしょうか？
ペン博士それは絶対にダメじゃぞ！API Keyやデータベースのパスワードをそのままコードに書いてGitHubにpushすると、誰でも見られる状態になってしまうんじゃ。今回は「環境変数」という仕組みを使った、安全な秘密情報の管理方法について詳しく解説するぞい！
生徒それは大変ですね！はい！よろしくお願いします！
Web制作において、API Key、データベース接続情報、認証トークンなどの秘密情報を安全に管理することは極めて重要です。特に、VercelやNetlifyといったサーバーレスプラットフォームでは、適切な環境変数管理が不可欠です。
しかし、環境変数の設定を誤ると、秘密情報が公開されてセキュリティ侵害につながるリスクがあります。実際に、GitHubに誤ってAPI Keyをpushしてしまい、数時間で不正利用されたという事例も多数報告されています。
本記事では、Vercel/Netlifyでの環境変数の安全な管理方法について、基本的な概念から実践的なセキュリティ対策まで、実装例を踏まえて徹底的に解説します。
詳しくはこちらの記事をご覧ください。
あわせて読みたい
【子育てママさん必見】WithCodeに転校!?「子育て+在宅ワーク」両立の秘密に迫る！
ペン博士！今回はどんな方がインタビューに応じてくださったんですか？ 今回のインタビューに応じてくれたのは、子育てをしながら在宅ワークを続けているママさんじゃよ…
片山さんの主な制作実績はこちら
目次
環境変数とは？基礎知識を理解する
環境変数の定義
環境変数（Environment Variables）とは、アプリケーションの動作環境ごとに異なる値を設定するための仕組みです。コードの中に直接書くのではなく、外部から注入される形で使用します。
例えば、以下のような情報を環境変数として管理します：
- API Key：外部サービス（Stripe、SendGrid、OpenAIなど）の認証キー
- データベース接続情報：データベースのURL、ユーザー名、パスワード
- 認証トークン：JWT Secret、OAuth Client ID/Secretなど
- 環境固有の設定：本番環境と開発環境で異なるAPI URLなど
なぜ環境変数が必要なのか？
環境変数を使用する主な理由は以下の通りです：
1. セキュリティの確保
秘密情報をコードに直接書くと、以下のリスクがあります：
// 危険：API Keyをコードに直接記述
const apiKey = "sk_live_abc123xyz789"; // これをGitHubにpushすると誰でも見られる！
// 安全：環境変数から取得
const apiKey = process.env.STRIPE_SECRET_KEY;GitHubは公開リポジトリの場合、世界中の誰でもアクセス可能です。プライベートリポジトリでも、チームメンバー全員が閲覧できます。環境変数を使えば、コードを公開しても秘密情報は安全です。
2. 環境ごとの切り替え
開発環境、ステージング環境、本番環境で異なる設定値を使い分けられます：
// 開発環境：localhost:3000のAPIを使用
NEXT_PUBLIC_API_URL=http://localhost:3000/api
// 本番環境：本番APIを使用
NEXT_PUBLIC_API_URL=https://api.production.com3. チーム開発の効率化
各制作者がご自身のローカル環境に合わせた設定を使えます。一人ひとり異なるデータベースを使用したり、異なる外部サービスのテストアカウントを使用したりできます。
環境変数の種類：サーバーサイド vs クライアントサイド
Next.jsなどのフレームワークでは、環境変数に2つの種類があります：
| 種類 | プレフィックス | アクセス可能な場所 | 用途 |
|---|---|---|---|
| サーバーサイド変数 | なし | サーバーサイドのみ | 秘密情報（API Key、DB接続情報） |
| クライアントサイド変数 | NEXT_PUBLIC_ | サーバー＋ブラウザ | 公開情報（公開API URL、Googleアナリティクスタグ） |
NEXT_PUBLIC_プレフィックスを付けた変数は、ブラウザ側のJavaScriptに埋め込まれるため、誰でも見ることができます。絶対に秘密情報には使用しないでください。
Vercelでの環境変数設定方法【完全ガイド】
生徒Vercelについて詳しく知りたいです！
ペン博士Vercelは、Next.jsの開発元が提供するホスティングプラットフォームじゃ。環境変数の管理機能が充実しているぞ！
Vercelダッシュボードでの設定
最も一般的で推奨される方法は、Vercelのダッシュボードから設定する方法です。
設定手順
1. Vercelダッシュボードにログイン
- https://vercel.com にアクセス
- 環境変数を設定したいプロジェクトをクリック
3. Settings → Environment Variables
- 左サイドバーから「Settings」を選択
- 「Environment Variables」タブをクリック
4. 環境変数を追加
- 「KEY」欄に変数名を入力（例：
DATABASE_URL） - 「Value」欄に値を入力（例：
postgresql://user:pass@host:5432/db） - 適用する環境を選択（Production、Preview、Development）
5. 保存
- 「Save」をクリック
環境の種類
Vercelでは3つの環境を個別に設定できます：
- Production（本番環境）：メインブランチ（通常は
mainやmaster）からデプロイされた環境 - Preview（プレビュー環境）：プルリクエストやその他のブランチからのデプロイ
- Development（開発環境）：
vercel devコマンドでローカル開発する際に使用
Vercel CLIでの設定
コマンドラインから環境変数を設定することもできます。
# Vercel CLIをインストール
npm install -g vercel
# プロジェクトにログイン
vercel login
# 環境変数を追加（本番環境）
vercel env add DATABASE_URL production
# 環境変数を追加（プレビュー環境）
vercel env add DATABASE_URL preview
# 環境変数を追加（開発環境）
vercel env add DATABASE_URL development
# 環境変数の一覧を表示
vercel env ls
# 環境変数を削除
vercel env rm DATABASE_URL productionvercel.jsonでの設定（推奨されない）
vercel.jsonファイルに環境変数を記述することも技術的には可能ですが、セキュリティ上推奨されません。
// 非推奨：vercel.jsonに秘密情報を書かない
{
"env": {
"DATABASE_URL": "postgresql://user:password@host:5432/db"
}
}
// このファイルはGitHubにコミットされるため、秘密情報が漏洩しますvercel.jsonは公開設定（リダイレクトルール、ヘッダー設定など）にのみ使用してください。
ローカル開発での環境変数使用
ローカル開発では、.env.localファイルを使用します。
# .env.local（このファイルは.gitignoreに追加）
DATABASE_URL=postgresql://localhost:5432/mydb_dev
STRIPE_SECRET_KEY=sk_test_xxxxxxxxxxxx
NEXT_PUBLIC_API_URL=http://localhost:3000/api# .gitignore
.env.local
.env.*.local
.env重要： .env.localは必ず.gitignoreに追加して、GitHubにコミットされないようにしてください。
Vercelで環境変数をプルする方法
Vercelダッシュボードに設定した環境変数を、ローカル開発環境にダウンロードできます。
# 本番環境の環境変数をダウンロード
vercel env pull .env.local
# これにより、Vercelに設定されている環境変数が.env.localに書き込まれますチーム開発では、新しいメンバーが参加した際にvercel env pullを実行するだけで、必要な環境変数を取得できます。
Netlifyでの環境変数設定方法【完全ガイド】
生徒Netlifyについても詳しく知りたいです！
ペン博士うむ。Netlifyも人気の高いホスティングプラットフォームじゃ。Vercelと似た方法で環境変数を管理できるぞ！
Netlifyダッシュボードでの設定
設定手順
1. Netlifyダッシュボードにログイン
- https://app.netlify.com にアクセス
2. サイトを選択
- 環境変数を設定したいサイトをクリック
3. Team settings → Environment variables
- 「Team settings」をクリック
- 左サイドバーから「Environment variables」を選択
4. 環境変数を追加
- 「Add a variable」または「New variable」をクリック
- 「Key」に変数名を入力（例：
DATABASE_URL） - 「Values」に値を入力
- 適用するスコープを選択（All、Production、Deploy Previews、Branch deploysなど）
5. 保存
- 「Save」をクリック
Netlify CLIでの設定
Netlify CLIを使用すると、コマンドラインから環境変数を管理できます。
# Netlify CLIをインストール
npm install -g netlify-cli
# Netlifyにログイン
netlify login
# 環境変数を設定
netlify env:set DATABASE_URL "postgresql://user:pass@host:5432/db"
# 環境変数の一覧を表示
netlify env:list
# 環境変数を取得
netlify env:get DATABASE_URL
# 環境変数を削除
netlify env:unset DATABASE_URLnetlify.tomlでの設定
netlify.tomlファイルでビルド設定を記述できますが、Vercelと同様に秘密情報は記述しないでください。
# netlify.toml
[build]
command = "npm run build"
publish = ".next"
# 公開情報はOK
[build.environment]
NODE_VERSION = "18"
# 秘密情報は書かない
# DATABASE_URL = "postgresql://..." # これは危険Netlifyの環境スコープ
Netlifyでは、環境変数を以下のスコープで設定できます：
- All（すべて）：すべてのデプロイで使用
- Production（本番）：本番ブランチのみ
- Deploy Previews（プレビュー）：プルリクエストのプレビュー
- Branch deploys（ブランチ）：特定のブランチのデプロイ
本番環境の秘密情報（本番データベース、本番APIキーなど）は、必ず「Production」スコープのみに設定してください。
環境変数のセキュリティリスクと対策
生徒セキュリティ面がちょっと不安です…
ペン博士大丈夫じゃ！ここでは、環境変数を使用する際の主なセキュリティリスクと、その対策方法を解説するぞ！
リスク1：NEXT_PUBLIC_の誤用
最も多い失敗： 秘密情報にNEXT_PUBLIC_を付けてしまう
// 絶対にやってはいけない
NEXT_PUBLIC_STRIPE_SECRET_KEY=sk_live_abc123
// このコードはビルド後のJavaScriptに埋め込まれる
const secretKey = process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY;
// → ブラウザの開発者ツールで誰でも見られる対策：
- API KeyやSecretには絶対に
NEXT_PUBLIC_を付けない - 公開されても問題ない情報（公開APIのURL、Googleアナリティクスタグなど）のみ
NEXT_PUBLIC_を使用 - 秘密情報はサーバーサイド（API Routes、Server Components）でのみ使用
// 正しい使い方
// 公開情報（NEXT_PUBLIC_を使用）
NEXT_PUBLIC_API_URL=https://api.example.com
NEXT_PUBLIC_GA_TRACKING_ID=G-XXXXXXXXXX
// 秘密情報（プレフィックスなし）
STRIPE_SECRET_KEY=sk_live_abc123
DATABASE_URL=postgresql://user:pass@host:5432/dbリスク2：.envファイルのGitコミット
リスク： .envや.env.localをGitHubにコミットしてしまう
対策：
# .gitignore（必ず以下を追加）
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
.env*.localもし誤ってコミットしてしまった場合：
- すぐにAPI Keyやパスワードを無効化・変更する
- Gitの履歴から完全に削除する（
git filter-branchやBFG Repo-Cleanerを使用） - 新しいキーを発行し、環境変数を更新する
リスク3：ログへの秘密情報出力
リスク： デバッグ目的で環境変数をログ出力してしまう
// 危険：秘密情報をログに出力
console.log('API Key:', process.env.STRIPE_SECRET_KEY);
// Vercel/Netlifyのログは誰でも見られる可能性がある対策：
// 安全：存在確認のみ
console.log('API Key is set:', !!process.env.STRIPE_SECRET_KEY);
// または、最初の数文字のみ表示
const key = process.env.STRIPE_SECRET_KEY;
console.log('API Key:', key ? `${key.substring(0, 7)}...` : 'not set');リスク4：クライアント側での秘密情報使用
リスク： ブラウザ側のコードで秘密のAPI Keyを使用してしまう
// 危険：クライアント側で秘密APIを直接呼び出し
// pages/index.tsx
const Component = () => {
const fetchData = async () => {
// これはブラウザで実行される
const response = await fetch('https://api.stripe.com/v1/charges', {
headers: {
Authorization: `Bearer ${process.env.STRIPE_SECRET_KEY}` // 危険！
}
});
};
// ...
};対策： 秘密情報が必要な処理は、必ずサーバーサイドで実行する
// 安全：API Routesでサーバーサイド処理
// pages/api/create-charge.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import Stripe from 'stripe';
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
apiVersion: '2023-10-16',
});
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
// サーバーサイドで実行されるため、秘密情報が安全
const charge = await stripe.charges.create({
amount: 2000,
currency: 'usd',
source: req.body.token,
});
res.status(200).json({ charge });
}
// クライアント側からは、このAPIを呼び出すだけ
// pages/index.tsx
const Component = () => {
const createCharge = async (token: string) => {
const response = await fetch('/api/create-charge', {
method: 'POST',
body: JSON.stringify({ token }),
});
const data = await response.json();
};
};GitHub Secretsとの連携【CI/CD自動化】
生徒Githubを使った方法もあると聞いたのですが、本当ですか？
ペン博士うむ。GitHub Actionsを使ってビルド・デプロイを自動化する方法がある。この方法を使用する場合、GitHub Secretsで環境変数を管理するのじゃ！
GitHub Secretsとは？
GitHub Secretsは、GitHubリポジトリに安全に保存できる暗号化された環境変数です。GitHub Actionsのワークフロー内でのみアクセス可能で、ログには表示されません（自動的に***でマスクされます）。
GitHub Secretsの設定方法
1. GitHubリポジトリを開く
2. 「Settings」→「Secrets and variables」→「Actions」
4. 「New repository secret」をクリック
5.「Name」に変数名、「Secret」に値を入力
6.「Add secret」をクリック
GitHub ActionsでのVercelデプロイ
GitHub ActionsからVercelにデプロイする際の環境変数の扱い方：
# .github/workflows/deploy.yml
name: Deploy to Vercel
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: 18
- name: Install dependencies
run: npm ci
# GitHub Secretsから環境変数を設定
- name: Build
env:
DATABASE_URL: ${{ secrets.DATABASE_URL }}
STRIPE_SECRET_KEY: ${{ secrets.STRIPE_SECRET_KEY }}
NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL }}
run: npm run build
# Vercelにデプロイ
- name: Deploy to Vercel
env:
VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
run: |
npm install -g vercel
vercel --token $VERCEL_TOKEN --prod必要なGitHub Secrets
VERCEL_TOKEN：Vercelのアクセストークン（Vercelダッシュボードの「Settings」→「Tokens」で発行）VERCEL_ORG_ID：組織ID（.vercel/project.jsonに記載）VERCEL_PROJECT_ID：プロジェクトID（.vercel/project.jsonに記載）- その他のアプリケーション固有の秘密情報
Vercel/Netlify自動連携 vs GitHub Actions
2つのアプローチがあります：
| 方法 | メリット | デメリット |
|---|---|---|
| Vercel/Netlify自動連携 | 設定が簡単、環境変数は各プラットフォームで管理 | カスタムビルドステップが限定的 |
| GitHub Actions | 完全なCI/CDパイプライン、テスト・Lintも実行可能 | 設定が複雑、環境変数をGitHub Secretsで管理 |
推奨： 小規模プロジェクトはVercel/Netlifyの自動連携、大規模プロジェクトや複雑なビルドプロセスがある場合はGitHub Actionsを使用。
環境変数管理のベストプラクティス
ペン博士ここでは、ロダクション環境で安全に環境変数を管理するためのベストプラクティスを紹介するぞ！
生徒はい！よろしくお願いします！
1. .env.exampleファイルを用意する
チームメンバーが必要な環境変数を把握できるよう、テンプレートファイルを作成します。
# .env.example（GitHubにコミット可能）
# データベース接続情報
DATABASE_URL=postgresql://user:password@localhost:5432/mydb
# Stripe API Key
STRIPE_SECRET_KEY=sk_test_your_key_here
STRIPE_PUBLISHABLE_KEY=pk_test_your_key_here
# Next.js 公開環境変数
NEXT_PUBLIC_API_URL=http://localhost:3000/api
NEXT_PUBLIC_GA_TRACKING_ID=G-XXXXXXXXXX新しいメンバーは以下のコマンドで開始できます：
cp .env.example .env.local
# .env.localを編集して、実際の値を入力2. 環境ごとに異なる値を使用する
本番環境と開発環境では、必ず異なるAPI Keyやデータベースを使用してください。
# 開発環境（.env.local）
DATABASE_URL=postgresql://localhost:5432/mydb_dev
STRIPE_SECRET_KEY=sk_test_xxxxxxxxx # テストモード
# 本番環境（Vercelダッシュボード）
DATABASE_URL=postgresql://production-host:5432/mydb_prod
STRIPE_SECRET_KEY=sk_live_xxxxxxxxx # 本番モード3. 環境変数の命名規則を統一する
チーム全体で統一された命名規則を使用すると、管理が容易になります。
- 大文字とアンダースコア：
DATABASE_URL、API_KEY - サービス名をプレフィックスに：
STRIPE_SECRET_KEY、SENDGRID_API_KEY - 公開変数にはNEXT_PUBLIC_：
NEXT_PUBLIC_API_URL
4. 環境変数の存在確認を実装する
アプリケーション起動時に必須の環境変数が設定されているか確認します。
// lib/env.ts
const requiredEnvVars = [
'DATABASE_URL',
'STRIPE_SECRET_KEY',
'NEXT_PUBLIC_API_URL',
] as const;
export function validateEnv() {
const missing: string[] = [];
for (const envVar of requiredEnvVars) {
if (!process.env[envVar]) {
missing.push(envVar);
}
}
if (missing.length > 0) {
throw new Error(
`Missing required environment variables: ${missing.join(', ')}`
);
}
}
// アプリケーション起動時に実行
// next.config.js
const { validateEnv } = require('./lib/env');
validateEnv();
module.exports = {
// Next.js設定...
};5. 型安全な環境変数アクセス
TypeScriptを使用している場合、環境変数の型定義を作成します。
// env.d.ts
declare global {
namespace NodeJS {
interface ProcessEnv {
DATABASE_URL: string;
STRIPE_SECRET_KEY: string;
STRIPE_PUBLISHABLE_KEY: string;
NEXT_PUBLIC_API_URL: string;
NEXT_PUBLIC_GA_TRACKING_ID?: string; // オプショナル
}
}
}
export {};
// これで型安全にアクセス可能
const dbUrl = process.env.DATABASE_URL; // string型として認識6. ローテーションとアクセス制御
- 定期的なローテーション：API Keyやパスワードは3-6ヶ月ごとに変更
- 最小権限の原則：各環境変数に必要最小限の権限のみ付与
- アクセスログの監視：不正なアクセスがないか定期的に確認
- チーム退職時の対応：メンバーが退職した際は、すべての秘密情報を変更
よくあるトラブルシューティング
生徒環境変数を使用するにあたってトラブルシューティングのことも知りたいです！
ペン博士うむ。ここでは、主なトラブルシューティングを4つ紹介するぞい！
問題1：環境変数が読み込まれない
症状： process.env.DATABASE_URLがundefinedになる
原因と解決策：
- 開発サーバーを再起動していない
.env.localを変更したら、npm run devを再起動する必要があります
- ファイル名が間違っている
.envではなく.env.localを使用してください
- クライアント側で使用しようとしている
- クライアント側では
NEXT_PUBLIC_プレフィックスが必要です
- クライアント側では
問題2：Vercelでデプロイ後に環境変数が反映されない
症状： ローカルでは動くが、Vercelデプロイ後にエラー
解決策：
- Vercelダッシュボードで環境変数が正しく設定されているか確認
- 適切な環境（Production/Preview/Development）に設定されているか確認
- 環境変数を追加・変更したら、再デプロイが必要
# Vercel CLIで再デプロイ
vercel --prod
# または、GitHubにpushして自動デプロイ問題3：ビルド時にNEXT_PUBLIC_変数が空になる
症状： process.env.NEXT_PUBLIC_API_URLが空文字列またはundefined
原因： NEXT_PUBLIC_変数はビルド時に埋め込まれるため、ビルド時に存在している必要があります。
解決策：
- Vercel/Netlifyのダッシュボードで
NEXT_PUBLIC_変数を設定 - 設定後、再ビルド・再デプロイ
問題4：GitHubにコミットしてしまった秘密情報を削除したい
手順：
- すぐに秘密情報を無効化
- API Keyの無効化、パスワード変更など
- Git履歴から削除
- BFG Repo-Cleanerを使用（推奨）
# BFG Repo-Cleanerをダウンロード
# https://rtyley.github.io/bfg-repo-cleaner/
# .env.localファイルを削除
java -jar bfg.jar --delete-files .env.local
# Git履歴をクリーンアップ
git reflog expire --expire=now --all
git gc --prune=now --aggressive
# 強制プッシュ（注意：チームメンバーに通知）
git push --force- 新しい秘密情報を発行
- 新しいAPI Keyを発行し、Vercel/Netlifyダッシュボードで設定
生徒環境変数の管理って、思った以上にセキュリティが重要なんですね。NEXT_PUBLIC_の使い分けをしっかり理解できました！
ペン博士その通りじゃ！一度秘密情報が漏洩すると、取り返しがつかないことになる。常に「これは公開されても大丈夫か？」と自問自答する習慣を付けることが大切じゃぞ！
生徒勉強になります！ありがとうございました！
まとめ
本記事では、Vercel/Netlifyでの環境変数の安全な管理方法について、実践的な内容を解説しました。
重要なポイントは以下の通りです。
・環境変数の役割：秘密情報をコードから分離し、安全に管理する仕組み
・NEXT_PUBLIC_の正しい使い方：公開されても問題ない情報のみに使用し、API Keyなどの秘密情報には絶対に使用しない
・Vercel/Netlifyでの設定：ダッシュボードから環境ごとに設定し、.envファイルはGitHubにコミットしない
・GitHub Secretsとの連携：CI/CDパイプラインでは、GitHub Secretsで環境変数を管理
・セキュリティ対策：ログへの出力を避け、クライアント側で秘密情報を使用しない
・ベストプラクティス：.env.exampleを用意し、型安全なアクセス、定期的なローテーションを実施
適切な環境変数管理は、セキュリティの基本であり、すべてのエンジニアが身につけるべき必須スキルです。
まずは既存プロジェクトの環境変数設定を見直し、.envファイルが誤ってGitHubにコミットされていないか確認してください。そして、NEXT_PUBLIC_プレフィックスの使用箇所が適切か、一つひとつチェックしましょう。
WithCodeを体験できる初級コース公開中！
初級コース（¥49,800）が完全無料に！
- 期間：1週間
- 学習内容： ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成 → 正しい学習方法で「確かな成長」を実感できるカリキュラム
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？
未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！
