[입문] window 환경에서 firebase 설치 및 초기 세팅, github을 이용해서 react 웹프로젝트를 배포하는 법

사전 작업

1. firebase project 페이지에서 api 관련 키를 전부 복사한다.

가려져있는 firebase config 내용 전부 복사하기!

2. 콘솔에 npm i --save firebase를 입력해 firebase 설치 ( 최신 버전으로는 node.js가 14ver 이상 설치되어 있어야 함)

npm i --save firebase

 

3. react 프로젝트 내의 src에 firebase.js를 추가해 아래와 같이 입력한다.

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATA_BASEURL,
    projectId: process.env.REACT_APP_FIREBASE_PROJECTID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGEBUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGINGSENDERID,
    appId: process.env.REACT_APP_FIREBASE_APPID,
    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENTID
    // 인증키 
};

export default firebase.initializeApp(firebaseConfig);

 

4. env 파일을 프로젝트 root 경로 내에 생성한 뒤 아래와 같이 REACT_APP_의 접두사를 가진 변수들을 생성하고 1번에서 복사한 키들을 넣어준다.

위와 같이 환경변수의 맨 앞에 REACT_APP_를 입력해주어야 리액트가 인식해줄 수 있다.

 

 

firebase-tools를 이용해 프로젝트와 연동하는 법

1. 콘솔에서 npm을 이용해서 firebase-tools 설치 ( 최신 버전으로는 node.js가 14ver 이상 설치되어 있어야 함)

npm install -g firebase-tools
firebase login // 처음에만 로그인을 해야 함

 

2. tools가 설치가 완료되었다면 로그인 후 초기화

firebase init

자라란🔥 FIREBASE라고 문구가 뜬다

 

3. firebase hosting 세팅, github으로 ci/cd 할 수 있도록 설정(이 부분은 아래 블로거분의 포스팅대로 참고했다. 감사합니다,,,^^)

https://hyesunzzang.tistory.com/226

Firebase hosting with Github actions

***********************************************************************
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: (Use arrow keys)
❯ Use an existing project 
  Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project 



? Select a default Firebase project for this directory: (Use arrow keys)
❯ 내 firebase project 리스트중에 사용할 project 선택
*********************필수!!!!!!!!!!!!!!!!!!****************************


? Set up the workflow to run a build script before every deploy? Yes
? What script should be run before every deploy? (npm ci && npm run build) npm run build
? Set up automatic deployment to your site's live channel when a PR is merged? Yes
? What is the name of the GitHub branch associated with your site's live channel? master
i  Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App:
...
i  Action required: Push any new workflow file(s) to your repo

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

+  Firebase initialization complete!

-- 필자는 위와 같이 설정해주었다.

필수 내용 제대로 입력 안 해주면 추후에 firebase use --add 후에 프로젝트 선택을 꼭 해주자! 안 해주면 백엔드 연동이 안 되어서 아래와 같은 에러가 뜰 수도 있다.(필자는 추후에 확인해보니 이 이유로 인해 아래의 에러가 뜬 건 아니었지만, 종종 이 문제때문에 에러가 생기는 경우가 있다고 한다.)

@firebase/firestore: Firestore (9.6.1): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=permission-denied]: Permission denied on resource project

 

4. 이제 소스를 수정해준 뒤에 Git으로 Commit + push를 하고 Git repository에서 action 탭 내에 workflow를 확인하면 아래와 같이 배포 상태를 체크할 수 있다.

 

5. 또는 npm run build 후 firebase deploy 명령어를 콘솔에 입력하면 바로 배포되기도 한다.

* firebase serve 명령어를 입력하면 배포 전 로컬에서 호스팅되는 URL으로 프로젝트를 테스트할 수 있다.