如何配置 Nginx 以提供来自 CDN 的静态文件

Question

我有一个 SPA ( ReactJSwith React-Router)index.html用作入口点。为了使前端路由器正常工作，我需要index.html为所有匹配的 URL 返回文件。

我试过使用但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但这似乎只适用于本地文件。

我想要达到的效果，

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应提供静态内容

Answer 1

您通常会在 CDN 后面托管您的整个域，因此 example.com是CDN，并且您将 CDN 配置为使用某些私有域/IP 来获取文件，客户永远不会直接看到您的站点或更改您的页面/“ app”以根据需要从另一个域获取一些资源。

您不想通过服务器“代理”静态请求。如果您只是返回 HTTP 重定向，那么您会大大增加请求延迟（因为客户端现在每次都必须发出第二个请求才能获取真实文件）。更糟糕的是，如果您代理请求，那么您就放弃了 CDN 的所有优势，因为现在服务器同时上传和下载每个文件，而不是像平常一样直接提供服务（更糟糕的是，如果 CDN 返回到您的服务器询问对于文件本身......）。

因此，一般来说，NGINX/Apache 没有什么可改变的。

确保您的内容对缓存友好

无论是否使用 CDN，避免旧的“清除浏览器缓存”问题并减少用户必须下载（或验证）文件的频率都是有用的，并且可以看到一些巨大的性能改进。所以它值得一读（例如，Cache-Control标头做什么，浏览器做什么，如果不存在，CDN 会做什么，等等）。

使您的应用程序对从未更新的静态文件使用唯一 URL通常是最好的选择，尤其是因为浏览器永远不必重新加载它，就像 CDN 边缘缓存一样。例如app.js?v=fcaf5eed48b或app-fcaf5eed48b.js。

CDN

CDN 上的整个站点

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

对于某些 CDN，您还可以直接将静态文件上传到它们（或配套服务，例如 Amazon CloudFront+S3），如果您不使用版本化 URL，则可以在更新时手动清除缓存整体。

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

对于单页应用程序，它的大部分动态内容可能来自 XHR“REST”请求，并且在许多设计中，您不能或只是不会为这些应用程序实现合适的缓存，因此 CDN 只会增加延迟和费用。因此，您可以使用不在 CDN 上的其他域名。

您必须更改您的 JS 应用程序以使用 api 域，例如，而不是$.get('/api/posts')您希望它这样做$.get('https://api.example.com/api/posts')。不同的 JavaScript 库可能会提供各种方法来做到这一点。

只是静态文件

如果您有很多动态页面（SPA 的情况较少），那么再次通过 CDN 会增加页面加载延迟（因为 CDN 无法很好地缓存它）。因此，您将主域保留在服务器上，并将静态内容单独放在 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"/>.