如何在角度索引文件中按网站域提供来自不同云服务存储桶的资产



由于政治原因,目标是从两个云服务桶(AWS(和(阿里云(提供图像和字体资产。

中国客户不想在 AWS 中查看来自美国服务的图像/字体,因此我们需要从阿里云提供它们。

因此,当域名不是中国时,角度网站将提供来自AWS的资产,当域名不是中国时,将从阿里云提供资产。

到目前为止,我的策略涉及在全局 scss 文件中使用域基本变量。此变量将在 SCSS 文件中预置所有资产 url 所以它看起来像这样:

域.scss 文件

$domain资产:https://s3-amazon.myBucket/;

这个scss文件将在项目构建过程中被覆盖(使用node的写文件(,这样如果我们切换到中国,该文件现在将具有 构建完成后,执行以下操作:

域.scss 文件

$domain资产:https://aliyun.oss.myBucket/;

这适用于 scss 文件中的资产,但是当在索引中声明图标和预渲染字体等资产时.html,上下文已消失 的 SCSS 文件。无论如何,我也可以在它们上设置基本域吗?

我查看了angular.json配置,"deploy-url"属性最接近我想要的属性,除了url在绝对前面加上 索引文件中的所有资产(包括CSS和JS文件(,但不是那些将存在于云中的文件,只是收藏夹图标和字体。

到目前为止,我想出的是使用读/写节点.js fs 来编辑具有正确存储桶基本 url 的文件,基于我们创建的命令行参数"云"以在 Angular 构建命令上设置为 aws 或阿里巴巴。 - 用于索引文件中的资产。我在 JSDOM(模拟 DOM 操作(的帮助下修改文件,找到所有带有"assets"一词的链接(使用 JSDOM queryselector(,并相应地前缀 url。 - 对于 scss 文件中的图像,我读/写了一个全局 scss 样式表,其中包含保存 url 域的变量。

这很好用,直到两个存储桶乘以 5 以适应不同的环境,例如开发、质量、暂存等......如果在构建时完成,则在 url 中设置环境会变得有问题,因为现在构建项目的人都必须意识到它注定要到哪个环境。如果我们错误地构建开发映像并部署质量,这将是意外发生的。

接下来要尝试的是至少将样式表部署到存储桶,这样所有图像都可以依赖于相对路径,并且无需确定需要哪个存储桶 URL。到目前为止,我不确定这将如何实施。

最新更新