angular - 在Firebase上部署Angular 8 Universal(SSR)应用程序

Question

我最近将Angular 8应用程序升级为通用应用程序(SSR)。在将它作为SSR应用程序之前，我已经将其部署到Firebase，但是后来我发现，使用常规Firebase托管无法在Firebase上部署SSR应用程序。我做了一些研究，发现我必须使用Firebase Cloud Functions。

我使用以下方法创建了一个SSR应用程序:

ng add @nguniversal/express-engine --clientProject PROJECT_NAME

PROJECT_NAME可以在 angular.json部分下面的 "projects"文件中找到。

谁能帮我这个？

Answer 1

重要说明:此解决方案来自于Udemy的Angular课程(here)的“问答”部分。我尝试了一下，并进行了一些修改使其得以工作。

因此，首先通过运行npm run build:ssr和npm run serve:ssr来确保SSR确实起作用。

然后安装Firebase Tools并初始化项目:

如果您之前尚未安装Firebase命令行工具，请运行npm install -g firebase-tools

运行firebase login，如果需要，提供您的Firebase凭证(电子邮件/密码)。

运行firebase init

回答一些问题...

“您准备好进行了吗？”

键入y并按Enter。

“您要设置哪些firebase CLI功能？”

选择...

(*) Functions

(*) Hosting

...，同时使用SPACE键选择它们，然后按Enter。

“为此目录选择默认的Firebase项目吗？”

用箭头键选择一个，然后按Enter。

“您想使用哪种语言编写Cloud Functions？”

使用箭头键选择TypeScript，然后按Enter。

“您要使用TSLint吗？”

键入y并按Enter。

“您现在要使用npm安装依赖项吗？”

键入y并按Enter。

“您要用作公用目录吗？”

键入dist/browser并按Enter(请注意:这与部署不带Universal的应用程序不同!)。

“配置为单页应用程序吗？”

键入y并按Enter。

文件index.html已经存在。覆盖？

键入n(重要!)，然后按Enter。

修改一些文件...

在 firebase.json中将"destination": "/index.html"替换为"function": "ssr"
(ssr指向此export const ssr = functions.https.onRequest(universal);变量，您将在下面找到它)。

在 server.ts中，将export添加到app初始化中:export const app = express();代替const app = express();

在 server.ts中，注释掉最后三行(app.listen(...))或将其替换为:

    // If we're not in the Cloud Functions environment, spin up a Node server
    if (!process.env.FUNCTION_NAME) {
        // Start up the Node server
        app.listen(PORT, () => {
            console.log(`Node Express server listening on http://localhost:${PORT}`);
        });
    }

您可以在部署到Firebase时将其删除，但在运行 npm run serve:ssr时需要它们，以便能够在 localhost上托管您的应用程序。

在 webpack.server.config.js中修改output，如下所示:

    output: {
        // Puts the output at the root of the dist folder
        path: path.join(__dirname, 'dist'),
        // Export a UMD of the webpacked server.ts & dependencies for rendering in Cloud Functions
        library: 'app',
        libraryTarget: 'umd',
        filename: '[name].js',
    },

并像这样修改 externals:

    externals: [
        // Firebase has some troubles being webpacked when it's in the Node environment, so we will skip it.
        /^firebase/
    ],

这将修复错误:

找不到模块'require(“./ server / main”)'

运行 npm run serve:ssr或 firebase serve命令时。

通过运行npm run build:ssr重建应用程序。

使用终端移至functions文件夹:cd functions

安装用于文件系统访问的npm软件包:npm i fs-extra

在函数文件夹中，创建一个名为 copy-angular-app.js 的新文件，其内容为:

    const fs = require('fs-extra');
    fs.copy('../dist', './dist').then(() => {
        // We should remove the original "index.html" since Firebase will use it when SSR is enabled (instead of calling SSR functions),
        // and because of that, SSR won't work for the initial page.
        fs.remove('../dist/browser/index.html').catch(e => console.error('REMOVE ERROR: ', e));
    }).catch(err => {
        console.error('COPY ERROR: ', err)
    });

这可以修复未作为SSR加载的初始页面(而不是显示初始页面的内容，而是仍显示 <app-root></app-root>)。

注意:由于我们删除了 index.html文件，因此除非您首先重建应用程序(通过运行 npm run serve:ssr->这将重新创建 npm run build:ssr文件)，否则运行 index.html将无法工作。

在 functions / package.json中(不在项目的package.json中!)更改构建条目，如下所示:

"build": "node copy-angular-app && tsc",

在 functions / src / index.ts中，用以下内容替换内容:

    import * as functions from 'firebase-functions';

    const universal = require(`${process.cwd()}/dist/server`).app;
    export const ssr = functions.https.onRequest(universal);

在终端中，确保您位于函数目录中，然后在其中运行npm run build将dist文件夹复制到functions文件夹中。

附加说明:为了简化Firebase的构建，您可以在主项目的 package.json文件中创建脚本:

    "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server", // this one should already exist
    "build:ssr-firebase": "npm run build:ssr && npm --prefix functions/ run build",

该脚本将首先构建您的Angular SSR应用程序( npm run build:ssr)，然后将在 函数文件夹中运行 npm run build(这样，它将把项目的 dist文件夹复制到您的 函数 dist文件夹，并删除项目的 index.html文件)。

部署您的应用程序...

您可以在部署之前通过运行firebase serve在 localhost:5000 上为本地应用提供服务。

停止服务器(Ctrl + C)。

然后，您可以通过运行firebase deploy来部署应用程序，并通过终端中显示的URL对其进行访问。

这样，我设法在Firebase上部署了Angular SSR应用程序。

希望这可以帮助...