FireBase

기본적 사용 가능 목록 및 가격책정

• Cloud Firestore의 경우 총 1GB까지 무료로 사용이 가능합니다.
• Cloud Functions
  • 서버리스 개념으로 서버를 구축하지 않아도 돌아가는 기능입니다.(서버를 구축하는 것처럼 보일 수 있습니다.)
  • 카드등록을 해서 유료버전으로 바꾸어놔야 사용이 가능합니다.
• Hosting
  • hosting을 지원합니다. (넷니파이에 프로젝트를 올리는 개념)

실습

프론트엔드 코드에 파이어베이스를 붙이는 개념으로 이해하는 것이 적합합니다.

1. firebase에서 프로젝트 시작

• 프로젝트 추가를 합니다. 여기서의 이름은 보여지는 이름입니다.
• 체크된 내용의 경우 프로젝트의 고유한 id입니다.
• 구글애널리틱스: 연습용인 만큼 구글애널리틱스를 끄고 사용을 하겠습니다.

2. 프론트엔드 프로젝트 시작

타입스크립트 + vite

$ npm create vite@latest kdt-firebase-test
$ cd kdt-firebase-test
$ code . -r
$ npm i
$ npm i -D eslint eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser
$ npm i -D @types/node

.eslintrc.json

{
  "env": {
    "browser": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-recommended"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "@typescript-eslint/parser",
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "rules": {
    "semi": ["error", "never"],
    "quotes": ["error", "single"],
    "eol-last": ["error", "always"],

    "vue/html-closing-bracket-newline": ["error", {
      "singleline": "never",
      "multiline": "never"
    }],
    "vue/html-self-closing": ["error", {
      "html": {
        "void": "always",
        "normal": "never",
        "component": "always"
      },
      "svg": "always",
      "math": "always"
    }],
    "vue/comment-directive": "off",
    "vue/multi-word-component-names": "off",
    "vue/no-v-html": "off"
  }
}

vite.config.ts 경로별칭 추가

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      {find: '~', replacement: `${__dirname}/src`}
    ]
  }
})

tesconfig.json 경로별칭 연결

{
  "compilerOptions": {
...
    "baseUrl": "./", ✅
    "paths": {
      "~/*": ["./src/*"] ✅
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

ES모듈방식

import {fileURLToPath, URL} from 'url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '~': fileURLToPath(new URL("./src", import.meta.url))
    }
  }
})

3. 🐥firebase설치

$ npm i -D firebase-tools

4. firebase 세팅

package.json

"scripts": {
  "fb:login": "firebase login", //로그인
  "fb:logout": "firebase logout", //로그아웃
  "fb:init":"firebase init", //초기화
  "fb:emuls": "firebase emulators:start", //emuls : 로컬에서돌리는 가상머진
  "fb:deploy": "firebase deplay" //배포
}

5. firebase 로그인

$ npm run fb:login

> Allow Firebase to collect CLI usage and error reporting information? (Y/n) =>n

브라우저 창이 열리면 로그인을 해주시면 됩니다.

6. 데이터베이스 만들기

• 프로젝트 - build- Firestore Database - 데이터베이스만들기
• 테스트모드에서 시작
• asia-northeast3(서울) 선택후 사용설정

7. Spark버전을 Blaze로 업그레이드

• 업그레이드에서 카드 등록 후 사용이 가능합니다.

8. 프로젝트 초기화

$ npm run fb:init

• 대부분 기본값 Enter (전부선택 : ctrl + 스페이스)
• Use an existing project
• 프로젝트 선택
• aia0southheast1
• database.rules.json
• No
• fiterstore.ules
• firestore.indexes.json
• TypeScript
• Y
• Y
• ⭐public 폴더 주의 = vite 는 dist
• ⭐single-page app (rewrite all urls to /index.html)? (y/N) y
• ⭐Set up automatic builds and deploys with GitHub? (y/N) y
• For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) > 깃허브 풀주소를 넣어줍니다(ex: heropy/KDT-test)
• Set up the workflow to run a build script before every deploy? (y/N)
  (github의 actions기능을 쓸건지를 확인하는 것입니다. 이기능을 하면 깃허브가 업데이트되면 자동으로 갱신됩니다.)
• 나머지는 대체로 Enter

9. 타입스크립트 파일 변환

• 터미널을 하나 더 만들어 functions로 이동해줍니다.

$ cd functions
$ npm run build // npm run build:watch를 해서 계속해서 변화해도 좋습니다.

에러발생

• error TS6133: "functions" is declared but its value is never read.
• src > index.ts에서 import를 해온 것을 사용하지 않아서 발생하는 문제로 임의로 주석처리를 한 후 conosle.log('hello')를 적고(빈코드 방지) 다시 실행해줍니다.

console.log('Hello World')
export {}

10. 타입스크립트의 구성파일 경로 설정 및 eslintrc구성

functions > .eslintrc.json

module.exports = {
  root: true,
  env: {
    es6: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',//✅옵션's 규칙을 두가지로 줄여줍니다.
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: ['tsconfig.json', 'tsconfig.dev.json'],
    sourceType: 'module',
    tsconfigRootDir: __dirname,//✅현재 파일을 기준으로 파일을 찾을 수 있도록 설정해줍니다.
  },
  },
  ignorePatterns: [
    '/lib/**/*', // Ignore built files.
  ],
  plugins: ['@typescript-eslint', 'import'],
  rules: { //✅이하 설정
    'semi': ['error', 'never'], 
    'quotes': ['error', 'single'],
    'eol-last': ['error', 'always'],
  },
}

• extends의 옵션을 위와 같이 필요한 것만 남기고 지워줍니다.

9. npm run fb:emuls

$ npm run fb:emuls

localhost:4000에 접근을 하면 아래와 같이 firebase구조를 확인할 수 있습니다. (인증관련, firebase DB관련, 실시간 DB 등)

우리는 대표적으로 firestore emulator을 쓸 예정입니다.

빌드된 결과 호스팅

$ npm run build
$ npm run fb:emuls

빌드 후 다시 emuls를 돌린 후 localhost:4000에서 Hosting emulator에서 빌드된 결과 확인할 수 있습니다. 이 페이지는 실제 배포 했을 때 나오는 페이지를 볼 수 있습니다.

참고
만약, 껐다키는 사이에 포트가 사용되고 있는 것이 종료되지 않는 경우도 있습니다. 이경우 아래 명령어로 직접 끌 수 있습니다.

$ sudo lsof -i :8085
$ sudo kill -TERM [확인된 PID]