如何从 Angular 项目部署新的 Firebase 功能答案

【问题标题】：How to deploy new firebase functions from an angular project如何从 Angular 项目部署新的 Firebase 功能
【发布时间】：2021-01-16 20:51:54
【问题描述】：

我有一个使用 SSR 的 Angular 项目。它在 firebase 中作为一个函数托管。

我也想在此处保留一些与项目相关的 firebase 功能。

我在我的项目中为此创建了一个新文件夹myproject/backend/functions。
我将 cli 导航到 myproject/backend/functions 文件夹
我跑firebase init firestore

但是，firebase cli 会在项目的根文件夹中检测到 firebase 设置； myproject。它会继续修改该文件。

我应该如何在我的 Angular 项目中初始化一个文件夹，以便从我的项目中部署一些 firebase 功能，同时保留我的 SSR？

我正在尝试实现与文档类似的情况：https://firebase.google.com/docs/functions/get-started

【问题讨论】：

你是如何设置 Angular 在函数中使用 SSR 运行的？
在您的代码中，您应该有一个函数的导出，以便 Firebase 函数可以调用它，为什么不在那里添加更多导出？
@Abkarino 我使用ng add @nguniversal/express-engine 创建了一个 SSR 项目。您可以假设官方文档中的设置：angular.io/guide/universal
@Abkarino 主要原因是我不想不必要地将角度代码与云函数代码混合在一起。分离 firebase 函数可以让我更好地组织代码并更快地阅读和更新它。其次，我看不到如何部署从 express 中监听 firestore 事件的函数，因为这与路由无关。最后，我并不总是想在我的项目中部署所有功能。
@Abkarino 在 angular 文件夹之外创建文件夹，然后移动它对我有用。到目前为止，我没有看到任何意想不到的副作用。留下一个正式的答案，我会在赏金期结束时接受它，除非出现更好的答案。

标签： angular firebase

【解决方案1】：

Firebase Functions 支持使用网络框架。官方文档提供了在函数中使用Express处理http请求的示例。

const functions = require('firebase-functions');
const express = require('express');
const app = express();

app.get('/api', (req, res) => {
  const date = new Date();
  const hours = (date.getHours() % 12) + 1;  // London is UTC + 1hr;
  res.json({bongs: 'BONG '.repeat(hours)});
});

exports.app = functions.https.onRequest(app);

因此，添加功能的一种方法是在应用导出后添加它们。

exports.helloWatcher =  functions.database.ref('/hello').onWrite(...)

或者在打字稿的情况下

export let helloWatcher =  functions.database.ref('/hello').onWrite(...)

OP 希望在 Angular SSR 项目和其他功能之间进行一些分离。问题是他无法在另一个内部初始化 firebase 函数，因为它检测到父 firebase 配置。

所以建议的解决方案是在外部文件夹中执行init，这样firebase 将创建必要的文件。然后将文件夹移动到原始 firebase 文件夹中。由于 firebase 会尝试查找配置文件，它会在找到的第一级停止，因此不会检查配置是否已经嵌套。

【讨论】：

我使用第二种方法在别处初始化文件夹，然后移动它。
我无法在我的 Angular 项目中找到导出。除了server.ts 文件中导出的app()，它可能会作为firebase 函数导出到其他地方。我无法跟踪将 app() 移动到 firebase 函数的代码所在的位置。它可能在某个图书馆内。这样就放弃了答案的第一部分作为一个选项。
@RobMonhemius youtube.com/watch?v=gxCu5TEmxXE 这个网址显示了如何启动项目，您可能也这样做了。我没有分享这个网址，因为你已经初始化了你的项目，但也许你想看看那个视频。