将 Angular 应用程序部署到 AWS Elastic beanstalk

Question

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

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

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

我在检查 eb-activity.log 时总是遇到“npm install failed”错误。

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

Answer 1

虽然这并没有具体回答您的问题，但我认为 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. 在本地构建 Angular 应用程序到 dist 文件夹中。

5. 使用aws-cli将文件推送到网站

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

此解决方案将花费几美分，远低于 Elastic Beanstalk 解决方案（EC2、EBS、ELB）。 Elastic Beanstalk 非常适合单体应用程序，但它们的存在已被编号，而且当您谈论 SPA、IMO 时，它们的范式是错误的。

我知道我现在很幸运，但我也强烈建议使用 Serverless Framework 来构建和部署 NodeJS API 端点，以便您的 Angular 应用与之交互。

Answer 2

解决了部署问题！我使用 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 3

按照以下步骤操作：

-- Angular 应用程序

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

您刚刚构建的 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 应用文件夹
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. 浏览您的网站

希望这有用！