PaPaPointアプリ【CloudFunctions設定編】

2020/11/05

今日はCloud Functionsの設定を進めていきます。
今日も今日とてりあクト!を参考にやっていきます。
ちなみにりあクト!シリーズはReactの入りとしてはとてもおすすめ(まだ全部よんでないけど)なのでReactやってみたいって人はぜひ購入の検討を。
サンプルだけでも結構読めるからまずは呼んでみるのもいいと思います。

Cloud Function設定

1. functionsディレクトリのpackage.jsonで使用するnodeのバージョンを指定する

"engines": {
  "node": "10" // Firebase推奨ver かつ りあクトと同様のverとなる node 10.17.0 を使用
},

2. パッケージのインストール

$ yarn

3. TypeScriptの設定

{
  "compilerOptions": {
    "esModuleInterop": true,
    "lib": ["dom", "ESNext"],
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "outDir": "lib",
    "removeComments": true,
    "resolveJsonModule": true,
    "rootDir": "src",
    "sourceMap": true,
    "strict": true,
    "target": "es2017",
    "types": ["jest", "node"],
    "typeRoots": ["node_modules/@types", "../node_modules/@types"]
  },
  "compileOnSave": true,
  "include": [
    "src"
  ],
  "exclude": ["node_modules"]
}

4. テスト実行環境の用意

$ yarn add -D jest ts-jest @types/jest

5. Lint&Prettierの設定

$ yarn add -D eslint prettier
$ yarn add -D eslint-plugin-import eslint-plugin-jest eslint-plugin-prefer-arrow eslint-plugin-prettier eslint-config-prettier eslint-config-airbnb-base
$ yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
$ typesync
$ yarn

ESLintの設定ファイル.eslintrc.jsと.eslintignoreはこちらのものを使用する。

6. package.jsonにScriptとテストの設定を追加する

{
  "name": "functions",
  "scripts": {
    "lint": "eslint \"src/**/*\"",
    "build": "npm run lint && tsc",
    "serve": "npm run build && firebase emulators:start --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "npm run shell",
    "test": "jest",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "10"
  },
  "main": "lib/index.js",
  "dependencies": {
    "firebase-admin": "^9.2.0",
    "firebase-functions": "^3.11.0"
  },
  "devDependencies": {
    // 略
  },
  "private": true,
  "jest": {
    "preset": "ts-jest",
    "testRegex": "(/__tests__/.*|\\.(test|spec)\\.(ts?|js?)$",
    "moduleFileExtensions": ["ts", "json", "js"]
  }
}

まとめ

設定はこれでひとまずいいはず。
Cloud Functionsの設定というよりfunctionsディレクトリの設定といったほうが正しいですかね。

ここ数日時間の使い方が下手すぎて勉強し始めるのが遅い時間になりがち。
ねむーいzzZ
勉強はスッキリした頭で進めるべきですね。

それではまた明日。