将角度应用程序部署到AWS Elastic beantalk

时间:2018-06-28 15:30:33

标签: node.js angular amazon-web-services

我正在尝试将一个非常基本的角度应用程序部署到弹性beantalk。该项目是使用angular cli创建的。我没有对该项目中的文件进行任何更改。

这是我部署应用程序所采取的步骤

  1. 在项目的根文件夹中执行了“ ng build”
  2. 将@ angular / cli依赖项从devDependencies移至package.json中的依赖项
  3. 压缩dist文件夹的内容以及package.json
  4. 将zip文件夹部署到配置了node.js平台,节点版本8.11.3的AWS EB,与我的本地环境相同。

当我检查eb-activity.log时,总是遇到“ npm安装失败”错误。

我在这里错过了一些琐碎的事情吗?非常感谢将角度应用程序部署到EB的任何帮助。

3 个答案:

答案 0 :(得分:6)

虽然这不能具体回答您的问题,但我认为Elastic Beanstalk不是完成此任务的正确工具。我强烈建议在S3上的静态网站上托管,如果您想使用https和自定义域名,请在其前面放置一个CloudFront发行版。

  1. 创建一个S3存储桶,例如www.mydomainname.com

  2. 启用静态网站托管

  3. 将存储桶策略设置为公开读取

    {
        "Version": "2008-10-17",
        "Statement": [
            {
                "Sid": "PublicReadForGetBucketObjects",
                "Effect": "Allow",
                "Principal": "*",
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::www.mydomainname.com/*"
            }
        ]
    }
    
  4. 在本地将角度应用程序构建到dist文件夹中。

  5. 使用aws-cli

    将文件推送到网站

    aws s3 sync dist s3://www.mydomainname.com/

此解决方案的成本为几美分,比Elastic Beanstalk解决方案(EC2,EBS,ELB)低得多。 Elastic Beanstalk非常适用于Monolithic应用程序,但是它们的存在已被编号,并且在您谈论SPA,IMO时出现了错误的范例。

我知道我现在很幸运,但是我也强烈建议您使用Serverless Framework来构建和部署NodeJS API端点,以便与Angular App进行交互。

答案 1 :(得分:4)

执行以下步骤:

-Angular应用

  1. 创建您的Angular应用
  2. 使用Traceback (most recent call last) <ipython-input-10-c242f9498457> in <module> 7 image = imutils.resize(image, width=min(400, len(image[0]))) 8 image1 = imutils.resize(image1, width=min(400, len(image1[0]))) ----> 9 result = cv2.absdiff(image1, image) 10 cv2.imshow(result) error: OpenCV(3.4.2) C:\projects\opencv-python\opencv\modules\core\src\arithm.cpp:659: error: (-209:Sizes of input arguments do not match) The operation is neither 'array op array' (where arrays have the same size and the same number of channels), nor 'array op scalar', nor 'scalar op array' in function 'cv::arithm_op' 命令构建Angular应用
  3. 这将创建一个带有HTML,js和CSS的dist文件夹,例如“ dist / app-folder”

您刚构建的角度应用程序无法在静态网站上运行,它必须在Node.js服务器上运行

-Node.js应用

  1. 通过运行ng build --prod并按照说明创建新文件夹并创建Node.js项目
  2. 名称入口点:(index.js)js到'server.js'
  3. 使用npm init命令安装Express和Path
  4. 在项目文件夹中创建一个名为“ server.js”的文件
  5. 现在检查package.json文件中名为“ main”的配置,该值应为“ server.js”
  6. 将Angular dist文件夹复制到Node.js应用文件夹
  7. 打开“ server.js”文件并粘贴到代码下方
npm install express path --save
  1. 使用“ node server.js”命令在本地运行Node.js项目
  2. 该应用程序应在localhost:3000端口上运行
  3. 获取dist文件夹,server.js文件和(服务器项目的)package.json文件,并将它们压缩为zip文件。不要包含“ node_modules”文件夹。
  4. 将邮政编码上传到您的AWS Elastic Beanstalk环境
  5. 浏览您的网站

希望这很有用!

答案 2 :(得分:2)

解决了部署问题!我使用express创建服务器并提供我的角度应用程序。我需要将server.js添加到我的dist /文件夹中。我的server.js文件看起来像这样

const express = require('express');
const http = require('http');

const app = express();

const port = process.env.PORT || 3001;

app.use(express.static(__dirname));

const server = http.createServer(app);

server.listen(port, ()=> console.log("Running..."));