将Angular 2应用部署到EC2

5

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

我正在尝试使用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问题)。 - galvan
2个回答

6

前端/客户端

正如@glavan所说,像angular 2这样的SPA应用程序可以部署在AWS S3上。这是SPAs最省成本的方法。这里有一个视频可以让您了解如何在S3上部署SPA。 该视频将逐步指导您部署angular应用程序的具体步骤。

后端

AWS EC2是一个不错的选择。但也有很多其他选择。正如您所说,您对后端不熟悉,设置EC2、VPC和弹性IP是一个比较困难的过程。

现在,SPAs覆盖了很多业务逻辑、路由等内容,我们只需要将我们的后端作为执行与数据库相关的CRUD操作的API。我想推荐一种先进的技术叫做serverless。这里是快速启动后端的教程,仅需5分钟即可完成。 AWS Lambda是一个称为“函数即服务”的服务。您可以使用AWS lambda + API gateway + DynamoDB构建您的后端。

例如:假设您想在后端注册某些详细信息,您将使用POST从客户端传输所有数据到带有正确路径的后端。在AWS Lambda中,您需要将您的POST逻辑编写成一个函数,该函数包含解析请求数据并将其发送到DynamoDB的逻辑。现在,可以通过连接此函数与API Gateway(AWS中的另一个服务)来将这个函数公开给世界。最终我们得到了一个API,可以在您的angular 2应用程序中使用。因此,在调用POST时,angular 2 -> API gateway -> Lambda(提取请求并发送到DB) -> DynamoDB

使用serverless相对于EC2的好处:

  1. 您不需要管理服务器(EC2),从更新新的安全补丁到自动缩放,一切都由Lambda处理。Serverless是一个完全托管的服务。
  2. 只有在调用lambda函数时才需要支付费用。相反,即使您的Web应用程序在某天没有接收到流量,您也必须支付当天的日费用。

说了这么多,尝试使用serverless相比传统后端方法更加灵活。如果有任何问题,请随时提出。


1
感谢您的所有帮助!最终,我使用了这个起始模板的修改版本 https://github.com/ansrivas/angular2-flask ,但我会将此标记为已接受,因为它回答了我所有的问题。 - DHW
1
也许你可以看看这个:https://dev59.com/klkS5IYBdhLWcg3we22Z#39783111 - Lakshman Diwaakar

3

查看此答案

如果您正在使用弹性Beanstalk 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
  1. 如果您有node_modulesdist文件夹,请删除它们,这两个文件夹不需要。
  2. 运行npm install && npm start(此步骤必须成功),请注意我使用的是angular2的默认package.json。详见Angular.IO Deployment
  3. 如果第3步成功,则可以再次删除node_modules
  4. 选择项目中的所有文件和文件夹(确保选择了.ebextensions),然后将它们压缩,不要压缩顶层文件夹(部署时将有子目录会破坏部署)
  5. 现在,您可以部署该压缩文件并享受它!

如果您使用的是MacOS,在压缩时,MacOS会添加一个名为macos的文件夹,这会破坏部署,请确保使用不会添加此额外目录的工具,我使用了YemuZip

补充说明:EC2弹性Beanstalk将运行npm installnpm start,因此我建议在本地环境上运行它们并确保它们可以正常运行。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接