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

Question

通过引入Angular 4的universal，我无法成功地将应用程序部署到Firebase托管。 我遵循了这里的步骤：https://github.com/angular/angular-cli/wiki/stories-universal-rendering

但是我还是没弄懂其中的一个部分：

“生成的捆绑文件名中包含Webpack的哈希值。 在将其部署到生产服务器时，您需要确保所需的正确捆绑文件，可以通过重命名文件或将捆绑名称作为参数传递给服务器来实现。”

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

然后firebase部署dist目录。

有了这个全局包含，我应该将哪个文件夹部署到Firebase？

dist-server还是dist？

- LearnToday

---

这是您需要的内容：https://medium.com/@cdeniz/angular-universal-on-firebase-dynamic-hosting-4fdd034af3db - Devesh Jadon

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（位于functions文件夹中的服务器）

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，这意味着您的服务器函数可以始终找到正确的文件而无需额外的逻辑。

- ejb503