FireBase 호스팅 방법

🔥 Vue 프로젝트 Firebase Hosting 배포 가이드

Vue 프로젝트(Vite 기반)를 Firebase에 배포하기 위한 4단계 요약 가이드입니다.

📋 전제 조건

• Firebase 콘솔에서 새 프로젝트가 생성되어 있어야 합니다.
• 터미널의 경로는 반드시 Vue 프로젝트 루트 폴더여야 합니다.

1단계: 도구 설치 및 로그인

Firebase CLI를 설치하고 본인의 계정으로 로그인합니다. (이미 완료했다면 생략 가능)

# Firebase 도구 설치
npm install -g firebase-tools

# Firebase 계정 로그인
firebase login

2단계: 프로젝트 초기 설정 (최초 1회)

프로젝트와 Firebase를 연결하고 호스팅 설정을 구성합니다.

firebase init hosting

🔍 설정 질문 답변 가이드: | 질문 내용 | 답변 / 선택 | | :--- | :--- | | Please select an option | Use an existing project 선택 후 생성한 프로젝트 선택 | | What do you want to use as your public directory? | dist 입력 (Vite 기본 빌드 폴더) | | Configure as a single-page app (SPA)? | y (라우팅 처리를 위해 필수) | | Set up automatic builds and deploys with GitHub? | n (수동 배포 설정) |

3단계: 프로젝트 빌드

작성한 코드를 배포용 파일로 변환합니다. 실행 후 dist 폴더가 생성되었는지 확인하세요.

npm run build

4단계: 배포 실행

빌드된 파일을 Firebase 서버로 업로드합니다.

firebase deploy

✅ 배포 완료

배포가 성공적으로 끝나면 터미널에 Hosting URL이 출력됩니다.

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

해당 주소로 접속하여 결과물을 확인하세요!

 

---

🔐 Firebase 계정 전환 및 재로그인

기존 계정에서 로그아웃하고 새로운 계정으로 접속해야 하거나, 인증 세션이 만료되었을 때 아래 단계를 수행하세요.

1. 로그아웃 (Logout)

현재 로그인된 Firebase 계정 세션을 종료합니다.

firebase logout

2. 다시 로그인 (Login)

새로운 계정 또는 기존 계정으로 다시 인증을 진행합니다.

firebase login

💡 로그인 진행 방법:

1. 위 명령어를 입력하면 자동으로 웹 브라우저가 열립니다.
2. 사용하고자 하는 Google 계정을 선택합니다.
3. Firebase CLI의 접근 권한 요청 화면에서 [허용] 버튼을 클릭합니다.
4. 터미널에 Success! Logged in as [이메일주소] 문구가 나오면 완료됩니다.

---

추가 팁: 현재 어떤 계정으로 로그인되어 있는지 확인하고 싶다면 firebase login:list 명령어를 사용해 보세요.