将 Angular 2 个应用程序部署到 EC2

Question

我希望这是问这个问题的正确位置，如果不是，请移动或删除此 post。

我正在尝试创建一个可以使用 Angular 2 和 Amazon EC2 处理基本 POST 和 GET 请求的简单网站。我在 Angular 2 中的 Web 应用程序前端工作方面有相当多的经验，但在将其连接到后端并在 Amazon EC2 实例上这样做的经验很少。

我希望找到一个示例或一些资源来解释如何将 HTTP 服务与某种后端框架一起使用。我知道 Angular 提供了如何使用 HTTP 服务的示例，但很难想象后端设置需要是什么样子来处理这些请求以及如何在 EC2 上正确配置此设置。任何帮助或资源将不胜感激！

Answer 1

Frontend/client

正如@glavan 所说，像 angular 2 个应用程序一样的 SPA 可以部署在 AWS S3 中。这是 SPA 最具成本效益的方法。这是部署 SPA on S3 的视频。该视频将逐步指导您部署 angular 应用。

后端

AWS EC2 是一个不错的选择。但是还有更多的选择。正如您所说，您是后端新手，设置 EC2、VPC 和 Elastic-ip 是一个有点困难的过程。

如今，SPA 涵盖了很多业务逻辑、路由等，我们只需要我们的 backend 作为 API 来对数据库执行 CRUD 操作。我想推荐一种称为 serverless. Here is the tutorial 的尖端技术，用于在 5 分钟内启动您的后端。 AWS lambda 是一种服务，被称为函数作为服务。您可以使用 AWS lambda + API 网关 + DynamoDB 构建后端。

例如：假设你想在后端注册一些细节，你会POST所有来自客户端的数据使用 url 和正确的路径到您的后端。在 AWS lambda 中，您将 POST 的逻辑编写为函数，其中包含解析请求数据并发送到 dynamoDB 的逻辑。现在，可以通过将此功能与 API 网关（AWS 中的另一项服务）连接来向世界公开此功能。最后我们得到一个API，可以在你的angular2 APP中使用。因此，在调用 POST、angular 2 -> API 网关 -> Lambda（提取请求并发送到数据库）-> dynamoDB 时。

与 EC2 相比，使用无服务器的优势。

您无需管理您的服务器 (EC2)，从更新新的安全补丁到自动缩放，一切都由 lambda 负责。无服务器是一项完全托管的服务。
您只需在调用 lambda 函数时付费。相比之下，即使您的网络应用在给定的一天没有收到流量，您也必须支付给定日期的日费。

话虽如此，与传统后端方法相比，请尝试无服务器。欢迎提出任何问题。

Answer 2

See this answer

如果您指的是 elastic beanstalk 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 "" --severity ERROR
        exit 
      }

      #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.json See Angular.IO Deployment
如果#3成功，那么你可以重新删除node_modules再次
Select项目中的所有文件和文件夹（确保.ebextensions也被选中），然后压缩它们，不要压缩最上面的文件夹（部署时会有子目录将破坏部署）
现在您可以部署该压缩文件并尽情享受了！

如果您使用的是 MacOS，在压缩时，macos 会添加 macos 文件夹，这会破坏部署，确保使用不会添加此额外目录的工具，在我的例子中，我使用 YemuZip

附加说明：EC2 elastic beanstalk 将运行 npm install & npm start，这就是为什么我会推荐运行ning 它们并确保它们在您当地的环境

将 Angular 2 个应用程序部署到 EC2

Deploy Angular 2 App to EC2

backend

amazon-ec2

amazon-web-services

node.js

angular