Grunt模块将所有静态资产上载到S3 / CloudFront，替换路径，并使旧资产无效

Question

使用Grunt，NodeJs和Express，我应该使用哪些模块：

1. 通过查看资产目录或解析代码库，发现应用中的所有静态资产（前端JS，CSS，图像）

2. 将资源上传到Amazon S3 / CloudFront，使用唯一的“指纹”名称重命名每个文件

3. 使用CloudFront网址替换代码库中的每个资产的路径

4. 使旧CDN资产无效

这是我第一次使用CloudFront。我不确定是否可以使用Grunt完成上述所有操作，或者是否最好将其作为Node / Express模块​​完成。

使用Rails，I've read it's as easy as：

# Setup amazon CDN
config.action_controller.asset_host = "xxxxxxxxxxxxx.cloudfront.net"

我正在为节点堆栈寻找类似的解决方案。

Answer 1

使CDN资产无效是一个坏主意®。在CloudFront中，最多可能需要15分钟才能完成 - 这将为您的部署增加15分钟。此外，某些浏览器可能会保留旧文件，因为URL是相同的。

相反，您应该对静态资产进行版本控制，并以不同的版本名称发布新版本。

例如：

my-app/1.2.3/main.js
my-app/1.2.4/main.js

等等，等等。

这给你带来两个好处：

• 你可以永远，自信地缓存。相同的网址将始终提供相同的文件。
• 如果发生灾难部署，您可以快速回滚。旧文件就在那里。

对于部署到S3，有特定的插件。 但是，我更喜欢简单地使用grunt-shell与官方Amazon AWS CLI

一起使用

配置它看起来像这样：

shell: {
  cp: {
    command: "aws s3 cp --recursive dist/ s3://my-bucket/my-app/"
  }
}

您可以使用grunt从某处读取版本变量，并自动将所有文件放在dist/{version}/文件夹中，同时将html中的所有路径替换为正确的version路径。