Tasuke HubLearn · Solve · Grow
#Security

Secrets/環境変数の実践ガイド【2025年版】:Next.js/Node/CI/CDの安全な管理

dotenvから本番のシークレット管理まで。ランタイム/ビルド時/エッジの違い、Vercel/Actionsの変数設定、ローカル用の.env運用、リーク防止チェック、型安全アクセス、ローテーション設計を解説。

時計のアイコン13 September, 2025
TH

Tasuke Hub管理人

東証プライム市場上場企業エンジニア

情報系修士卒業後、大手IT企業にてフルスタックエンジニアとして活躍。 Webアプリケーション開発からクラウドインフラ構築まで幅広い技術に精通し、 複数のプロジェクトでリードエンジニアを担当。 技術ブログやオープンソースへの貢献を通じて、日本のIT技術コミュニティに積極的に関わっている。

🎓情報系修士🏢東証プライム上場企業💻フルスタックエンジニア📝技術ブログ執筆者

まず区別する3レイヤー

  • ビルド時(例: Next.jsの静的生成、Webpack時点)
  • ランタイム(Node.jsサーバー、Edge Runtime)
  • クライアント公開(NEXT_PUBLIC_ 前置のみ許可)

ベストマッチ

最短で課題解決する一冊

この記事の内容と高い親和性が確認できたベストマッチです。早めにチェックしておきましょう。

ローカル:dotenvの最小ルール

npm i dotenv --save-dev
// scripts/setup-env.ts
import 'dotenv/config';
console.log(process.env.API_BASE_URL);

.env はGitコミット禁止、.env.example を用意。秘密はダミー値で。


さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

Next.jsでの安全な参照

// app/config.ts(サーバー専用)
export const Config = {
  apiBase: assertString(process.env.API_BASE_URL),
  token: assertString(process.env.SERVICE_TOKEN),
} as const;

function assertString(v?: string): string { if (!v) throw new Error('Missing env'); return v; }

クライアント側で参照するものは NEXT_PUBLIC_ をつける。秘密を誤って露出させない。


さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

Edge Runtimeの注意

  • Node専用API(fs/crypto.randomBytes等)が使えない場合あり
  • 小さいJWT/署名Cookieでステートレス設計
  • 必要最小限のヘッダだけをエッジから上流へ転送

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

CI/CDでの設定(例:GitHub Actions)

# .github/workflows/deploy.yaml(抜粋)
env:
  NEXT_PUBLIC_API_BASE_URL: ${{ vars.NEXT_PUBLIC_API_BASE_URL }}
  SERVICE_TOKEN: ${{ secrets.SERVICE_TOKEN }}

変数(vars)は公開可/低リスク設定、秘密(secrets)は高リスク設定に使用。


さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

リーク防止と監査

  • ripgrep でキー様式をスキャン(AKIA[0-9A-Z]{16} 等)
  • PRで.env直コミットをブロック(pre-commit/CI)
rg -n "AKIA[0-9A-Z]{16}|sk-live-|ghp_[0-9a-zA-Z]{36}" -g "!*node_modules" || true
``;

---

## ローテーション設計

- キーは短命化(90日)し、アプリ側は複数キーの受け入れに対応
- 期限切れ前に新キーを配布→移行→旧キー無効化

---

## まとめ

「クライアント公開/サーバー秘密/ビルド時」の境界を守り、`.env.example` とCI設定を整備。リーク検知とローテーションを日常運用に組み込みましょう。

さらに理解を深める参考書

関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。

この記事をシェア

続けて読みたい記事

編集部がピックアップした関連記事で学びを広げましょう。

#Next.js

Next.js Edge Runtime実践ガイド【2025年版】:低レイテンシとストリーミングを最大化する

2025/9/13
#DevSecOps

DevSecOps実践ガイド:CI/CDにセキュリティを組み込む手法【2025年版】

2025/9/19
#Next.js

Next.js App Router移行チェックリスト【2025年版】:安全・段階的に進める実務ガイド

2025/9/13
#React

React 19の新機能 `use` フック実践ガイド【2025年版】

2025/9/19
#Next.js

Next.js 15 × React 19 実践ガイド - 新機能を活用したEコマースアプリ開発の全て【2025年決定版】

2025/8/11
#React

React Hooks超入門【2025年版】:useState/useEffectから始める実践ガイド

2025/9/13