Vue Firebase 배포 방법 (Vite 기반 실전 예제)

개발한 프론트엔드를 실제로 배포해서 누구나 접속할 수 있는 웹사이트로 만들기까지의 과정을 기록합니다.
이 글은 Vue.js로 개발한 웹앱을 Firebase Hosting을 통해 배포한 실전 과정입니다.

 

---

📦 1. Firebase 프로젝트 생성하기

1. Firebase Console에 접속
2. 새 프로젝트 생성 (예: dart-entity-generator)
3. Hosting 기능 활성화
   • 왼쪽 메뉴 → Build > Hosting → 시작하기

---

🛠️ 2. Firebase CLI 설치

터미널에서 Firebase CLI를 설치합니다.

bash

npm install -g firebase-tools

 

 

설치 확인:

bash

firebase --version

 

---

 

🔐 3. 로그인 및 프로젝트 연결

bash

 

firebase login

→ 브라우저가 열리면 구글 계정으로 로그인

그 후, Vue 프로젝트 루트 디렉토리로 이동해서:

bash

firebase init hosting

여기서 실수 주의: 루트 디렉토리 위치를 잘못 잡으면 firebase.json이 엉뚱한 데 생김 😅

 

---

⚙️ 4. firebase init hosting 옵션 선택

질문에 이렇게 답하면 됩니다:

질문답변

What do you want to use as your public directory?	dist
Configure as a single-page app?	Yes
Set up automatic deploys with GitHub?	No

git hub에 푸쉬 하면 자동 배포를 원하시면 마지막 질문에 Yes 하셔도 됩니다.

→ 그러면 firebase.json, .firebaserc 파일이 생성됩니다.

 

---

🧱 5. Vue 앱 빌드

bash

npm run build

→ dist/ 폴더가 생성되고, 그 안에 실제 배포될 정적 파일들이 들어 있습니다.

 

---

🚀 6. Firebase Hosting에 배포

bash

firebase deploy

→ 배포가 완료되면 아래처럼 주소가 나옵니다:

Hosting URL: https://your-project-id.web.app

 

---

 

🛡️ 7. CORS 문제 해결 (백엔드 연동 시)

프론트가 Firebase에서 배포되면, Spring 서버에서 CORS 정책에 이 도메인을 추가해줘야 합니다.

kotlin

config.allowedOrigins = listOf(
"http://localhost:5173", // 개발용 
"https://your-project-id.web.app", // Firebase Hosting 
"https://your-custom-domain.com" // (옵션) 커스텀 도메인 
)

 

---

 

✅ 마무리

이제 누구나 완성된 Vue 앱에 접속할 수 있습니다.
Firebase Hosting은 HTTPS, 캐시, CDN, SSL 모두 기본 제공이라, 가볍고 빠른 배포에 정말 좋습니다.

 

---

💡 느낀 점

• firebase init을 정확한 디렉토리에서 실행하는 게 중요하다
• 로컬 개발과 배포 주소가 달라지면 CORS 문제가 생길 수 있다
• Firebase Hosting은 정적 웹사이트 배포에 아주 강력한 도구다