2017-08-15 14 views
2

普遍的な角度4を紹介して、ファイヤーベースのホスティングにアプリをうまく展開する方法を理解できません。ファイヤーベースに角度4のユニバーサルアプリを配備する方法

「を生産バンドルはWebPACKのからファイル名にハッシュを持って本番サーバーにこれを展開する場合、あなたは以下となります。私は、私もそれのこの部分を把握することはできません

https://github.com/angular/angular-cli/wiki/stories-universal-rendering こちらの手順に従っファイルの名前を変更するか、またはバンドル名をサーバーの引数として渡すことによって、正しいバンドルが必要であることを確認する必要があります。

通常私たちはその後firebase distディレクトリを展開NGビルド--prod

を使用しています。

この普遍的なインクルードでは、firebaseにどのフォルダを展開しますか?

dist-server or dist?

+0

必要なものは次のとおりです。https://medium.com/@cdeniz/angular-universal-on-firebase-dynamic-hosting-4fdd034af3db –

答えて

1

ここで、このテーマに関する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になります余分なロジックなしで常に正しいファイルを見つける。

関連する問題