Vue.js 프론트엔드를 Vercel에 배포한다. config.js 엔드포인트 전환, VITE_ 환경변수 설계, vercel.json, 업로드/다운로드 경로(signed URL) 변경, 한글 파일명/회전 이슈 퇴행 방지 체크리스트.
frontend-migration-engineer 전용. 기존 Vue 앱을 최소 변경으로 Vercel에 올린다.
front/src/config.js (API/Storage 베이스 URL)front/ 루트에 vercel.json 추가.env.example 업데이트{
"buildCommand": "npm --prefix front run build",
"outputDirectory": "front/dist",
"framework": "vite",
"rewrites": [
{ "source": "/api/:path*", "destination": "/api/:path*" }
]
}
Monorepo 구성: 레포 루트에 Vercel 프로젝트를 바인딩하고 Root Directory = ./로 두되 build는 front/에서 실행. api/는 레포 루트에 둔다 (vercel-api-engineer 산출물과 일치).
또는 Vercel 대시보드 설정으로 Root Directory = front/, api/ 만 레포 루트 유지 — architect와 합의.
// front/src/config.js
const API_BASE = import.meta.env.VITE_API_BASE || '/api';
const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL;
const SUPABASE_ANON_KEY = import.meta.env.VITE_SUPABASE_ANON_KEY;
export const config = {
apiBase: API_BASE,
supabaseUrl: SUPABASE_URL,
supabaseAnonKey: SUPABASE_ANON_KEY,
};
주의: SUPABASE_SERVICE_ROLE_KEY 절대 노출 금지. anon key만.
기존: API Gateway 바디 업로드 or S3 presigned URL
신규: Vercel Function이 signed_upload_url 발급 → 프론트가 PUT으로 Storage에 직접
// 1. 업로드 URL 발급
const { uploadUrl, jobId, uploadPath } = await axios.post('/api/extract-mappings', { fileName, size });
// 2. Storage로 직접 업로드
await axios.put(uploadUrl, fileBlob, { headers: { 'Content-Type': 'application/pdf' } });
// 3. 서버에 "업로드 완료" 통지 or 상태 폴링 시작
pollStatus(jobId);
기존: CloudFront URL 직접 링크
신규: /api/result/{jobId} → signed URL 받아 blob 변환 후 다운로드 (한글 파일명 퇴행 방지)
async function download(jobId, kind = 'completed') {
const { data } = await axios.get(`/api/result/${jobId}`);
const url = data.signedUrls[kind];
const blob = (await axios.get(url, { responseType: 'blob' })).data;
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = `${data.originalName}_완성.pdf`; // 한글 파일명 유지
a.click();
}
기존 CloudFront URL → signed URL. signed URL은 1시간 만료이므로 상태 조회 시점에 새로 발급받은 URL만 사용. 캐싱 주의.
# 공개 가능 (프론트 번들에 포함됨)
VITE_API_BASE=/api
VITE_SUPABASE_URL=https://xxxxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOi...
# 서버 전용 (Vercel Functions 환경변수로 설정, 프론트에 노출되지 않음)
# SUPABASE_SERVICE_ROLE_KEY=... (대시보드에서 설정, .env.example에는 제외)
npm --prefix front run build 또는 cd front && npm run buildfront/distnpm --prefix front installVITE_* + 서버용 Supabase 서비스 롤patent-helper-{username}.vercel.app)patent.sncbears.cloud 추가 → DNS 전환 시 활성화download 속성으로 유지, 서버는 Content-Disposition에 RFC 5987 인코딩 사용 시 주의_workspace/frontend/config.js.diff_workspace/frontend/vercel.json_workspace/frontend/.env.example_workspace/frontend/README.md — 로컬(Vite + 프리뷰 API) 연결 방법npm run build 성공VITE_* 외에 서버 키가 번들에 포함되지 않았는지 grep)