將Angular 2 App部署到EC2

Question

我希望這是問這個問題的正確地方，如果不是，請移動或刪除此帖子。

我正在嘗試創建一個可以使用Angular 2和Amazon EC2處理基本POST和GET請求的簡單網站。 我在Angular 2中使用Web應用程序的前端有相當多的經驗，但是在將其連接到后端並在Amazon EC2實例上進行此操作方面卻經驗很少。

我希望找到一個示例或一些資源來解釋如何將HTTP服務與某種后端框架一起使用。 我知道Angular提供了有關如何使用HTTP服務的示例，但是很難說明后端設置看起來像什么樣的內容才能處理這些請求，以及如何在EC2上正確配置此設置。 任何幫助或資源將不勝感激！

Answer 1

前端/客戶端

正如@glavan所說，可以在AWS S3中部署類似於angular 2應用程序的SPA。 這是SPA最具成本效益的方法。 這是在S3上部署SPA的視頻。 該視頻將指導您逐步介紹如何部署角度應用程序。

后端

AWS EC2是一個不錯的選擇。 但是還有更多可用的替代方法。 如您所說，您是后端的新手，設置EC2，VPC和Elastic-ip有點困難。

如今，SPA涵蓋了許多業務邏輯，路由等。我們僅需要后端作為API來執行數據庫的CRUD操作。 我想建議一種稱為無服務器的前沿技術。 這是在5分鍾內啟動后端的教程 。 AWS lambda是一種稱為功能即服務的服務 。 您可以使用AWS lambda + API網關+ DynamoDB構建后端。

對於例如 ：假設你想在后台注冊一些細節，你會從客戶端的所有POST數據到與URL和正確的路徑后端。 在AWS lambda中，您將POST邏輯作為一個函數編寫，其中包含解析請求中的數據並將其發送到dynamoDB的邏輯。 現在，通過將此功能與API網關（AWS中的另一項服務）連接，可以將該功能公開。 最后，我們獲得一個API，可在您的angular 2 APP中使用。 因此，在調用POST時， 角度2-> API網關-> Lambda（提取請求並發送到DB）-> dynamoDB 。

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

1. 您無需從更新新的安全補丁到自動擴展來管理服務器（EC2），lambda會處理所有問題。 無服務器是一項完全托管的服務。
2. 只有在調用lambda函數時才需要付費。 相比之下，即使您的Web應用在特定日期沒有收到流量，您也必須支付特定日期的日費。

話雖如此，與傳統后端方法相比，請嘗試無服務器。 對此有任何疑問將受到歡迎。

Answer 2

看到這個答案

如果您指的是彈性beantalk nodejs ec2，那么這個答案最適合您，因為花了我一段時間才弄清楚這一點，但事實證明它比我想象的要容易：

1. 在執行此鏈接后 ，進行了一些修改，以避免/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

2. 如果有，請刪除node_modules ＆ dist文件夾，兩者都不需要。
3. 運行npm install && npm start （此步驟必須成功），請注意我正在使用angular2的默認package.json 請參閱Angular.IO部署
4. 如果＃3成功，則可以再次重新刪除node_modules
5. 選擇項目中的所有文件和文件夾（確保也選擇了.ebextensions ），然后壓縮它們，不要壓縮頂層文件夾（部署時將具有子目錄，這將破壞部署）
6. 現在您可以部署該壓縮文件並享受它！

如果您使用的是MacOS，則在壓縮時，macos將添加macos文件夾，這將破壞部署，請確保使用不會添加此額外目錄的工具，在我的情況下，我使用的是YemuZip

附加說明：EC2 Elastic beantalk將運行npm install ＆ npm start ，這就是為什么我建議運行它們並確保它們在您的本地環境中正常的原因