在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（here）的Angular课程的“问答”部分。我尝试了一下，并进行了一些修改使其得以工作。

因此，首先通过运行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
```
...，使用空格键选择两者，然后按Enter。
“为此目录选择默认的Firebase项目吗？”
使用箭头键选择一个，然后按Enter。
“您想使用哪种语言编写Cloud Functions？”
用箭头键选择TypeScript，然后按ENTER。
“您要使用TSLint吗？”
键入y并按ENTER。
“您现在要使用npm安装依赖项吗？”
键入y并按ENTER。
“您想使用什么作为公用目录？”
键入dist/browser并按ENTER（请注意：这与部署不具有Universal的应用程序不同！）。]
“配置为单页应用程序吗？”

键入y并按ENTER。

File 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重建应用程序。
使用终端移动到功能文件夹：cd functions
安装用于文件系统访问的npm软件包：npm i fs-extra
在[[functions

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) });

此

fixes

初始页面未作为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);
在终端中，请确保您位于
functions >>目录中，然后运行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），然后将在
functions
文件夹中运行npm run build（这样它将把项目的dist文件夹复制到您的functions] > dist文件夹，将删除项目的index.html文件。
部署您的应用程序...
您可以在部署前通过运行firebase serve（如果需要）在
localhost：5000
上在本地提供应用程序。停止服务器（Ctrl + C）。

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

通过这种方式，我设法在Firebase上部署了Angular SSR应用程序。

希望这有帮助...

在Firebase上部署Angular 8 Universal（SSR）应用程序

问题描述投票：0回答：1

1个回答

最新问题

在Firebase上部署Angular 8 Universal（SSR）应用程序

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1