Grunt 模块将所有静态资产上传到 S3/CloudFront、替换路径并使旧资产失效

Question

使用

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

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

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

3. 将代码库中每个资产的路径替换为 CloudFront URL

4. 使旧的 CDN 资产失效

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

使用Rails，我读到它就像：

# 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

等等，等等。

这为您提供了两个优势：

• 您可以放心地永久缓存。同一 URL 将始终提供相同的文件。
• 在发生灾难部署时，可以快速回滚。旧文件位于它们所在的位置。

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

。

配置它看起来像这样：

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

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