まず区別する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設定を整備。リーク検知とローテーションを日常運用に組み込みましょう。
さらに理解を深める参考書
関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。
この記事をシェア



