I have a SPA (ReactJS with React-Router) which is using index.html as an entry point. In order to make the front-end router works properly, I need the index.html file to be returned for all matched URL.

I have tried using proxy_pass and failed (see below),

server {

    listen 80;

    proxy_set_header Host $http_host;

    proxy_set_header x-forwarded-for $remote_addr;





    location /appname/(?<section>.*) {

        proxy_pass http://cdn.us-west-2.edge.aws/666/index.html;

    }

}

I have also ready about try_files but which seems only for the local file(s).

The effect I would like to achieve,

1. When a user visit http://example.com/appname
   


2. The static content at http://cdn.us-west-2.edge.aws/666/index.html should be served

1. When a user visits http://example.com/appname/abc


2. The static content at http://cdn.us-west-2.edge.aws/666/index.html should be served

1. When a user visits http://example.com/appname/abc/def


2. The static content at http://cdn.us-west-2.edge.aws/666/index.html should be served

You would normally either host your entire domain behind a CDN so, example.com is the CDN, and you configure the CDN to use some private domain/IP to get the files, the customer never directly sees your site or change your pages / "app" to get some resources from another domain as needed.

You do not want to "proxy" the static requests through your server. If you are just returning HTTP redirects, then you drastically increased the request latency (because the client now must make a second request every time to get the real file). Worse if you are proxying the requests, then you gave up all the advantages of a CDN because now the server is both uploading and downloading every file compared to just serving directly like normal (even worse if then the CDN goes back to your server to ask for the file itself...).

Thus generally, there is nothing to change in NGINX/Apache.

Make sure your content is cache friendly

Avoiding the old "clear your browser cache" problems and reducing how often the user must download (or validate) a file in the first place is useful regardless of using a CDN or not and can see some vast performance improvements. So its worth reading up on that (e.g. what Cache-Control header does, what do browsers, and the CDN do if its not present, etc.).

Making your app using unique URL's for static files that are never updated is generally the best win, espiecally since browers never have to reload it, as with CDN edge caches. e.g. app.js?v=fcaf5eed48b or app-fcaf5eed48b.js.

The CDN

An entire site on a CDN

The users will connect to a nearby CDN node and its then the CDN that communicates with your server.

For some CDN's you can also just upload your static files directly to them (or a companion services, e.g Amazon CloudFront+S3), and you may have the ability to purge cache entires manually when updating if you don't use versioned URLs.

You might put API's on another domain

For a single page app, its likely most of your dynamic content is from XHR "REST" requests, and in many designs, you either cant or just wont implement suitable caching for these, so the CDN just adds latency and bills. So you can use a different domain name that's not on the CDN.

You have to change your JS app to use the api domain, e.g. instead of $.get('/api/posts') you want it to do $.get('https://api.example.com/api/posts'). Different JavaScript libraries may provide various means to do it.

Just the static files

If you have a lot of dynamic pages (less the case with SPA's) then again going through the CDN can add page load latency (since the CDN cant cache it well). So you keep your main domain on your servers, and put static content on the CDN separately. You have to change your app/pages to refer to the new static domain.

e.g. instead of <img src="/assets/logo.png" /> you might want <img src="https://cdn.example.com/assets/logo.png"/> or even better, <img src="https//cdn.example.com/assets/logo-07ed3bb.png"/>.