在 Heroku CI 环境中通过 CDN 服务 webpack 生成的 CSS 文件

Question

我有一个与 webpack 捆绑在一起的 Node.JS Meteor 应用程序，它会生成一个名称为散列的 CSS 文件：[hash].bundle.css .我可以将 publicPath 设置为 CDN 域：

output: {
  publicPath: 'https://xxx.cloudfront.com/',
},

在 Heroku 上，捆绑包将在暂存环境中生成，然后将生成的 slug 移动到实时环境（包括 css 文件）。

当 CSS 发生变化时，staging-environment 中会出现一个新的哈希。当站点打开（测试...）时，cloudfront 将询问该文件的实时环境，但 Node.JS-server 使用 app-HTML 响应，即发出一个 not-在浏览器上发现错误。

想法：让 CDN 回退到暂存

heroku 文档中建议这样做。但由于应用服务器没有响应 404 http 错误，因此云端不会查看暂存服务器。

问题：为丢失的文件提供 404 http 错误

这个声音并不难。 Meteor webapp 使用 connect 而我在客户端使用 FlowRouter，所以我可以：

WebApp.connectHandlers.use('/', function(req, res, next) {
  if(FlowRouter.matchPath(req.url).route.name == 'not-found') {
    res.writeHead(404);
    res.end('Not found.');
  } else {
    return next();
  }
});

但是：我需要知道许多其他connectHandlers，并进行文件系统检查。我试着走这条路，但它似乎没完没了，需要大量维护，而且不是万无一失的。

想法：使用 Meteor 的 ?meteor_css_resource=1

有一个带有查询参数 xx.css?meteor_css_resource=1 的 css 文件的 Meteor specific treatment，但这不会算作 CDN 再次发出暂存请求的 404 错误。

Answer 1

我们只过滤 .css 文件，而不是检查所有可用的 connectHandlers。

WebApp.connectHandlers.use('/', function(req, res, next) {
  const urlParts = url.parse(req.url)

  if(urlParts.pathname.endsWith('.css')) {
    res.writeHead(404)
    res.end('CSS file not found.')
  } else {
    return next()
  } 
}