如何使用 Firebase 功能部署 Angular 9 通用应用程序

Posted 2023-03-07

【中文标题】如何使用 Firebase 功能部署 Angular 9 通用应用程序

【英文标题】：How to deploy Angular 9 universal app with firebase functions

【发布时间】：2020-06-11 21:50:38

【问题描述】：

我最近更新到最新的 Angular 版本 9 并创建了一个应用程序。 我使用以下命令使这个应用程序通用： ng 添加@nguniversal/express-engine 然后我使用以下方法构建应用程序： npm run build:s-s-r && npm run serve:s-s-r

现在创建了 dist 文件夹，其中包含浏览器和服务器文件夹，但是在 dist 根目录中没有创建 server.js 文件，并且当我使用 angular 9 构建应用程序时也没有创建 webpack 配置文件。 请告诉我如何将基于 Angular 9 通用构建的新应用程序部署到 Firebase 云功能和托管

【参考方案1】：

从 Angular 9 开始，您将拥有以下构建结构

 dist            
  ├── server            
  |    └── main.js and some other files like firebase analytics stuff       
  └── browser                
       └── index.html and all files for the broswer 

现在为了测试这个，你需要从你的项目根目录中给出以下命令

node dist/server

这将调用服务器文件夹中的 main.js 文件，您的应用程序将在本地提供服务。屏幕上将打印有关带有端口的 localhost url 的信息。

现在为了部署到 Firebase，请使用以下代码

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

const app = require(path.resolve(__dirname, "./dist/server/main")).app; // change the path according to your project structure
const myApp = functions.https.onRequest(app());

您将拥有一个 myApp 函数，您可以在其中访问您的 Angular s-s-r 应用程序

[更新]

没有固定的初始化函数的地方。重要的是dist/server/main 的路径在 myApp 函数中是正确的

我忘了提到的另一件事是您必须将您的 package.json 托管字段更新为以下配置 =>

  ...
  "hosting": [
        "target": "app",
        "public": "/dist/browser", // change it according to your directory structure
        "rewrites": [
            "source": "**",
            "function": "myApp"
        ]
  ]
  ...

希望对你有帮助；）

【讨论】：

不适合我，我设法同时部署了托管和函数，但函数一次又一次地运行而没有结束，每次都以超时结果结束。你能解释一下吗？

我遇到过这个问题。我需要查看您的 main.server.ts 文件并告诉您是否可以使用 node dist/server 运行本地 s-s-r

并为构建和运行您的 s-s-r 提供此命令 => ng build --prod --project=your project name remove the curley braces as well && ng run again your project name:server:production && node dist/server/main.js。我要求你这样做的原因是因为我在同一个目录中有多个项目，当我添加新项目时，我的 package.json 被搞砸了，只构建了我最新的应用程序而不是旧的应用程序，所以如果你也有多个项目使用命令。此外，告诉我您的构建目录结构是否与我在答案中显示的相同

感谢您的回答。我应该把这个函数放在哪里？

ng deploy - 全新 - github.com/angular/angularfire/blob/master/docs/deploy/…