環境変数の同期 — application.ymlと.env.localの使い分け

はじめに

Spring Boot × Next.jsのフルスタック構成では、バックエンドとフロントエンドそれぞれに環境変数の仕組みがあります。本番・開発・テスト環境で設定を切り替えるために、この仕組みを正しく理解することが重要です。

---

全体像

Spring Boot側                     Next.js側
application.yml          ↔       .env.local
application-dev.yml              .env.production
application-prod.yml

両側で管理する主な変数：

変数の種類	Spring Boot	Next.js
DBの接続先	application.yml	—
APIのURL	—	.env.local
JWTシークレット	application.yml	—
外部サービスAPIキー	application.yml	.env.local

---

Spring Boot側：application.yml の構成

application.properties よりも階層構造が書きやすい application.yml を使うのが実務では一般的です。

# application.yml（共通設定）
spring:
  application:
    name: my-app
  datasource:
    url: ${DB_URL:jdbc:mysql://localhost:3306/mydb}
    username: ${DB_USERNAME:root}
    password: ${DB_PASSWORD:password}
    driver-class-name: com.mysql.cj.jdbc.Driver
  jpa:
    hibernate:
      ddl-auto: update
    show-sql: false

server:
  port: 8080

jwt:
  secret: ${JWT_SECRET:local-dev-secret-key-32chars!!}
  expiration: 86400000

cors:
  allowed-origins: ${CORS_ORIGINS:http://localhost:3000}

${変数名:デフォルト値} の書き方で、環境変数が未設定の場合のデフォルトを指定できます。

---

環境別プロファイル

# application-dev.yml（開発環境）
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/mydb_dev
  jpa:
    show-sql: true  # 開発時はSQLを表示

logging:
  level:
    com.example: DEBUG

# application-prod.yml（本番環境）
spring:
  datasource:
    url: ${DB_URL}      # 必ず環境変数から取得（デフォルトなし）
    username: ${DB_USERNAME}
    password: ${DB_PASSWORD}
  jpa:
    show-sql: false
    hibernate:
      ddl-auto: validate  # 本番はスキーマ変更しない

logging:
  level:
    com.example: WARN

プロファイルの切り替えは起動時のオプションで行います。

# 開発環境
java -jar app.jar --spring.profiles.active=dev

# 本番環境
java -jar app.jar --spring.profiles.active=prod

---

Next.js側：.env ファイルの構成

# .env.local（ローカル開発専用・gitignore対象）
API_URL=http://localhost:8080
NEXT_PUBLIC_APP_NAME=MyApp

# .env.production（本番環境）
API_URL=https://api.example.com
NEXT_PUBLIC_APP_NAME=MyApp

NEXT_PUBLIC_ プレフィックスのルール

変数名	アクセス可能な場所
API_URL	サーバーサイドのみ（Server Component・Server Actions）
NEXT_PUBLIC_API_URL	サーバー＋クライアント両方

セキュリティ上の注意: APIキーやJWTシークレットは NEXT_PUBLIC_ をつけてはいけません。ブラウザのソースに露出します。

---

コードでの使い方

Spring Boot側（@Value）

@RestController
public class HealthController {

    @Value("${spring.application.name}")
    private String appName;

    @GetMapping("/health")
    public String health() {
        return appName + " is running";
    }
}

Next.js側（process.env）

// サーバーサイドのみ（APIキーなど秘密情報）
const res = await fetch(`${process.env.API_URL}/api/users`);

// クライアントサイドでも使える（公開情報のみ）
const appName = process.env.NEXT_PUBLIC_APP_NAME;

---

本番環境での環境変数管理

Spring Boot（AWS ECS / EC2の場合）

# ECSのタスク定義に環境変数を設定
# またはAWS Systems Manager Parameter Storeを使用
DB_URL=jdbc:mysql://prod-db.rds.amazonaws.com:3306/mydb
DB_USERNAME=admin
DB_PASSWORD=your-secure-password
JWT_SECRET=your-256bit-secret-key

Next.js（Vercelの場合）

Vercelのダッシュボード → Settings → Environment Variables で設定。

API_URL=https://api.example.com
NEXT_PUBLIC_APP_NAME=MyApp

---

まとめ

確認ポイント	Spring Boot	Next.js
ローカル設定ファイル	application-dev.yml	.env.local
本番設定ファイル	application-prod.yml	.env.production
実際の値の注入	環境変数（${DB_URL}）	環境変数（process.env.DB_URL）
クライアント公開	—	NEXT_PUBLIC_ プレフィックス
gitignore	不要（値は環境変数）	.env.local を除外

次回はシリーズ最終回、デプロイ — Spring BootをFargate、Next.jsをVercelにデプロイする手順を整理します。