如何將角度4通用應用程序部署到firebase

隨着通用角度4的介紹，我無法弄清楚如何將應用程序成功部署到Firebase託管。我跟着這裏的步驟 https://github.com/angular/angular-cli/wiki/stories-universal-rendering 如何將角度4通用應用程序部署到firebase

我想不通，雖然這部分內容：

「產生的束在從的WebPack文件名的哈希部署過程到生產服務器，你會需要通過重命名文件或將軟件包名稱作爲參數傳遞到服務器來確保需要正確的軟件包。「

通常我們只是用NG構建--prod

然後火力部署dist目錄。

通過這種通用包含方式，我可以將哪個文件夾部署到Firebase？

dist-server or dist？

來源

2017-08-15 Obasi Obeny Oj

這裏是你需要的，https://medium.com/@cdeniz/angular-universal-on-firebase-dynamic-hosting-4fdd034af3db –

有來自谷歌YouTube視頻關於這個問題在這裏：https://youtu.be/gxCu5TEmxXE

基本上，只要我能在此刻告訴沒有連接方式的功能，與你的「測距」文件夾中的文件夾，還等什麼我們所要做的就是覆蓋firebase.json設置，將其作爲一項功能提供給您的應用程序。這基本上意味着你的函數（expressJS代碼）是服務於應用，而不是在蒸餾水靜態文件/

以下的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 /文件夾，以便火力點並不意外服務於這個，而不是通過你已經配置爲火力功能的服務器轉引流量：

指數。 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級的應用問題，正常一個和'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，這意味着服務器功能總是找到沒有額外邏輯的正確文件。

來源

2017-12-22 12:48:15 ejb503

如何將角度4通用應用程序部署到firebase

回答

相關問題