[React + Firebase] 호스팅(Hosting)

오늘은 React 프로젝트를 Firebase에 호스팅 하는 방법과 순서에 대해서 얘기를 해보겠습니다.

 

우선 Firebase란?

구글에서 제공해주는 인프라로 서버와 DB 등 많은 유용한 서비스를 쉽게 사용할 수 있게 제공해주는 서비스입니다.

이용량과 사용하기에 따라 요금이 부과될 수 있지만 보통 작은 프로젝트나 개발연습용 정도의 사용량은 무료버전으로 사용할 수 있어 저는 자주 사용하는 것 같습니다.

 

아래 과정은 구글 파이어베이스에 프로젝트 등록이 되어있음을 가정하고 호스팅 과정을 보여줍니다.

---

1. 먼저 Firebase를 쉽게 이용하기 위한 명령줄 도구를 설치하겠습니다(Firebase CLI)

npm install firebase-tools -g

2. 프로젝트 초기화단계

// 1st 로그인은 1회만 하면 됩니다. 
firebase login 

// 2nd 
firebase init

여기서 가끔 오류가 날 수 있는데

환경변수 오류

이런 오류가 났다면 1번 과정에서 firebase-tools 를 설치한 위치가 log에 남아있을텐데

그 주소를 복사하여 고급 시스템 설정 - 환경변수 에 추가를 해줍니다.

 

init 과정을 시작하게 되면

 

정상적인 작동시

이런 멋진 글씨가 보이며 진행을 하게 됩니다.

이제 순서대로 진행을 해봅시다.

① Are You ready to proceed? Y

② 무엇을 진행할 것인가? 저희는 호스팅을 할거기 때문에 호스팅으로 방향키를 이동후 space -> Enter를 합니다

③ What do you want to use as your public directory? build (저희는 build 실행 후 그 파일을 호스팅하겠습니다)

④ SPA(Single Page Application)인가? Y/N 이부분은 자유롭게 하시면 됩니다

⑤ build/index.html이 이미 존재한다 덮어쓸 것인가 ? N

 

이제 초기화는 완료됐습니다.

 

3. 배포하기

build 파일을 이미 만들어놓지 않았다면 npm run build 를 실행한 후

대망의

 

firebase deploy

를 진행해줍니다.

이렇게 하면 Hosting URL을 통해 나의 프로젝트가 모든 사람들이 볼 수 있도록 호스팅되었습니다 !_!

😊😊