我有一个SPA(使用React-Router ReactJS ),它使用index.html作为入口点。 为了使前端路由器正常工作,我需要为所有匹配的URL返回index.html文件。
我已经尝试使用proxy_pass和失败(见下文),
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; } }
我也准备好了关于try_files但似乎只有本地文件(S)。
我想达到的效果,
http://example.com/appname http://cdn.us-west-2.edge.aws/666/index.html的静态内容 http://example.com/appname/abc http://cdn.us-west-2.edge.aws/666/index.html的静态内容 http://example.com/appname/abc/def http://cdn.us-west-2.edge.aws/666/index.html的静态内容 您通常会将整个域名托pipe在CDN之后,因此,example.com 是 CDN,您将CDNconfiguration为使用一些专用域/ IP来获取文件,客户永远不会直接看到您的网站或更改您的网页/“应用程序“根据需要从另一个域获取一些资源。
你不想通过你的服务器“代理”静态请求。 如果您刚刚返回HTTPredirect,则会大大增加请求延迟(因为客户端现在必须每次都发出第二个请求以获取真实文件)。 更糟糕的是,如果你是代理的请求,那么你放弃了CDN的所有优点,因为现在服务器上传和下载每个文件,而不是像正常一样直接提供服务(甚至更糟的是如果CDN回到你的服务器问对于文件本身…)。
因此,一般来说,在NGINX / Apache中没有任何改变。
避免旧的“清除浏览器caching”问题,减less用户下载(或validation)文件的频率,无论使用CDN还是不使用,都可以看到性能的显着提升。 所以值得一读(例如, Cache-Control头文件,浏览器和CDN如果不存在的话等等)。
让您的应用程序使用独特的url的永不更新的静态文件通常是最好的胜利,特别是因为浏览器不必重新加载它,如CDN边缘caching。 例如app.js?v=fcaf5eed48b或app-fcaf5eed48b.js 。
用户将连接到附近的CDN节点,然后连接到与服务器通信的CDN。
对于某些CDN,您也可以直接将静态file upload到他们(或者同伴服务,例如Amazon CloudFront + S3),并且您可以在更新时手动清除caching条目,而不使用版本化的URL。
对于单页面应用程序来说,它的大部分dynamic内容可能来自XHR“REST”请求,在许多devise中,您可能无法执行适当的caching操作,因此CDN只会增加延迟和账单。 所以你可以使用不在CDN上的不同的域名。
你必须改变你的JS应用程序使用api域名,例如,而不是$.get('/api/posts')你想要做$.get('https://api.example.com/api/posts') 。 不同的JavaScript库可能会提供各种手段来做到这一点。
如果你有很多的dynamic页面(less了SPA的情况),那么再次通过CDN可以增加页面加载延迟(因为CDN不能caching)。 所以你把你的主域放在你的服务器上,把静态内容分别放在CDN上。 你必须改变你的应用程序/页面来引用新的静态域名。
例如<img src="/assets/logo.png" />您可能需要<img src="https://cdn.example.com/assets/logo.png"/>或甚至更好, <img src="https//cdn.example.com/assets/logo-07ed3bb.png"/> 。