기본적 사용 가능 목록 및 가격책정
- Cloud Firestore의 경우 총 1GB까지 무료로 사용이 가능합니다.
- Cloud Functions
- 서버리스 개념으로 서버를 구축하지 않아도 돌아가는 기능입니다.(서버를 구축하는 것처럼 보일 수 있습니다.)
- 카드등록을 해서 유료버전으로 바꾸어놔야 사용이 가능합니다.
- Hosting
- hosting을 지원합니다. (넷니파이에 프로젝트를 올리는 개념)
프론트엔드 코드에 파이어베이스를 붙이는 개념으로 이해하는 것이 적합합니다.
타입스크립트 + 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
{
"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"
}
}
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`}
]
}
})
{
"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))
}
}
})
$ npm i -D firebase-tools
"scripts": {
"fb:login": "firebase login", //로그인
"fb:logout": "firebase logout", //로그아웃
"fb:init":"firebase init", //초기화
"fb:emuls": "firebase emulators:start", //emuls : 로컬에서돌리는 가상머진
"fb:deploy": "firebase deplay" //배포
}
$ npm run fb:login
> Allow Firebase to collect CLI usage and error reporting information? (Y/n) =>n
브라우저 창이 열리면 로그인을 해주시면 됩니다.
$ npm run fb:init
$ cd functions
$ npm run build // npm run build:watch를 해서 계속해서 변화해도 좋습니다.
에러발생
console.log('Hello World')
export {}
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
의 옵션을 위와 같이 필요한 것만 남기고 지워줍니다.$ 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]