React에서 firebase 프로젝트 배포하기
리액트 프로젝트에서 Firebase를 이용하여 배포하는 방법입니다.
1. firebase-tools 설치
먼저 npm을 이용해서 firebase-tools를 설치해줍니다.
npm install -g firebase-tools
이후 로그인을 진행합니다.
firebase login
2. Firebase 설정
firebase 초기 설정을 진행해줍니다.
firebase init
이 글에서는 Firestore, Storage, Hosting 항목을 선택 후 진행했습니다.
Firestore: Configure security rules and indexes files for Firestore
Storage: Configure a security rules file for Cloud Storage
Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
firestore.rules, firestore.indexes.json, storage.rules는 설정할 때, 파일 이름을 변경할 필요가 없으면 엔터를 누르며 진행하면 됩니다.
What do you want to use as your public directory?
-> 배포할 디렉토리 설정입니다. build로 입력하면 됩니다.
Configure as a single-page app (rewrite all urls to /index.html)?
-> Yes를 선택해야 리액트 라우터가 작동합니다.
아래는 깃허브 배포 자동화 관련 설정입니다.
Set up automatic builds and deploys with GitHub?
Yes
For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)
-> 유저이름/레포지토리이름
Set up the workflow to run a build script before every deploy?
Yes
What script should be run before every deploy?
엔터
Set up automatic deployment to your site's live channel when a PR is merged?
Yes
3. 배포하기
package.json로 들어가서 build, deploy 스크립트를 수정합니다.
CI=false 명령어를 입력하면 CI 도구의 설정을 무시하고 로컬 환경과 유사하게 빌드를 할 수 있어서 Github에서의 배포 에러를 방지할 수 있습니다. (대부분의 CI 서버들은 리액트의 warnings도 에러로 간주하여 빌드가 실패합니다.)
"scripts": {
"build": "CI=false && react-scripts build",
"deploy": "npm run build && firebase deploy"
},
이제 npm run deploy를 입력하거나, 메인 브랜치에 push 또는 merge가 되면 자동으로 배포가 진행됩니다.