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

Question

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

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

Answer 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 文件，您的应用程序将在本地提供服务。信息将打印在屏幕上关于带有端口的本地主机 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 SSR 应用程序

[更新]

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

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

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

希望能帮助到你 ;)