将 Angular 2 应用程序部署到 EC2

Posted 2023-03-04

【中文标题】将 Angular 2 应用程序部署到 EC2

【英文标题】：Deploy Angular 2 App to EC2

【发布时间】：2017-02-01 11:24:43

【问题描述】：

我希望这是问这个问题的正确地方，如果不是，请移动或删除此帖子。

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

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

【问题讨论】：

您可以在 AWS S3 中托管您的网站。后端将位于 EC2 中。那么您需要在 angular2 项目中指定后端基本 url（我的意思是所有调用都将发送到后端服务器），并且该 url 应该是您的 EC2 的 url。此外，您的后端应该接受来自 S3 服务器的请求（以避免 CORS 问题）

【参考方案1】：

See this answer

如果您指的是弹性beantalk 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 elastic beanstalk 将运行 npm install 和 npm start，这就是为什么我建议运行它们并确保它们在您的本地环境中正常

【参考方案2】：

前端/客户端

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

后端

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

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

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

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

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

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

【讨论】：

感谢大家的帮助！最后，我最终使用了此启动器的修改版本github.com/ansrivas/angular2-flask，但我会将其标记为已接受，因为它解决了我遇到的所有问题。

可以看看这个：***.com/questions/39783099/…