3

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

我无法弄清楚它的这一部分：

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

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

然后 firebase 部署 dist 目录。

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

dist-server 还是 dist？

4

1 回答 1

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 中的服务器函数会将它们重定向到托管在函数目录中的浏览器和服务器文件。

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

于 2017-12-22T12:48:15.520 回答