CDN配置单页面应用

SPA单页面应用运行原理

以 vue 项目为例，其它SPA单页面应用同理；应用中所有请求的页面在磁盘中都没有对应的真实文件，页面完全由 index.html 在浏览端进行路由和请求；当浏览器端访问任何页面时，都必须先加载 index.html，index.html 内部再根据 URL 请求路径去服务器请求对应的页面文件，这里的页面文件被打包压缩成了 .js 文件，index.html 通过异步请求的方式来加载这些 .js 页面文件；在 vue 项目中，这些 .js 页面文件会被打包压缩，统一放在打包后的 assets 目录下；因此，在SPA单页面应用中，只有页面没有对应的真实文件，.js、.css、.png等带格式的文件在磁盘上都有对应的真实文件。

重写URL

注：重定向是告知浏览器去请求新URL，浏览器地址会发生变化；重写是指服务器内部将请求URL改成新的URL，然后在内部请求新的URL，浏览器感知不到、地址也不会变化。

服务端重写URL的原理是：当浏览器端访问任何页面时，Web服务器内部都会将请求路径重写为 index.html ，目标就是返回 index.html 文件；但对于非页面请求，如：.js、.css、.png等文件请求，就不能返回 index.html，因为文件是真实存在的。所以单页面应用的Web服务都有一个非常重要的工作，就是区分浏览器请求的是页面还是文件，只有页面才需要返回 index.html 。

1>. Nginx区分页面和文件的方式：

只要浏览器访问的路径不存在，就返回 index.html 文件，相当于重写所有 404 到至 index.html。

2>. CDN区分页面和文件的方式：

URL中包含点"."，就认为是文件，否则就重写请求路径为 Index.html 文件，这是行业内主流的判断方式。

CDN规则工作过程：CDN规则会被分发到所有CDN节点上，当浏览器访问页面时，CDN节点收到请求后先判断重写，然后以重写后的URL请求 index.html 文件；如果CDN节点上有 index.html，则直接返回，否则请求源站。

2>. 对象存储区分页面和文件的方式：

对象存储通常有现成的配置，如下图，有类似“索引文档”这样的配置，其原理就是当请求URL路径不是以文件后缀为结尾时，都返回索引文档文件，即 index.html 。

注：有些对象存储并没有这样的配置，例如：cloudflare R2；但 AWS、腾迅云、Google云都可以配，只是Google云的配置较为复杂。

具体实践

Cloudflare CDN配置重写规则：https://sidoc.cn/doc/1610.html

CDN规则限制

1> 关于CDN配置SPA单页面应用

Cloudflare CDN的免费套餐最多支持添加 10 条规则；腾迅云边缘加速个人版最多支持添加 20 条规则；阿里云边缘存储最多支持添加 10 条规则。

一条规则只能满足一个SPA单页面网站的配置，10条规则也就意味着最多只能配置 10 个网站。对于类似翻译网站这种有大量站点的场景是无法满足需求的，且规则购买费用较贵，扩展也要持续收费。如果要部署文档翻译类网站，最佳做法是在 香港 搭建服务器，然后国内腾迅云或阿里云的边缘存储指向香港服务；同时 Cloudflare CDN 也指向这个香港服务器，这样就可以满足无限增加的SPA单页面网站部署。 为了降低服务器压力，还可以设置CDN边缘节点的缓存时间为1年或更久，然后每次部署版时刷新所有节点缓存。

注：对于非SPA单页面应用，“对象存储 + CDN”仍是最佳方案，因为无需任何配置，且灵活可靠。

2> 关于对象存储配置单页面应用

大部分对象存储都支持单页面应用配置，但都是针对桶的配置，配置并不是很便利和灵活，因为有些站点是非SPA的；而且要将同一个域名从CDN处指向多个存储桶也无法实现； 因此，对象存储这条路对文档翻译类站点也无法满足要求。Cloudflare 有 worker 和 Page 可支持SPA单页面网站，但配置繁琐且不灵活；而且还有每日请求数限制。综上，翻译类网站的最佳部署方式仍是“自建服务+CDN”。

注：Cloudflare R2对象存储不支持SPA单页面配置

CDN配置SPA单页面应用、对象存储配置SPA单页面应用、单页面应用配置原理