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

Question

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

以下是我部署应用程序的步骤

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

当我检查eb-activity.log时,我总是遇到'npm install failed'错误.

我在这里错过了一些小事吗？非常感谢任何有关将角度应用程序部署到EB的帮助.

Answer 1

解决了部署问题！我使用 express 创建了一个服务器并为我的 angular 应用程序提供服务。我需要将 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..."));

Answer 2

虽然这并没有具体回答你的问题,但我不认为Elastic Beanstalk是适合这项工作的工具.我强烈建议在S3上的静态网站上托管,如果您想要https和自定义域名,请在其前面放置CloudFront分发.

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

2. 启用静态网站托管

3. 将Bucket Policy设置为public read

   {
       "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时,它是错误的范例.

我知道我现在正在推动自己的运气,但我也强烈建议使用无服务器框架来构建和部署NodeJS API端点,以便Angular App与之交互.

Answer 3

按照步骤：

-- 角度应用

1. 创建你的 Angular 应用
2. 使用ng build --prod命令构建您的 Angular 应用程序
3. 这将使用 HTML、js 和 CSS 创建一个类似于“dist/app-folder”的 dist 文件夹

您刚刚构建的 angular 应用程序不能作为静态网站运行，它必须运行在 Node.js 服务器之上

-- Node.js 应用

4. 创建一个新文件夹并通过运行创建一个 Node.js 项目：npm init并按照说明进行操作
5. 名称入口点：(index.js) js 到 'server.js'
6. 使用npm install express path --save命令安装 Express 和 Path
7. 在项目文件夹中创建一个名为“server.js”的文件
8. 现在检查 package.json 文件中名为“main”的配置，值应该是“server.js”
9. 将 Angular dist 文件夹复制到 Node.js app 文件夹
10. 打开“server.js”文件粘贴下面的代码

var path = require('path');        
const port = process.env.PORT ||3000;   
const app = express();

//Set the base path to the angular-test dist folder
app.use(express.static(path.join(__dirname, 'dist/yourappfolder')));

//Any routes will be redirected to the angular app
app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'dist/yourappfolder/index.html'));
});

//Starting server on port 8081
app.listen(port, () => {
    console.log('Server started!');
    console.log(port);
});

11. 使用“node server.js”命令在本地运行 Node.js 项目
12. 该应用程序应该在 localhost:3000 端口上运行
13. 获取 dist 文件夹、server.js 文件和 package.json 文件（服务器项目的）并将它们压缩为 zip。不要包含“node_modules”文件夹。
14. 将 zip 上传到您的 AWS Elastic Beanstalk 环境
15. 浏览您的网站

希望这是有用的！