在单个AWS S3存储桶中托管多个Angular 7应用

Question

如何在单个AWS S3存储桶中托管多个Angular 7应用程序？即

每个站点都在子文件夹中：

/site1
/site2
/site3

子文件夹可访问的每个站点：

www.mydomain.com/site1
www.mydomain.com/site2
www.mydomain.com/site3

Answer 1

1. 对于Angular构建，您需要确保正确设置base href。 site1的示例将使用以下命令构建。 （文档here）

   ng build --baseHref /site1/

2. 确保在索引文件设置为index.html的情况下启用了S3存储桶上的静态网站托管。

3. 在S3中使用site1，site2，site3创建3个文件夹。

4. 将Angular构建的所有内容放入这些文件夹，例如，将site1和index.html上传到all bundles上的site1文件夹中，然后对于其他文件夹也是如此。 （此时，您可以使用S3网址访问有角度的应用程序）

5. 您还需要将www.mydomain.com的DNS映射到s3存储桶。

通过自定义域阅读static hosting on S3上的AWS文档。

Answer 2

上面接受的答案的其他信息：

在离子环境中，离子构建会忽略baseHref参数。但是，有一种解决方法（请注意，其他双破折号：

ionic build --prod -- --baseHref /site1/

使用baseHref构建参数时，会将index.html基本标记设置为此路径。这就是我可以判断baseHref构建参数是否正常工作的方式。

<base href="/site1/" />

没有必要也使用Angular构建标记deployUrl。

在html中使用此资产路径解决了我的资产404问题：

<img src="assets/myimage.png">

一个尚未解决的问题：即使使用错误document = index.html设置了S3静态网站托管，刷新应用程序的页面也会显示404（请参见下面的屏幕截图）。发布到S3根目录的应用可以刷新。请注意，这不是在生产环境中推荐的方法，而是一种快速的解决方法。