如何将 Angular 4 通用应用程序部署到 Firebase

Question

随着对 angular 4 的介绍，我无法弄清楚如何将应用程序成功部署到 firebase 托管。我按照这里的步骤 https://github.com/angular/angular-cli/wiki/stories-universal-rendering

但我无法弄清楚这部分：

“生成的包在来自 webpack 的文件名中有一个哈希值。将其部署到生产服务器时，您需要确保需要正确的包，方法是重命名文件或将包名称作为参数传递给您的服务器。”

通常我们只使用 ng build --prod

然后 firebase 部署 dist 目录。

有了这个通用包含，我应该将哪个文件夹部署到 firebase？

dist-server 还是 dist？

Answer 1

这里有来自 Google 的关于此主题的 youtube 视频：https://youtu.be/gxCu5TEmxXE

基本上，据我所知，目前无法将您的函数文件夹与您的“dist”文件夹链接，所以我们要做的是覆盖 firebase.json 设置以将您的应用程序作为函数提供.这基本上意味着您的函数（expressJS 代码）正在为应用程序而不是 dist/ 中的静态文件提供服务

观看 youtube 视频后，您的 firebase.json 应如下所示：

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "ssrapp"
      }
    ]
  },
  "functions": {
    "predeploy": "npm --prefix functions run build",
    "source": "functions"
  }
}

然后您必须将 dist 文件复制到您的函数目录中，以便该函数可以引导您的应用程序。如果您的设置正确，那么当人们加载您的 URL 时，/functions 中的服务器函数会将它们重定向到托管在函数目录中的浏览器和服务器文件。

我们实际上必须删除 dist/ 文件夹中的 index.html 文件，以便 firebase 不会意外地提供此服务，而不是通过您配置为 firebase 功能的服务器重新路由流量：

index.ts（函数文件夹中的服务器）

import * as functions from 'firebase-functions';
import * as angularUniversal from 'angular-universal-express-firebase';

export let ssrapp = angularUniversal.trigger({
	index: __dirname + '/browser/index.html',
	main: __dirname + '/server/main.bundle',
	enableProdMode: true,
	browserCacheExpiry: 1200,
	cdnCacheExpiry: 600
});

关于您关于散列的问题，基本上您的 angular-cli 应该构建 2 个应用程序，一个普通的应用程序和“SSR”服务器渲染的应用程序。示例配置在这里：

  "apps": [
    {
      "root": "src",
      "outDir": "dist/browser",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss",
        "trexco.scss"
      ],
      "scripts": [
        "../node_modules/moment/min/moment.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
      {
        "platform": "server",
        "root": "src",
        "outDir": "dist/server",
        "assets": [
          "assets",
          "favicon.ico"
        ],
        "index": "index.html",
        "main": "main.server.ts",
        "test": "test.ts",
        "tsconfig": "tsconfig.server.json",
        "testTsconfig": "tsconfig.spec.json",
        "prefix": "app",
        "styles": [
          "styles.scss",
          "trexco.scss"
        ],
        "scripts": [],
        "environmentSource": "environments/environment.ts",
        "environments": {
          "dev": "environments/environment.ts",
          "prod": "environments/environment.prod.ts"
        }
      }

  ],

因为我们 /functions 文件夹中的函数应该始终链接到服务器包，我们只需要确保在编译服务器应用程序时我们这样做没有哈希，这就像在你的 package.json 中一样简单

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
    "build:prerender": "npm run build:client-and-server-bundles && npm run webpack:server && npm run generate:prerender",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "generate:prerender": "cd dist && node prerender",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
    "serve:prerender": "cd dist/browser && http-server",
    "serve:ssr": "node dist/server"
  },

如果您使用参数 --output-hashing=false 构建服务器应用程序（应用程序 1），则输出将始终为 main.bundle，这意味着您的服务器函数始终可以找到正确的文件而无需额外的逻辑。