ここで、このテーマに関するGoogleのユーチューブの動画があります:https://youtu.be/gxCu5TEmxXE
は基本的には、私の知る限り、現時点ではそこにあなたの「distの」フォルダを使用して機能のフォルダをリンクする方法はありませんので、どのようなfirebase.jsonの設定を上書きして、アプリを関数として提供する必要があります。
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"function": "ssrapp"
}
]
},
"functions": {
"predeploy": "npm --prefix functions run build",
"source": "functions"
}
}
:これは基本的に、あなたの関数は(expressJSコード)次のようにfirebase.jsonのあるべきユーチューブの動画を以下の後DIST/
にアプリではなく、静的なファイルを提供していることを意味します
次に、関数がアプリケーションをブートストラップできるように、distファイルを関数ディレクトリにコピーする必要があります。あなたの設定が正しい場合、人々があなたのURLをロードすると、/ functions内のサーバ機能は、それらをファンクションディレクトリでホストされているサーバファイル&ブラウザにリダイレクトします。
インデックス:
私たちは、実際にそのfirebaseが誤ってあなたがfirebase関数として設定しているサーバーを経由してトラフィックを再ルーティングするのではなく、このサービスを提供していないので、DIST /フォルダ内のindex.htmlファイルを削除する必要があります。 TS(機能フォルダ内のサーバー)
import * as functions from 'firebase-functions';
import * as angularUniversal from 'angular-universal-express-firebase';
export let ssrapp = angularUniversal.trigger({
\t index: __dirname + '/browser/index.html',
\t main: __dirname + '/server/main.bundle',
\t enableProdMode: true,
\t browserCacheExpiry: 1200,
\t cdnCacheExpiry: 600
});
よろしくハッシュ、基本的にあなたの角度-CLIは2つのアプリケーションを構築する必要がありますに関するご質問、通常1
「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"
}
}
],
当社/機能フォルダ内の関数は常にサーバー・バンドルにリンクする必要がありますので、私達はちょうど私たちは、サーバーアプリケーションをコンパイルするときに我々が行うことを確認する必要がありますハッシュなしで、これはあなたのパッケージ内でこれほど簡単です。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-ハッシュ引数で(アプリ1)= falseの場合、出力は常にそのサーバー機能ができることを意味し、main.bundleになります余分なロジックなしで常に正しいファイルを見つける。
必要なものは次のとおりです。https://medium.com/@cdeniz/angular-universal-on-firebase-dynamic-hosting-4fdd034af3db –