在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文件）。 / p>

CSS发生变化时，登台环境中将出现一个新哈希。当网站打开（测试...）时，cloudfront会询问该文件的实时环境，但是 Node.JS服务器使用app-HTML的响应，这会发出一个-在浏览器中发现错误。

想法：使CDN退回到暂存状态

这在heroku文档中建议。但是，由于应用服务器未响应404 http错误，因此Cloudfront不会查看登台服务器。

问题：由于缺少文件而出现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_css_resource=1

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

Answer 1

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

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()
  } 
}