angular - 如何将 angular 4 通用应用程序部署到 firebase

Question

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

虽然我无法弄清楚这部分内容:

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

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

然后firebase部署dist目录。

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

dist-server 还是 dist?

Answer 1

这里有一个来自谷歌的关于这个主题的 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 中的服务器函数会将他们重定向到托管在 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，这意味着您的服务器函数始终可以找到正确的文件，而无需额外的逻辑。