파이어베이스란?
파이어베이스는 구글(GOOGLE)이 소유하고 있는 모바일 애플리케이션 개발 플랫폼으로, 이걸 활용하면 여러분도 앱을 개발하고, 개선하고, 키워나갈 수 있다.
파이어 베이스는 기본적으로 구글 클라우드 플랫폼을 기반으로 동작한다.
파이어베이스 프로젝트 생성
https://console.firebase.google.com/u/0/
1. 파이어베이트 사이트 가입해서 콘솔로 이동해서 프로젝트 추가하기
만들어진 파이어베이스 프로젝트는 로컬에 있는 코드랑 연결한다. 파이어베이스는 서비스 덩어리이다. 파이어베이스 안에 코드를 심는 개념보다 우리가 기존에 관리하고 있는 프론트엔드 코드에 파이어베이스를 붙이는 개념으로 이해하는 것이 적합하다.
2. 파이어베이스 프로젝트 - 빌드 - 데이터베이스 만들기 - 테스트 모드에서 시작 - 위치 설정: asia-northeast3(서울)
3. 생성된 데이터베이스 요금제 업그레이드(Blaze 요금제)
파이어베이스 구성
기존 프로젝트(vite 환경)에 파이어베이스 도입
// package.json
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview",
"fb:login": "firebase login",
"fb:logout": "firebase logout",
"fb:init": "firebase init",
"fb:emuls": "firebase emulators:start --import=./exports --export-on-exit",
"fb:deploy": "firebase deploy"
},총 5가지 스크립트 입력(로그인, 로그아웃, 초기화, 로컬에서 돌리는 가상머신, 배포)
$ npm run fb:login
$ npm run fb:init
// Project Setup
- use an existing project
- 파이어 베이스 저장소 선택
- database.rules.json
- No
// Firestore Setup
- firestore.rules
- firestore.indexes.json
- No
// Functions Setup
- TypeScript
- ESLint -> Yes
- Overwrite? -> NO
// Hosting Setup
- public directory -> dist
- Yes
- GitHub -> Yes
- Overwrite? -> NO
// 깃헙 저장소 이름 입력
? Set up the workflow to run a build script before every deploy? -> Yes
- npm ci $$ npm run build
- PR is merged -> Yes
- main
// Storage Setup
- storage.rules
// Emulators Setup
- 전부 선택(가상 환경)
- 포트 번호 기본 값 사용
- Emulator UI -> Yes
- Emulator download -> Yes? Set up the workflow to run a build script before every deploy? -> Yes깃헙 저장소에는 Actions의 기능을 사용할건데, 이 기능을 통해서 메인 브랜치에 최신 버전을 업로드 하면 Actions의 기능을 통해서 파이어베이스로 배포가 가능하다.
$ npm run fb:emuls- JAVA 관련 에러가 나오면 JAVA언어를 설치해준다.
- 포트 번호 에러: 포트 변경 중복으로 에러나는 경우가 많다 포트번호를 firebase.json 파일에서 수정후 다시 돌린다.
- reading functions/package.json 에러: 타입스크립트로 만들어서 생기는 에러이다.(변환 과정 에러)
functions 폴더의 package.json 파일의 main 옵션을 보면 lib라는 폴더에 index.js파일이 이 functions의 기준 폴더라고 명시되어있지만 현재 폴더에서는 존재하지 않음. 이는 타입스크립트로 구성했기 때문이다.
해결 방법: 터미널을 하나 더 생성 후 해서 functions 폴더에 접근한다.
$ cd functions
$ npm run buildfunctions 폴더 전체가 하나의 npm 프로젝트(서버 코드)
빌드 돌리면 lib 폴더가 생긴다.
parsing error : functions 폴더 내에서 읽지 않고 바깥 폴더에서 tsconfig.dev.json 파일을 찾아서 생기는 오류
.eslintrc.js 파일에 tsconfig.dev.json 파일은
__dirname (경로는 현재파일을 기준으로 한다.)에러를 수정한 뒤에
$ npm run fb:emuls하면 localhost:4000으로 서버가 열린다.
