Using CloudFront as CDN for JS and CSS

help
1

I’m using WebAppInternals.setBundledJsCssPrefix to use CloudFront as a CDN for static JS and CSS assets. I have a CloudFront distribution with a custom origin that points to my Meteor app. The problem is that when I hit a CloudFront URL, I just get redirected back to my app server, rather than CloudFront serving the JS/CSS directly. It appears that CloudFront is getting a 302 redirect back from my app and caching that, rather than caching the actual file.

From what I’ve read, it seems that the usual causes for this are (1) redirecting e.g. www back to a bare URL (which I don’t have), or (2) redirecting http to https. I do the latter using the force-ssl package, but if indeed a user hits my app with http instead of https then the URLs that they hit CloudFront with should already have been rewritten to use https by the time they get them (since they’re embedded in the HTML page served by Meteor). So it’s not clear to me how CloudFront would be getting a 302 from my app. Has anyone had any success using CloudFront with a custom origin as a CDN?

2

Just a hint: you will find much more information about CDN and Meteor if you google “meteor cloudflare” instead of “meteor cloudfront”.

3

Thanks Steve – I’ve read a bit about CloudFlare and Meteor but haven’t been able to figure this one out. From CloudFront’s statistics I can see that every hit to my CloudFront distribution has been over https, so given that the distribution is configured to use the same protocol when hitting the custom origin it should be requesting the JS/CSS from my Meteor app also using https and therefore not getting a 302. But somehow CloudFront is still receiving (and caching) 302s instead of the actual static files.

4

@brianlukoff this is a super-old thread but the same thing seems to be happening for me - did you ever get it figured out?

5

We’ve since moved to Galaxy and we were able to make it work on Galaxy using this config:

1 Like
6

You can try something along these lines.

  WebApp.connectHandlers.use(function (req, res, next) {

    let isValidRoute = true;
    let pathName = req._parsedUrl.pathname;
    
    if(pathName.indexOf('.css') > -1 ||
      pathName.indexOf('.js') > -1) {
      isValidRoute = false;
    }

    if(!isValidRoute) {
      res.writeHead(404);
      res.end(‘Oh no’);
    }
    else next();

  }
7

If you’re running Meteor, why WOULDNT you run on Galaxy. Anything else is a hack.

CloudFront does not support Socket Connections

They say they do, but they don’t.

8

We front the http parts of the app (js, css, images) with cloudfront. There’s a meteor package that makes it easy. We run on galaxy.

9

Because it’s expensive and super buggy?