Firebase 호스팅: Vite/React 프로젝트 배포 후기

이번 개인 프로젝트에서 Firebase를 처음 사용하게 되었는데, 설정 과정에서 여러 가지 시행착오를 겪었습니다.

이번 포스팅에서는 저의 설정 과정 및 시행착오를 공유하고자 합니다.

1) Firebase Console에서 프로젝트 생성

1. Firebase Console 접속
Firebase Console에 접속하여 Google 계정으로 로그인합니다.

2. 프로젝트 생성
Firebase 대시보드에서 "프로젝트 추가" 클릭.
프로젝트 이름과 ID를 입력한 후 생성.

3. Firebase Hosting 활성화
생성된 프로젝트의 Build > Hosting으로 이동.
"호스팅 시작하기" 버튼 클릭.

2) Firebase CLI 설치

Firebase CLI를 통해 배포를 진행하므로, CLI를 먼저 설치해야 합니다.

1. Firebase CLI 설치

npm install -g firebase-tools

2. CLI 설치 확인

firebase --version

버전 번호가 출력되면 설치 완료.

3) Firebase CLI 로그인

Firebase CLI를 사용하려면 Google 계정으로 로그인해야 합니다.

1. 터미널에서 로그인 명령 실행:

firebase login

브라우저가 열리면 Google 계정으로 로그인하고 권한 요청을 승인합니다.

2. 로그인 성공 메시지:

Success! Logged in as <your-email@example.com>

4) Vite/React 프로젝트 빌드

Firebase는 정적 파일을 배포하므로 프로젝트를 먼저 빌드해야 합니다.

1. 프로덕션 빌드 실행

npm run build

2. 빌드 결과물 확인

dist(Vite) 또는 build(React) 디렉토리가 생성됩니다.
해당 디렉토리에 index.html이 포함되어야 합니다.

5) Firebase 초기화

Firebase CLI로 호스팅 설정을 초기화합니다.

1. 초기화 명령 실행:

firebase init hosting

2. 초기화 과정:

Select a Firebase project: Firebase Console에서 생성한 프로젝트 선택.
What do you want to use as your public directory?
Vite: dist
React: build
Single-page app 설정: Yes.

6) Firebase 배포

초기화가 완료되었으면 배포를 진행합니다.

1. 배포 명령 실행

firebase deploy

2. 배포 결과 확인

Firebase CLI에서 호스팅 URL이 출력됩니다:

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

브라우저에서 URL 접속 후 프로젝트가 정상적으로 보이는지 확인합니다.

만약! 계속 파이어 베이스 호스팅 가이드 페이지로 이동한다면 세팅 자체가 제대로 이뤄지지 않은겁니다.

저같은 경우엔 아무리 위 방법대로 세팅을 반복해도 호스팅 URL로 접근이 안돼서 보니, 프로젝트 폴더 안에 firebase.json 파일이 없는 상태였습니다,, ^^

그럴땐 파이어베이스 설정을 제거하고 다시 처음부터 진행하시는 걸 권유드립니다.
이 방법도 바로 이어지는 시행착오에서 다루도록 하겠습니다.

---

CLI 설치가 진행되지 않고 멈춰있다면?

처음 CLI 설치 시, 설치가 진행되지 않고 멈춰진 상태가 지속되어 원인을 알아보니, Node.js 버전이 오래되어 Firebase CLI의 요구사항을 충족하지 못하면 이런 문제가 생긴다고 합니다.

이럴 땐 Node.js 버전을 최신으로 업그레이드 해주신 후 진행하면 해당 문제가 사라진 것을 확인할 수 있습니다.

저는 nvm을 사용해서 업데이트 해보았는데, brew와 nvm의 차이에 대해서는 이후 포스팅에서 다루도록 하겠습니다.

1. nvm 설치 (brew를 사용해서 업데이트 해도 무방합니다)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

2. nvm 명령어 활성화 nvm 설치 후, 쉘 프로필 파일을 업데이트

source ~/.nvm/nvm.sh

사용 중인 셸에 따라 설정 파일이 다를 수 있음:
zsh: ~/.zshrc
bash: ~/.bashrc

3. nvm 설치 확인 아래 명령어로 설치가 제대로 되었는지 확인:

nvm --version

버전 번호가 출력되면 설치 완료.

4. 최신 Node.js 설치

nvm install --lts

5. 설치된 Node.js 버전 확인

node -v

6. npm 최신 버전으로 업데이트

npm install -g npm

7. 설치한 최신 Node.js를 기본으로 설정:

nvm alias default node

---

호스팅 URL로 접근 시 파이어베이스 가이드 페이지로 연결된다면?

위 페이지로 연결되는 경우가 있는데, 프로젝트 폴더 안에 firebase.json 파일의 유무를 확인해 보신 후, 없으실 경우 아래 가이드를 따라 재 설정을 권장드립니다.

1. 기존 Firebase 설정 제거

rm -rf firebase.json .firebaserc dist build

2. Firebase 초기화 상태 확인
초기화된 내용이 없어야 하니, 아래 명령어를 실행해서 확인:

ls

firebase.json이나 관련 파일이 없다면 정상적으로 삭제된 상태

3. Firebase 초기화 다시 실행

프로젝트 폴더 안에서 다시 초기화 명령을 실행

firebase init hosting

초기화 중 선택 사항:

Select a Firebase project: 기존 Firebase 프로젝트를 선택.
What do you want to use as your public directory?
Vite 프로젝트라면: dist
React 프로젝트라면: build
Configure as a single-page app?: Yes
Set up automatic builds and deploys with GitHub?: No

4. 프로젝트 빌드

npm run build

빌드가 성공하면 dist(Vite) 또는 build(React) 디렉토리가 생성됨.

5. 디렉토리 확인

아래 명령어로 dist 또는 build 디렉토리가 생성되었는지 확인

ls dist  # Vite
ls build # React

이 디렉토리에 index.html 파일이 있어야 함.

6. Firebase 배포

firebase deploy

7. 배포 성공 메시지 확인

배포가 완료되면 터미널에 아래와 같은 메시지가 표시됨

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

8. 배포 URL 접속

배포된 URL로 접속해서 프로젝트가 정상적으로 보이는지 확인.