[Firebase] 파이어베이스로 React 프로젝트 3분만에 호스팅하기 (무료로 URL, 웹사이트 구축하기)

파이어베이스에서 제공하는 많은 기능들이 있지만, 모두 번외로 하고 자신이 만든 프로젝트를 실서버(URL)에 등록(호스팅)만 하는 방법에 대해 알아보자.

 

 

https://firebase.google.com/?hl=ko 

Firebase

 

 

파이어베이스에 접속(상단 링크 참고)하여 "시작하기" 또는 "콘솔로 이동" 버튼을 클릭하여 다음 스텝으로 진행한다.

 

 

 

 

 

"프로젝트 추가" 영역을 클릭하여 파이어베이스의 새로운 프로젝트를 추가할 준비를 한다.

 

 

 

 

적당한 프로젝트 네이밍을 등록해주고 "계속" 버튼을 클릭한다.

 

 

 

 

가이드대로 터미널에서 "npm install -g firebase-tools" 명령어를 실행하여, 곧 Firebase CLI를 전역으로 설치해주고, "다음" 버튼을 클릭한다.

 

 

 

 

그 다음 스텝에 대한 설명이 나오는데, 해당 포스터에서 설명하며 진행할 예정이니 모두 "다음" 클릭하여 완료시킨다.

 

 

그렇다면 해당 페이지에 진입했을 것인데, 파이어베이스 프로젝트 생성에 성공한 것이다. 

도메인 변경을 하는 것이 아니라면, 더 이상 파이어베이스 콘솔 페이지에서 해줄 것은 없다.

 

 

 

 

호스팅하고자 하는 프로젝트로 돌아와, 터미널에 "firebase login"을 해준다.

당연히, 계정 로그인은 firebase 프로젝트를 생성한 계정과 동일하게 진행한다.

(이전에 firebase login을 한 적이 있었고, 에러가 뜬다면 "firebase login --reauth"를 해주자. 토큰을 재갱신하는 과정이다.)

 

 

 

 

로그인이 완료되었다면, "firebase init"을 입력하자.

여러 항목의 리스트가 나올 건데, 키보드 위아래 화살표를 이용하여 포커스가 가능하다.

"Hosting"에 포커스하여 "스페이스바"를 누른 뒤 "엔터"를 친다.

 

 

 

 

이미 firebase 프로젝트를 생성하였기 때문에, "Use an existing project"에 포커스한 뒤 엔터를 한다.

 

 

 

 

괄호 친 부분이, 이전에 입력하였던 firebase 프로젝트 이름이다. 맞는 곳을 선택하여 넘어간다.

 

 

 

 

 

그 다음은 업로드 될 파일을 명시하라고 한다. 기본 입력지가 public으로 나올건데 public으로 절대 하지 말고, 같은 루트 파일에 build 폴더를 생성한 뒤에 아래 스크린샷처럼 "build"를 입력하고 엔터를 친다.

 

 

 

위의 모든 과정을 완벽히 완료하였다면, 호스팅을 할 준비는 마쳤다.

 

 

create-react-app으로 react 앱을 세팅하였다면, package.json에 build를 수행하는 스크립트가 기본적으로 세팅이 되어 있다.

"build": "react-scripts build",

 

 

 

 

해당 명령어를 실행(yarn build)해주면 build 파일에 프로젝트를 구성하는 모든 소스파일들이 묶이게 된다.

yarn build

 

 

 

 

build까지 완료가 되었다면 build에 묶여있는 소스코드를 연결된 firebase 프로젝트로 올리는 명령어만 치면 배포가 완료된다.

firebase deploy

 

 

console의 마지막 문구인 Hosting URL에 보여지는 URL에 접속하면 실서버에 올라가 있음을 최종적으로 확인할 수 있다.

 

추후 업데이트 시에도 빌드(build) 후 배포(deploy)하는 과정을 거치면 된다.

 

 

 

파이어베이스 호스팅 가이드 자료를 만들기 위해 만든 프로젝트 URL과 깃헙 레포지토리

https://fir-hosting-guide-20515.web.app

React App

https://github.com/bluetg2001/firebase-hosting-guide