如何configurationNginx来从CDN提供静态文件

我有一个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)。

我想达到的效果,

  1. 当用户访问http://example.com/appname
  2. 应提供http://cdn.us-west-2.edge.aws/666/index.html的静态内容

  1. 当用户访问http://example.com/appname/abc
  2. 应提供http://cdn.us-west-2.edge.aws/666/index.html的静态内容

  1. 当用户访问http://example.com/appname/abc/def
  2. 应提供http://cdn.us-west-2.edge.aws/666/index.html的静态内容

您通常会将整个域名托pipe在CDN之后,因此,example.com CDN,您将CDNconfiguration为使用一些专用域/ IP来获取文件,客户永远不会直接看到您的网站或更改您的网页/“应用程序“根据需要从另一个域获取一些资源。

你不想通过你的服务器“代理”静态请求。 如果您刚刚返回HTTPredirect,则会大大增加请求延迟(因为客户端现在必须每次都发出第二个请求以获取真实文件)。 更糟糕的是,如果你是代理的请求,那么你放弃了CDN的所有优点,因为现在服务器上传下载每个文件,而不是像正常一样直接提供服务(甚至更糟的是如果CDN回到你的服务器问对于文件本身…)。

因此,一般来说,在NGINX / Apache中没有任何改变。

确保你的内容是caching友好的

避免旧的“清除浏览器caching”问题,减less用户下载(或validation)文件的频率,无论使用CDN还是不使用,都可以看到性能的显着提升。 所以值得一读(例如, Cache-Control头文件,浏览器和CDN如果不存在的话等等)。

让您的应用程序使用独特的url的永不更新的静态文件通常是最好的胜利,特别是因为浏览器不必重新加载它,如CDN边缘caching。 例如app.js?v=fcaf5eed48bapp-fcaf5eed48b.js

CDN

CDN上的整个网站

在这里输入图像说明

用户将连接到附近的CDN节点,然后连接到与服务器通信的CDN。

对于某些CDN,您也可以直接将静态file upload到他们(或者同伴服务,例如Amazon CloudFront + S3),并且您可以在更新时手动清除caching条目,而不使用版本化的URL。

您可能会将API放在另一个域中

对于单页面应用程序来说,它的大部分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"/>在这里输入图像说明