Vercel로 [ Vite + React + Firebase ] 프로젝트 배포하기

배포란 무엇일까?

배포란 단순히 말해서,
내가 VSCode에서 npm run dev로 실행하지 않아도,
어디서든 접속 가능한 주소(도메인)로 내 서비스를 사용할 수 있게 만드는 것!

좀 더 전문적인 정의로는 아래와 같습니다.

내 컴퓨터에서만 동작하던 서비스를
인터넷을 통해 누구나 접근할 수 있도록 공개하는 과정

 

로컬 개발 Local Development	내 컴퓨터 + VSCode에서 `npm run dev` 로 개발 서버를 실행하면 변경 사항이 실시간 반영되어 UI, 수정, 기능 구현에 최적화됩니다. 서비스는 내 PC가 켜져 있어야 동작할 수 있다는 단점이 있습니다.
빌드 Build	개발용 코드를 배포 가능한 형태로 변환하는 과정으로 npm run build 실행시 Vite가 코드를 최적화 합니다. ( 최신 JS 문법을 호환 버전으로 변환, CSS압축, 효율적 파일 로드를 위해 파일을 chunk로 분리 등 ) 빌드된 결과물은 /dist 폴더에 생성됩니더
배포 Deployment	/dist 폴더의 파일을 Vercel 서버에 업로드 환경변수 등을 설정하면 Vercel이 자동 라우팅되고, 이후에 SSL, CDN 배포 처리를 합니다. ( Firebase Auth를 쓰는 경우 프로덕션 도메일을 등록해줘야 합니 )
서비스 동작 Service Running	사용자는 서비스 도메인에 접속할 수 있습니다. 서비스는 다음과 같이 동작합니다. [ 브라우저가 HTML/JS를 실행 → React 앱 부팅 →  React Router가 라우팅 → Firebase가 데이터 처리 ]  내 PC가 꺼져 있어도, 서버와 CDN이 항상 켜져 있으므로 서비스가 동작합니다

 

왜 Vercel로 배포할까?

웹 서비스를 배포할 수 있는 플랫폼은 Netlify, Firebase Hosting, AWS 등 다양합니다.
그중에서도 Vercel을 선택하는 이유는 다음과 같습니다.

1. github 과 자동 연동
   repository를 연동해두면 git push 만으로 자동 배포가 되기 때문에 간편합니다!
2. 프론트엔드 개발자에게 친화적
   https://vercel.com/docs/builds/configure-a-build?utm_source=chatgpt.com
   Vercel은 내가 별도로 빌드 명령어, 출력 폴더, 최적화 설정을 안 해도 package.json과 프로젝트 구조만 보고, 자동으로 빌드 명령(vite build)과 배포 폴더(/dist)를 인식하여 클릭 몇 번으로 배포를 할 수 있도록 설정돼 있습니다!
3. CDN 기반 전 세계 배포
   https://vercel.com/docs/edge-network?utm_source=chatgpt.com
   사용자가 어디서 접속하든 가까운 CDN 서버에서 파일 제공 → 빠른 로딩 속도.
4. 환경변수 & 라우팅 설정 편리함
   Firebase, API Key 같은 민감한 값들을 UI에서 쉽게 설정할 수 있고, vercel.json으로 SPA 라우팅 문제도 손쉽게 해결 가능합니다. 

Vercel 배포과정

1. 빌드 확인

로컬에서 프로젝트가 정상적으로 빌드되는지 확인한다. 에러가 없어야 Vercel에서도 빌드가 성공한다.

npm run build

2. Vercel 프로젝트 생성

• vercel 접속 → New Project 클릭
• Github Repository Import → 배포할 프로젝트 선택
• Deploy 클릭

3. 환경변수 설정

• .env 파일은 자동으로 가져오지 않음 → Vercel에 직접 입력
• Vite 규칙: 환경변수 이름은 반드시 VITE_ 접두사 필요

vercel 환경변수 설정 화

// .env 파일에 작성된 환경변수 명과 같이 작성해준다
VITE_FIREBASE_apiKey=000000000000000
VITE_FIREBASE_authDomain=000000000000000
VITE_FIREBASE_databaseURL=000000000000000
VITE_FIREBASE_projectId=000000000000000
VITE_FIREBASE_storageBucket=000000000000000
VITE_FIREBASE_messagingSenderId=000000000000000
VITE_FIREBASE_appId=000000000000000

4. Firebase Auth 도메인 허용

• Firebase 콘솔 → Authentication → Authorized domains → 프로젝트명.vercel.app 추가
• 배포 후에는 해당 도메인도 추가해야 로그인 정상 동작

5. SPA 라우팅 문제 해결( 404 Error )

React Router를 쓰는 SPA는 새로고침 시 Vercel이 정적 파일을 찾다가 404 Error가 발생한다.

프로젝트 루트에 vercerl.json 설정 파일을 추가해 경로를 설정해줘야 한다.

 

프로젝트의 vercel.json 설정 추가

SPA( React Router )사용시 Vercel이 SPA의 라우팅을 직접 처리하지 못하는 404 에러가 발생하면 vercel.json 파일에 rewrites를 작성해 리다이렉트 ( ‘/’ ) 라우팅을 설정하는 코드를 추가해야 한다

// vercel.json
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

React Router and Vite App: 404 Error for Routes on Vercel Deployment

Configuring projects with vercel.json