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

Using Grunt, NodeJs and Express, what module(s) should I use to:

使用Grunt、NodeJs和Express，我应该使用哪个模块:

Discover all static assets (frontend JS, CSS, images) in the app, either by looking at an asset directory or parsing through the codebase

在应用程序中发现所有静态资产(前端JS、CSS、图像)，通过查看资产目录或通过代码库进行解析。
Upload assets to Amazon S3 / CloudFront, renaming each file with a unique "fingerprinted" name

将资产上传到Amazon S3 / CloudFront，用唯一的“指纹”名称重新命名每个文件
Replace each asset's path in the codebase with the CloudFront URL

用CloudFront URL替换代码基中的每个资产的路径
Invalidate old CDN assets

无效的老CDN资产

This is my first time using CloudFront. I am not sure if all of the above can be accomplished with Grunt, or whether it is best accomplished as a Node/Express module.

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

With Rails, I've read it's as easy as:

有了Rails，我读过它就像:

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

and I'm looking for a similar solution for a Node stack.

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

1 个解决方案

#1

Invalidating CDN assets is a Bad Idea ®. In CloudFront, it may take up to 15 minutes to complete - that would be adding 15 minutes to your deploy. Also, some browsers may hold old files because the URL is the same.

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

Instead, you should probably version you static assets and publish new versions under different version names.

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

For example:

例如:

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

So on, and so forth.

等等。

This gives you two advantages:

这给了你两个优势:

You can cache forever, confidently. The same URL will always serve the same file.
你可以永远、自信地隐藏。相同的URL将始终服务于相同的文件。
You can rollback quickly in case of a disaster deploy. Old files are where they were.
您可以在灾难部署时快速回滚。旧文件还在。

For deploying to S3, there are specific plugins for that. I, however, prefer to simply use grunt-shell in tandem with the official Amazon AWS CLI

对于部署到S3，有专门的插件。然而，我更喜欢简单地使用grunt-shell与Amazon AWS CLI的官方链接

Configuring it would look something like this:

配置它大概是这样的:

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

You can use grunt to read a version variable from somewhere and automatically put all files inside the dist/{version}/ folder, while replacing any paths in your html to the correct version path.

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

#1