將Angular 2應用程序部署到EC2

我希望這是問這個問題的正確位置，如果不是，請移動或刪除此帖。將Angular 2應用程序部署到EC2

我想創建一個簡單的網站，可以使用Angular 2和Amazon EC2處理基本的POST和GET請求。我在Angular 2的Web應用程序的前端工作方面擁有相當豐富的經驗，但在將其連接到後端以及在Amazon EC2實例上完成這些工作時經驗不足。

我希望找到一個例子或一些資源，可以解釋如何將HTTP服務與某種後端框架結合使用。我知道Angular提供了有關如何使用HTTP服務的示例，但很難想象後端設置需要看起來像處理這些請求，以及如何在EC2上正確配置此設置。任何幫助或資源將不勝感激！

來源

2016-09-23 DHW

你可以將你的網站在AWS S3罰款。後端將坐在EC2中。然後你在你指定你的angular2項目的後端基礎URL需要（我的意思是所有的電話都將到後端服務器），這網址應該是您的EC2的URL。此外你的後臺應該接受來自S3服務器請求（爲了避免CORS問題） – galvan

前端/客戶

正如@glavan說，SPA等的角2級的應用程序可以在AWS S3部署。這是SPA最具成本效益的方法。這裏是部署SPA on S3的視頻。此視頻將指導您逐步部署角度應用程序。

後端

AWS EC2是一個不錯的選擇。但有更多的替代品可供選擇。正如你所說，你是後端新手，設立EC2，VPC和Elastic-ip是一個有點困難的過程。

時下，SPA的覆蓋了很多業務邏輯，路由等，我們只需要我們的後臺作爲用於執行數據庫的CRUD操作的API。我想建議一種叫做serverless的尖端技術。下面是在5分鐘內啓動後端的tutorial。 AWS lambda是一種稱爲的服務，其功能如服務。您可以使用AWS lambda + API網關+ DynamoDB構建後端。

對於如：說你要登記在後端的一些細節，你會POST一切從客戶端與URL和正確的路徑後端數據。在AWS lambda中，您將POST作爲函數編寫邏輯，其中包含解析來自請求的數據併發送到dynamoDB的邏輯。現在，通過將此函數與API網關（AWS中的另一項服務）相連，可以將此功能暴露給世界。最後我們得到一個API，可以在你的angular 2 APP中使用。 SO，在調用POST時，角2 - > API網關 - > Lambda（提取請求併發送到數據庫） - > dynamoDB。

使用無服務器與EC2相比的好處。

您不需要管理您的服務器（EC2）將新安全補丁更新爲自動縮放，所有內容都由lambda保管。無服務器是一項完全託管服務。
只有在調用lambda函數時才支付。相比之下，即使您的網絡應用程序在某一天沒有收到流量，您也必須支付特定日期的日期關稅。

話雖如此，與傳統的後端方法相比，嘗試無服務器。任何有關此問題都會受到歡迎。

來源

2016-09-24 01:22:12

感謝您所有的幫助！最後，我結束了使用該起動機https://github.com/ansrivas/angular2-flask的修改版本，但因爲它解決的是我有問題，我將標誌着這是公認的。 – DHW

我沒有找到s3與路由不幸工作 – Sam

可能會檢查出這一個：http://stackoverflow.com/questions/39783099/deploying-react-redux-app-in-aws-s3/39783111#39783111 –

See this answer

如果你指的是彈性青苗的NodeJS EC2，那麼這個答案是最適合你，因爲我花了一段時間來弄清楚這一點，但事實證明是比我想象的要簡單：

繼this link了一些修改我做避免/usr/bin/env: node: No such file or directory問題，我添加了下面的腳本

.ebextensions/angular2deployment.config

files: 
    "/opt/elasticbeanstalk/env.vars" : 
    mode: "000775" 
    owner: root 
    group: users 
    content: | 
     export NPM_CONFIG_LOGLEVEL=error 
     export NODE_PATH=`ls -td /opt/elasticbeanstalk/node-install/node-* | head -1`/bin 
    "/opt/elasticbeanstalk/hooks/appdeploy/pre/50npm.sh" : 
    mode: "000775" 
    owner: root 
    group: users 
    content: | 
     #!/bin/bash 
     . /opt/elasticbeanstalk/env.vars 
     function error_exit 
     { 
     eventHelper.py --msg "$1" --severity ERROR 
     exit $2 
     } 

     #install not-installed yet app node_modules 
     if [ ! -d "/var/node_modules" ]; then 
     mkdir /var/node_modules ; 
     fi 
     if [ -d /tmp/deployment/application ]; then 
     ln -s /var/node_modules /tmp/deployment/application/ 
     fi 

     OUT=$([ -d "/tmp/deployment/application" ] && cd /tmp/deployment/application && $NODE_PATH/node $NODE_PATH/npm install 2>&1) || error_exit "Failed to run npm install. $OUT" $? 
     echo $OUT 
    "/opt/elasticbeanstalk/hooks/configdeploy/pre/50npm.sh" : 
    mode: "000666" 
    owner: root 
    group: users 
    content: | 
     #no need to run npm install during configdeploy

刪除node_modules & dist文件夾，如果你有，兩者是不需要的。
運行npm install && npm start（這一步必須是成功的），請注意，我使用的是angular2的默認package.jsonSee Angular.IO Deployment
如果＃3是成功，那麼你就可以再次
再刪除node_modules中選擇所有文件&文件夾項目（確保.ebextensions選擇爲好），然後對其進行壓縮，不壓縮的頂層文件夾
現在可以部署的壓縮文件，並享受（部署，這將打破部署時，你將有子目錄）！

如果您使用MacOS的，在壓縮的同時，MacOS將會將增加MacOS的文件夾，這將打破部署，確保使用的工具，不會增加這些額外的目錄，在我的情況下，我用YemuZip

附加說明：EC2彈性魔豆將運行npm install & npm start，這就是爲什麼我會推薦運行它們，並確保他們在當地的環境

來源

2017-04-22 05:03:26

將Angular 2應用程序部署到EC2

回答

相關問題