Google Cloud Functions を Express で実装し Firebase Hosting の Angular から呼び出す

Cloud Functions の中身を Express に置き換え、カスタムドメインを設定した。

以前行った、Firebase Hosting 上の Angularから呼び出し同様、疎通を確認するところまで、いくつかハマりポイントがあったので、留意点をメモ。

1.Functions側の実装

以下留意点

https.onCall の仕様として、HTTP POSTメソッドでうける必要がある
ローカルからテスト呼び出しすると、CORSににひっかかるので、Access-Control-Allow･･･　ヘッダを指定する
応答のJSONの結果をdata フィールドに指定する

import * as functions from 'firebase-functions';
import * as express from 'express';

const app: express.Express = express();
app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

const router: express.Router = express.Router()
app.use(router);
router.post('/api/test', (req, res) => {
    res.json({'data':{'result':'ok'}});
});
export const apiService = functions.https.onRequest(app);

2.呼び出しAngular側の実装

httpsCallable にパスを指定できる

import { Injectable } from '@angular/core';
import { Observable, from } from 'rxjs';
import { AngularFireFunctions } from '@angular/fire/functions';

@Injectable({
  providedIn: 'root'
})
export class HogeService {
  apiFunc : any;
  constructor(
    private functions: AngularFireFunctions
  ) { 
    this.apiFunc = this.functions.httpsCallable('apiService/api/test');
  }

  async calc() {
    const obs = this.apiFunc() as Observable;
    let res = await obs.toPromise();
    console.log(res);
  }
}