在aws s3服務Angular2應用程序

Question

我創建了一個Angular 2表單，它使用Rest API將表單數據發佈到postgres數據庫。現在，我想在AWS S3上爲我的Angular 2應用程序提供服務。我搜索了這一點，我發現創建一個webpack是一個解決方案，但無法創建一個。我想知道從哪裏開始，捆綁我的代碼並在s3上提供它。

GitHub的鏈接形式：https://github.com/aanirudhraj/Angular2form_signaturepad_API

感謝您的幫助！

Answer 1

您只需將其作爲S3上的靜態網站託管即可。 檢查：http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html

Answer 2

的最快方式是使用角CLI來構建應用程序，然後部署「DIST」目錄的內容作爲在S3靜態站點（一個S3桶可以被配置來承載靜態站點;確保您將讀取權限授予「任何人」以避免http 4xx返回碼）。

Answer 3

我從您的代碼推斷出您正在使用angular-cli。

• 創建一個開發/生產建設

  納克構建--dev/NG構建--prod您dist文件夾將包含捆綁文件部署

• 內容。你的參考文件的主要文件將是'index.html'，因爲這會加載你的角度的應用程序。
• 您需要決定使用哪種服務器來爲您的webapp提供服務。
  爲了開發目的，當我們做ng serve時，webpack-dev-server被用作靜態文件服務器（local development）。我建議應該使用在部署到實際服務器時可以使用的最舒適/經濟高效的解決方案。

靜態文件服務器

• Directly hosting website is aws space as a static website.
• Aspnet Core with static file server middleware. (*)
• Nodejs Express with static file server middleware.(*)
• Java serverlet for serving static files. (*)

（*）以下的aproach也將讓您有一些服務器端代碼如果你需要在未來。

Answer 4

當你部署你的ng2-app時，你應該使用AOT（提前編譯）。 我想你正在使用JIT（及時編譯）。

在angular2引導頁，

隨着AOT，瀏覽器下載的應用程序的預編譯的版本。瀏覽器加載可執行代碼，以便可以立即呈現應用程序，而無需等待先編譯應用程序。

當您使用JIT編譯時，您的瀏覽器將下載由angular2編譯器定義的vendor.js，它將及時編譯您的應用程序。它會太慢，你的客戶必須下載供應商文件。當您使用AOT時，您不必使用供應商文件，因此資源正在變小。

我建議您在部署應用程序時使用AOT編譯，並使用資源大小的延遲加載。

如果您對ng2 AOT編譯感興趣，請閱讀本指南。

angualar2-cookbook-AOT

這裏是例子angular2應用與webpack2和延遲加載。

在這裏使用文件結構和配置文件。

當我使用示例應用程序進行測試時，捆綁了aot的文件小於500KB。

angular2-webpack2-aot

當您使用AOT與@ ngtools /的WebPack或任何編譯，

只是把它與AOT在你的S3存儲桶編譯的文件dist目錄中的所有文件，我建議使用AWS用於您的s3存儲桶資源的雲端緩存。

Answer 5

感謝您的所有答案。所有這些幫助我找到解決方案 我已經使用[GitHub webpack starter]重新創建了我的angular2應用程序：https://github.com/AngularClass/angular2-webpack-starter。 一旦我編譯了代碼並按照自述文件中提供的說明創建了dist文件夾。我已經將dist的所有內容上傳到AWS s3 Bucket並設置了權限。完成!!!!