환경 변수

Canvas 프로젝트에서 사용하는 환경 변수입니다.

.env.dev (개발)

프로젝트 루트에 .env.dev 파일을 생성합니다:

DB_PASSWORD=example_password
VITE_API_URL=http://localhost:3000
NODE_ENV=development
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
JWT_SECRET=your-jwt-secret-at-least-32-chars

변수	사용처	설명
DB_PASSWORD	Docker (db, api)	PostgreSQL 비밀번호
VITE_API_URL	web (Vite)	API 베이스 URL
NODE_ENV	api	실행 환경
GOOGLE_CLIENT_ID	api	Google OAuth 2.0 클라이언트 ID
GOOGLE_CLIENT_SECRET	api	Google OAuth 2.0 클라이언트 시크릿
JWT_SECRET	api	JWT 서명 시크릿 (충분히 긴 랜덤 문자열)

Google Cloud Console OAuth 설정:

• 승인된 리디렉션 URI: http://localhost:3000/auth/google/callback

.env.prod (프로덕션)

pnpm docker:prod  # --env-file .env.prod

프로덕션 값은 배포 환경에 맞게 설정하세요. OAuth 리디렉션 URI도 배포 도메인에 맞게 변경해야 합니다.

Docker Compose에서의 전달

web

environment:
  - VITE_API_URL=${VITE_API_URL}

Vite는 빌드/실행 시 VITE_ 접두사 변수를 클라이언트에 주입합니다.

api

environment:
  DATABASE_URL: postgresql://postgres:${DB_PASSWORD}@db:5432/mydb
  NODE_ENV: ${NODE_ENV}
  GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID}
  GOOGLE_CLIENT_SECRET: ${GOOGLE_CLIENT_SECRET}
  JWT_SECRET: ${JWT_SECRET}

db

environment:
  POSTGRES_USER: postgres
  POSTGRES_PASSWORD: ${DB_PASSWORD}
  POSTGRES_DB: mydb

web 앱에서 API URL 사용

VITE_API_URL은 인증·워크스페이스 API에 사용됩니다:

// OAuth 시작
window.location.href = `${import.meta.env.VITE_API_URL}/auth/google`;

// 인증 API (쿠키 포함)
const res = await fetch(`${import.meta.env.VITE_API_URL}/users/me`, {
  credentials: 'include',
});

// 워크스페이스·노드 (JWT 필요, credentials: 'include')
await fetch(`${import.meta.env.VITE_API_URL}/workspaces`, { credentials: 'include' });
await fetch(`${import.meta.env.VITE_API_URL}/workspaces/1/nodes`, { credentials: 'include' });
await fetch(`${import.meta.env.VITE_API_URL}/workspaces/1/nodes`, {
  method: 'PUT',
  credentials: 'include',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ nodes, nodeOrder }),
});

api CORS는 http://localhost:3001 origin + credentials: true로 설정되어 있습니다.

로컬 API 개발 (Docker 없이)

DATABASE_URL=postgresql://postgres:example_password@localhost:5432/mydb \
GOOGLE_CLIENT_ID=... \
GOOGLE_CLIENT_SECRET=... \
JWT_SECRET=... \
  pnpm --filter api dev

DB 스키마 적용:

cd apps/api
DATABASE_URL=postgresql://postgres:example_password@localhost:5432/mydb \
  pnpm exec prisma migrate deploy

보안 주의

• .env.dev, .env.prod는 git에 커밋하지 마세요
• JWT_SECRET, GOOGLE_CLIENT_SECRET은 프로덕션에서 secrets manager 사용 권장
• JWT는 httpOnly 쿠키로 전달됩니다

관련 문서

• 개발 환경 설정
• Docker 개발
• 백엔드 아키텍처