将Angular应用部署到AWS Elastic Beanstalk

Question

我试图将一个非常基本的 Angular 应用程序部署到 Elastic Beanstalk。该项目是使用 Angular CLI 创建的，我没有对该项目中的文件进行任何更改。

以下是我部署应用程序所采取的步骤：

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

当我检查 eb-activity.log 时，总是出现 “npm install failed” 错误。

我是否遗漏了什么微不足道的东西？非常感谢任何有关将 Angular 应用程序部署到 EB 的帮助。

- Nitin Kumar

Answer 1

虽然这并没有直接回答你的问题，但我认为Elastic Beanstalk不是适合此任务的正确工具。我强烈建议在S3上托管一个静态网站，如果您需要https和自定义域名，请在其前面放置一个CloudFront分发。

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

2. 启用静态网站托管

3. 将Bucket Policy设置为公共读取

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.mydomainname.com/*"
        }
    ]
}

本地构建Angular应用程序并将其生成到dist文件夹中。

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

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

此解决方案的成本非常低廉，比Elastic Beanstalk解决方案（EC2、EBS、ELBs）要便宜得多。 Elastic Beanstalk非常适用于单块应用程序，但在我看来，当你谈论SPA时，它们的存在已经趋于结束，不再是正确的范例。

我知道现在我要求有些过分了，但我强烈建议使用Serverless Framework构建和部署NodeJS API端点，以便与您的Angular应用程序进行交互。

- Matt D

---

正是我正在寻找的解决方案。 - Thabiso Mofokeng

@matt-d 一个像sails.js这样的框架是否可以实现无服务器部署（在没有前端配置的情况下），或者由于它有自己的ORM包装器等，这对于lambdas来说是否太过繁琐？ - cygnus

Azure 专门为此提供了静态 Web 应用程序，它的效果就像魔法一样。 - gajo357

Answer 2

按照以下步骤:

-- Angular 应用程序

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

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

-- Node.js 应用程序

4. 创建一个新文件夹，并通过运行命令 npm init 并按照说明进行操作来创建一个 Node.js 项目
5. 将名称入口点从 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. 浏览您的网站

希望这对你有用！

- Kuldeep Shige

---

请在文件开头添加 const express = require('express');。 - Alex Fortuna

Answer 3

已解决部署问题！我使用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..."));

- Nitin Kumar

---

将app.get('*', function(req, res) { res.redirect('/') })添加到重定向到index.html。 - outrowender

尝试了您的解决方案，但我失败了，出现绑定到端口80的错误。虽然我已经将端口设置为const port = process.env.PORT || 3001; - isawk

它也适用于Angular Universal吗？在我的dist文件夹中，我有一个以项目名称命名的文件夹，里面有两个文件夹，一个是“Browser”，另一个是“Server”。你能帮忙吗？ - Rahul