Configuring Any CDN To Deliver Only One File No Matter What Url Has Been Requested

August 07, 2022 Post a Comment

I am currently working on a new project where the entire page should be implemented in HTML5/JS working against an API/JSON. Since the entire application should only consist of one

Solution 1:

Any CDN should have the capability of defining an origin server. This server gets contacted by the CDN to serve the file if the edge location doesn't have it.

The good news is that the origin server can be anything that serves web pages, such as Apache, Nginx, etc. This means that you can apply any kind of rewriting rules you wish.

If you don't wish to set up the origin server yourself, you could look at hosting your (static) site on S3. Recently they have introduced web redirects which may help you to to serve the same file under a different "alias". Failing that, you could look at redefining the standard error document, but I'm not sure whether an error status code will still be sent.

Solution 2:

CDNs are intended to deliver static content by serving the static resource from the closest geographical point possible to the client. CDN technology is not intended to do a redirect or server side processing of the request. You'll need something else involved here to do that part. The question is just whether that is a server side technology or some sort of load balancer/firewall request re-writing (to avoid having a server side technology).

I don't think there is a truly platform agnostic way of doing this. You'll always be tied to either a server side technology or a load balancer/firewall platform. But it also sounds like you may already have this constraint as you need somewhere to host your JSON API? Even if you haven't decided on the platform, pretty much any platform should allow you to do some basic routing. If you can serve JSON Http requests, you should be able to do some page routing too.

As a side note, I don't believe you want to return your "index.html" from absolutely all possible URLs at your domain. You'll want some list of valid URLs and invalid URLs. In which case you'll need to be pinging your back end anyway to validate the request URL. That further suggests to me that a server side technology will be better suited for this task then a blind "catch-all" redirect at a lower level.

My personal preference would be to use your favorite MVC framework to serve indexable content with your desired URL structure (pretty much all page loads) and then use your JSON api to work with that content after page load (any dynamic stuff you want to be able to do). The whole thing, both page loads and API, being served from the same server platform/environment.

Solution 3:

Symlink your 404 page to the index page. That way, when a requested URL is not found on your web-content (about any link, as it appears in your case), the 404 page is served, which is in turn the index page itself.

# ln -s index.html 404.html

Solution 4:

Nginx http server can do this like:

location /{
    # serve a file
}

or you can customize your links like

location /my_html{
     # serve html file
}

location /cdn/{
     # serve rest files
}

you can even check urls by regexps

location ~ /cdn/.*\.js${
    # serve cdn
}

Solution 5:

In case you have your own domain that point at the CDN (I know CloudFront let you do that), you could use CloudFlare ( https://www.cloudflare.com/ ) as a reverse proxy between your users and the CDN.

Thanks to their free plan, you can create a rule that redirects everything to index.html. I think this is the only way to achieve what you want, given that CDNs are configured to serve only static existing files as you know.

JavaScript Lib