Как развернуть угловое 4 универсальное приложение для Firebase

Question

С введением Angular 4 из Universal я не могу понять, как успешно развернуть приложение на хостинге Firebase. Я следовал за шагами здесь https://github.com/angular/angular-cli/wiki/stories-universal-rendering

Я не могу понять эту часть этого хотя:

"Созданный пакет имеет хэш в имени файла из веб-пакета. При развертывании этого файла на производственном сервере вам необходимо убедиться, что требуется правильный пакет, либо переименовав файл, либо передав имя пакета в качестве аргумента вашему серверу".

Обычно мы просто используем ng build --prod

Затем Firebase развернуть каталог dist.

С этим универсальным включением, какую папку я разверну в firebase?

dist-сервер или 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 будет перенаправлять их в файлы браузера и сервера, которые размещены в каталоге функций.

На самом деле нам нужно удалить файл index.html в папке dist/, чтобы 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"
  },

Если вы создаете серверное приложение (приложение 1) с аргументом --output-hashing=false, то на выходе всегда будет main.bundle, что означает, что ваша серверная функция всегда может найти правильный файл без дополнительной логики.