1. daikiojm

    Posted

    daikiojm
Changes in title
+Firebase CLIで作成したTypeScriptのFirebase Cloud Functionsのプロジェクトをファイル分割
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,109 @@
+index.tsに記述した複数のFunctionを別ファイルに分割する方法です。
+特別なことはしていませんが、メモとして残しておきます。
+
+## 前提
+
+```
+$ firebase -V
+3.16.0
+```
+
+前提として、Firebase CLI(firebase-tools)にて次のように初期化したプロジェクトを前提に進めます。
+
+```
+$ mkdir firebase-functions && cd firebase-functions
+$ firebase init functions
+-- 略
+? Select a default Firebase project for this directory: [create a new project]
+-- 略
+? What language would you like to use to write Cloud Functions? TypeScript
+? Do you want to use TSLint to catch probable bugs and enforce style? Yes
+-- 略
+? Do you want to install dependencies with npm now? Yes
+```
+
+## ファイル分割しないパターン
+
+Firebase CLIを使ってCloud Functionsを使用するプロジェクトを初期化すると、`functions/src`以下に、`index.ts`が作成されます。
+同一のプロジェクトFunctionを追加する場合、次のようにこのファイルに追記していけば、`firebase deploy --only functions`実行時に複数Functionが同時にデプロイされます。
+
+```typescript:index.ts
+import * as functions from 'firebase-functions';
+
+export const helloWorld = functions.https.onRequest((request, response) => {
+ response.send("Hello World!");
+});
+
+export const helloFirebase = functions.https.onRequest((request, response) => {
+ response.send("Hello Firebase!");
+});
+
+export const helloTypeScript = functions.https.onRequest((request, response) => {
+ response.send("Hello TypeScript!");
+});
+```
+
+## ファイル分割する
+
+Functionが増えてきたときに辛いので、ファイル分割してみましょう。
+TypeScriptのビルド設定が記述されている`tsconfig.json`を見てみると、次のように`functions/src`以下が対象として指定されているので、何も考えずTypeScriptのモジュールシステムに従ってファイルをFunctionごとに分割していけばよさそうです。
+
+```typescript:tsconfig.json
+{
+ "compilerOptions": {
+ "lib": ["es6"],
+ "module": "commonjs",
+ "noImplicitReturns": true,
+ "outDir": "lib",
+ "sourceMap": true,
+ "target": "es6"
+ },
+ "compileOnSave": true,
+ "include": [
+ "src"
+ ]
+}
+```
+
+まずは、`functions/src`以下にFunctionごとのファイル`helloWorld.ts`、`helloFirebase.ts`、`helloTypeScript.ts`を作成します。
+
+```typescript:helloWorld.ts(例)
+import * as functions from 'firebase-functions';
+
+export const helloWorld = functions.https.onRequest((request, response) => {
+ response.send("Hello World!");
+});
+```
+
+index.ts側では次のようにimport/exportするだけです。
+
+```typescript:index.ts
+import { helloWorld } from './helloWorld';
+import { helloFirebase } from "./helloFirebase";
+import { helloTypeScript } from './helloTypeScript';
+
+export {
+ helloWorld,
+ helloFirebase,
+ helloTypeScript
+}
+```
+
+## デプロイについて
+
+プロジェクト内の全てのFunctionをデプロイする場合
+
+```
+$ firebase deploy --only functions
+```
+
+
+指定したFunctionのみをデプロイする場合(次の例ではhelloWorldのみをデプロイするように指定)
+
+```
+$ firebase deploy --only functions:helloWorld
+```
+
+## 参考
+
+https://firebase.google.com/docs/cli/?hl=ja#partial_deploys