Firebase+React Hosting (파이어베이스와 리액트로 호스팅)

Firebase + React Hosting

리액트 프로젝트에 파이어베이스를 적용하여 호스팅을 해보겠습니다.

 

설명하기에 앞서..

저는 Vite를 이용하여 React.js+TypeScript 조합으로 사용중이며 프로젝트를 이미 만든 상태에서 시작합니다.

 

파이어베이스 세팅

프로젝트 만들기

파이어베이스에 구글로 로그인을 하시고 위와 같이 시작하시면 될것 같습니다.

먼저 프로젝트 추가를 클릭하여 프로젝트를 만들어줍니다.

 

저는 프로젝트 이름을 DongNol이라고 하겠습니다.

따라하시는 분들은 원하시는 프로젝트 이름으로 작명하시면 되겠습니다.

 

애널리틱스 설정을 해줍니다.

대충 설명을 드리자면 웹사이트 트래픽을 추적하고 보고하는 구글이 제공하는 서비스입니다.

필수가 아닌 권장이므로 편하신대로 설정해주시면 되겠습니다.

저는 나중에 테스팅과 트래픽 추적을 해보고싶어서 설정하였습니다.

 

애널리틱스 구성에서 계정은 다음과 같이 설정하였습니다.

설정을 다하셨으면 프로젝트 만들기를 클릭합니다.

 

프로젝트 준비과정을 거치면 다음과 같이 준비되었다는 문구가 나옵니다.

계속을 클릭해줍니다.

 

앱에 Firebase를 추가하여 시작하기

만들어지면 다음과 같은 화면이 보일겁니다.

 

여기서 저희는 웹이기 때문에 "</>"를 선택해줍니다.

 

닉네임을 등록해주고 호스팅은 뒤에서 자세히 보여드리려고 체크하지 않고 넘어갑니다.

앱등록을 클릭해줍니다.

 

Firebase SDK를 추가해줍니다.

npm을 사용하여 다음의 과정들을 진행합니다.

npm install firebase

 

그리고 하단에 설정 파일의 내용들을 복사합니다. (차후에 src/firebaseConfig.ts 파일에 넣습니다)

하단에 버튼을 눌러 마무리 해줍니다.

 

아 참고로 프로젝트 개요 옆에 버튼을 눌러 프로젝트 설정에 오신다음에 스크롤 해보시면

하단에서 설정 파일을 발견하실 수 있습니다.

 

본격적인 호스팅 하기

왼쪽 NavBar를 보시면 빌드부분에 Hosting이 있습니다.

이걸 클릭해줍니다.

 

시작하기를 클릭하여 진행합니다.

 

프로젝트 터미널에서 다음 명령어를 실행합니다.

+추가로 저는 SDK도 추가하겠습니다.

npm install -g firebase-tools

 

명령어 입력 후 다음을 클릭합니다.

 

프로젝트 초기화를 진행합니다.

프로젝트 터미널에 다음 명령어를 실행합니다.

firebase login

정상적으로 로그인 되었습니다.

 

firebase init

 

다음 명령어를 입력하여 호스팅 설정을 합니다.

 

어떤 파이어베이스 기능을 설정하겠냐고 물어보는 질문입니다.

여러 기능들이 있지만 여기서 저희는 호스팅만 하기 위해서 사진과 같은 옵션을 스페이스바로 선택해줍니다.

 

프로젝트 세팅입니다.

기존의 프로젝트를 사용할것인지 혹은 새로운 파이어베이스 프로젝트를 만들 것인지 선택하는 부분입니다.

저희는 기존의 프로젝트가 있으므로 사진과 같이 선택해줍니다. (이 부분부터 선택은 엔터입니다)

 

아까 만들어두었던 프로젝트를 선택해줍니다.

 

호스팅 설정을 해보겠습니다.

첫번째 질문은 배포할 파일의 위치를 설정합니다. build폴더에 최종적으로 업로드할 파일이 있으므로 build로 설정합니다.

두번째 질문은 SPA(single-page-app)로 설정할 것인지에 대한 질문입니다. y를 눌러 Yes로 설정합니다.

세번째 질문은 자동 빌드와 자동 배포에 대한 질문입니다. 하지않을것이기 때문에 n을 눌러 No로 설정합니다.

마지막으로 build/index.html 파일을 덮어 씌우겠냐는 설정에 y를 눌러 Yes로 설정하고 마무리 합니다.

 

닉네임을 정해줍니다.

 

아까 위와 같으므로 생략하겠습니다.

 

다음 명령어를 이용해 배포합니다.

firebase deploy

 

배포가 성공적으로 진행되었습니다.

Hosting URL에서 사이트 주소를 확인할 수 있습니다.

 

잘 배포가 되었습니다.

시간이 조금 지나거나 작업을 하다보면 개발한 웹사이트가 해당 주소에 보여지게 됩니다.