在AWS EC2上部署Angular 5应用程序

14 浏览
0 Comments

在AWS EC2上部署Angular 5应用程序

我正在使用Angular 5为大学项目进行开发。我建立了两个独立的服务：

  1. parentFolder

    • InputService

      1. package.json
      2. ...
    • WebClient

      1. package.json
      2. ...

我的文件夹结构中有一个名为projectX的父文件夹，其中有两个子文件夹，它们都有自己的package.json等。它们是独立的项目，但存在于同一个parentFolder中。我已经设置了一个EC2实例，并成功安装了所有依赖项，包括node、npm和正确版本的angular CLI。

在本地，我这样启动我的项目：

对于输入服务，使用ng serve --port 6060，对于WebClient，使用ng serve --port 4200。我已经通过ssh在服务器上成功运行了ng build --prod命令，并创建了两个dist文件夹（每个文件夹中都有一个）。现在，我想要从“互联网”中访问我的两个服务。我已经为我的EC2实例设置了入站规则，应该允许连接。

最简单的方法是使我的两个dist文件夹可用吗？我应该使用express吗？我尝试使用pm2 http服务器，但没有成功。

如果有进一步的问题，请随时提问。

0

1 答案

0 Comments

问题的出现原因是Angular 5应用程序在AWS EC2上部署时遇到了困难。以下是解决方法：

1. 使用ng build --prod --aot命令构建每个应用程序。

2. 在S3中创建两个存储桶。

3. 将每个应用程序的dist/文件夹内容放入相应的存储桶中。

4. 设置每个存储桶的属性：选择“静态网站托管”，并将索引文档字段设置为您构建生成的'index.html'（位于dist/文件夹的根目录）。

5. 将每个存储桶的权限设置为公开，并使用允许的方法设置CORS配置（以下是一个示例）：

<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>

6. 您可以使用“静态网站托管”生成的端点来访问您的应用程序。

对于您的后端，需要更多详细信息。谢谢。我认为这可能会对您有所帮助。

0