如何托管我的 SPA？让 example.com/spa 指向 CDN？

Question

当前状态

我有一个针对后端服务器运行的现有 SPA 应用程序。

我通过以下方式在我的生产服务器上设置了 Apache：

• DNS example.com 指向我的生产服务器。有适用于我的域的具有正确 SSL 配置的 Apache
• example.com/frontend 指向部署在我服务器文件夹中的 SPA 文件 (js/css/...)
• example.com/ 指向我在同一台服务器上运行的后端

我想做的事

我正在尝试将我的前端资产部署到 CDN。这里有很多选择，但我不是在寻找关于选择哪一个的建议。

问题

如果我将我的应用部署到 CDN，文件将不再托管在我的生产服务器上。所以我会在 example.com 上拥有我的后端，在 myapp.cdn.com 上拥有 SPA

据我所知，在 DNS 级别使 example.com/cdn 指向 CDN 文件是不可能的。充其量我可以创建另一个域 cdn.example.com 并使其指向 myapp.cdn.com 但不幸的是，在我的情况下这是不可能的......

Safari History API 中存在其他浏览器所没有的不一致行为。

我的 index html 页面由我的后端服务器 (https://example.com/) 提供服务，并将我的前端 url (https://example.com/frontend) 设置为基本 url。它目前在所有浏览器中都可以正常工作，因为它是同一个域。

在 Safari 中，如果您设置的基础网址与后端基础网址不同（例如，使用 https://frontend.example.com/ 作为基础网址而不是 https://example.com/frontend），则存在阻止我的应用使用 HMTL5 的安全异常History API 正常。

我在寻找什么

我已经知道一些替代选项，例如直接在前端提供我的 index.html 页面，或者不使用基本 URL。目前不寻找此类解决方案（即使我正在考虑将它们用于长期更改）

在与我的后端服务器 (example.com) 相同的域中，使路径（例如 example.com/cdn）指向我的 CDN 文件的最佳方法是什么？

我正在寻找一种可用于生产的解决方案，它的性能保持正确，并且我的 CDN 功能仍在发挥作用（etags 缓存、HTTP2...）

我认为我的 Apache 服务器最终可以接收 /cdn 上的所有请求，并永久重定向到 CDN 域。即使它涉及第一次服务的额外往返，只要这只是第一次，我就可以接受。对您来说，它看起来像是一个生产就绪的选项吗？有没有像样的替代品？

Answer 1

通常您希望您的前端在根域example.com/ 中可用，不是吗？后端可以在任何地方，没关系，因为没有用户会看到它。

我的建议：

• 使用可让您使用自己的域名的 CDN
• 使用 CDN，它只是一个缓存代理，而不是您手动将静态文件推送到的东西
• 设置您的 DNS 以将 example.com 指向 CDN 服务器
• 在 backend.example.com 设置您的后端，而不是 CDN
• 设置CDN从backend.example.com拉取文件
• 向example.com/api/...发出后端请求

  +-----+
  | CDN | \
  +-----+  \
example.com \
             \
  +-----+     \  +--------+
  | CDN | ------ | origin |
  +-----+     /  +--------+
example.com  backend.example.com
            /
  +-----+  /
  | CDN | /
  +-----+
example.com

这边：

• example.com/ 是您唯一的全球可见 URL
• 文件布局完全镜像源站，不需要有两个版本
• 所有请求都通过 CDN 进行代理，包括后端请求，如果您正确使用缓存，这会减少后端服务器的负载并加快前端响应速度