Firebase Hosting 설정하기

1. 호스팅 설정

파이어베이스에서 성공적으로 프로젝트를 만들었다면 왼쪽 탭에서 hosting을 눌러서 들어간다.

2. 프로젝트 세팅

시작하기를 누르면 다음과 같은 화면이 나온다.
터미널에서 프로젝트를 작업한 폴더로 들어가서 제시되는 순서대로 명령어를 입력하면 된다.

2-1 필요 패키지 설치

npm or yarn 원하는 것으로 설치

npm i -g firebase-tools
yarn add global firebase-tools

2-2 로그인

npm firebase login
yarn firebase login

에러 리포팅 관련이니까 아무거나 해도 된다. 모르면 n

브라우저가 열리면서 로그인을 한다.
이미 로그인 되어 있는 상태라면 Already logged in as ****@gmail.com 가 출력되면서 아무 창도 열리지 않는다. 정상이니까 안심해도 됨.

다시 터미널로 돌아가서 진행

2-2 프로젝트 firebase 설정 초기화

yarn firebase init

Which Firebase features do you want to set up for this directory?

화살표키로 이동해서 Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys 에서 스페이스바로 선택, 엔터키로 다음단계 진행

Please select an option

첫번째 포스팅에서 파이어베이스에 이미 프로젝트를 생성했으니 Use an existing project 로 이동해서 엔터.

Select a default Firebase project for this directory

파이어베이스 콘솔에서 생성했던 프로젝트 이름으로 이동해서 엔터

What do you want to use as your public directory?

어떤 폴더로 호스팅할지 지정해준다. build 입력하고 엔터

Configure as a single-page app?

리액트 프로젝트라면 y
App.js 에 모든 페이지 라우팅 정보가 정의되어있다면 SPA. 모든 페이지가 빌드된 index.html 위에서 구현된다. 경로별로 다른 html 파일을 사용한다면 N을 선택해야 할 듯.

Set up automatic builds and deploys with Github?

이 시리즈에서는 Github Actions를 이용해 자동 배포 할 것이기 때문에 y
자동 배포가 아니라면 그냥 n 한 다음 yarn build 이후에 yarn firebase deploy 하면 배포가 끝난다.

브라우저가 열리면서 github 로그인을 한다.

For which Github repository would you like to set up a Github workflow?
Github에 올린 자동배포할 repository 경로를 적는다.
ex) imhjnoh/firebase_ci_test

Set up the workflow to run a build script before every deploy?
배포 전에 빌드에 대한 명령어를 작성하겠냐고 물어보는 질문이다. y

What script should be run before every deploy?
어떤 명령어로 빌드할지 작성해준다.

npm ci && npm run build
yarn install && yarn build

Set up automatic deployment to your site's live channel when a PR is merged?
What is the name of the Github branch associated with your site's live channel?
첫번째는 PR이 merge 되었을 경우 자동배포 하겠냐는 질문. y
두번째는 배포될 브랜치의 이름. 브랜치를 따로 사용하지 않는 경우 기본값 master 그대로 엔터하면 된다.

2-3 초기화 완료!

이제 푸쉬만 하면 바로 배포된다.