배포 플랫폼 Firebase

✅ Firebase가 뭔데?

• Google이 제공하는 클라우드 플랫폼.
• DB, 인증, 스토리지 등 다 있지만 Firebase Hosting은 정적 사이트(HTML/CSS/JS) 빠르게 배포하는 데 많이 씀.
• React + Vite 빌드된 정적 파일도 여기에 올리면 끝.

---

✅ 필수 준비

1️⃣ Firebase 계정 (Google 계정으로 로그인)
2️⃣ Firebase 프로젝트 만들기
3️⃣ 로컬에 Node.js 설치 (이미 되어있으면 OK)

---

✅ 배포 순서

1️⃣ Firebase CLI 설치

터미널에서:

bash

 

npm install -g firebase-tools

 

2️⃣ Firebase 로그인

bash

 

firebase login

---

3️⃣ Firebase 프로젝트 만들기

Firebase 콘솔(https://console.firebase.google.com) 가서 프로젝트 생성 → 이름 정하고 → Hosting 추가.

 

---

4️⃣ 로컬 프로젝트에서 Firebase 초기화

프로젝트 루트에서:

bash

 

firebase init

여기서 선택:

• Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys? → ✔️ 선택
• 기존 프로젝트 선택 → 네 프로젝트 선택
• public 디렉토리? → dist 입력 (Vite 빌드 결과 폴더)
• Single-page app? (rewrite all urls to /index.html) → ✔️ (React Router 쓰면 무조건 yes!)
• 자동으로 firebase deploy 실행? → No 해도 됨.

---

5️⃣ Vite 빌드

bash

 

npm run build

→ dist 폴더에 정적 파일 생성됨.

---

6️⃣ Firebase에 배포

bash

 

firebase deploy

 

 

✅ 무료 요금제

사용자 인증, 간단한 정적 사이트 정도는 무료로 충분.

 

✏️ 느낀점

초기 세팅만 해놓으면, IDE에서 git push 처럼 deploy 가 되어서 엄청 편한 느낌.

또 하나의 정적 배포 플랫폼을 사용해봐서 즐거웠음~