京东大促同款：零门槛一键切换静态兜底CDN页面实操指南

前期准备：核心工具与资源（5分钟搞定） 工具清单 本指南全程用免费工具，无需编程基础 1. CDN服务：选择七牛云（新用户免费10GB存储+10GB流量/月），直接复制链接注册登录：https://s.qiniu.com/3263u2 2. 静态兜底页面模板：从GitHub Gist复制完整代码，无需修改即可用，代码块如下 ```html ``` 3. 现有域名（没有的话先跳过兜底CNAME绑定，仅验证本地+七牛云的切换逻辑） 第一步：上传静态兜底页面到七牛云CDN 操作步骤 1. 登录七牛云控制台，左侧菜单点击「对象存储」→「空间管理」→「新建空间」 2. 空间创建必填项： - 空间名称：随意填（比如`jd-style-fallback-202X`） - 存储区域：选离你现有服务器最近的（比如「华东-浙江2」） - 访问控制：必须选「公开空间」（否则兜底页面无法对外访问） 3. 点击「确定创建」后，进入刚建的空间，点击「文件管理」→「上传文件」 4. 点击「选择文件」，找到刚才保存的`index.html`（建议把模板另存为这个名字），点击「开始上传」 5. 上传成功后，点击文件右侧的「详情」，复制「外链地址」（格式类似`https://xxx.clouddn.com/index.html`），保存到记事本备用 第二步：配置七牛云CDN的一键回源切换 前置说明 这里用「七牛云CDN的自定义域名+重定向规则」实现：正常访问时跳转到你的原站，异常时（手动触发）跳转到静态兜底页面 自定义域名绑定（必须有域名） 1. 回到七牛云「对象存储」→「空间管理」，找到刚建的空间，点击「域名管理」→「绑定域名」 2. 必填配置项： - 绑定域名：填你需要做兜底的主域名或子域名（比如`fallback.yourdomain.com`，或者直接`www.yourdomain.com`——如果主站用七牛云加速的话更方便） - 源站配置：选「我的空间」→「刚才创建的兜底空间」 - 加速区域：选「中国大陆」（免费额度支持） 3. 点击「确定」后，七牛云会给你分配一个CNAME地址（格式类似`xxx.clouddn.com`），复制保存 4. 登录你的域名服务商控制台（比如阿里云、腾讯云），找到域名「DNS解析」→「添加记录」： - 主机记录：填刚才绑定的子域名前缀（比如`www`或`fallback`） - 记录类型：选「CNAME」 - 记录值：填七牛云分配的CNAME地址 - TTL：默认或选600秒（生效更快） 5. 等待DNS生效（一般1-10分钟），可以在本地电脑打开命令行（Windows按Win+R输入cmd，Mac/Linux打开终端），输入`ping 绑定的域名`，如果返回的IP开头是七牛云的（比如华东区域是111.开头），说明绑定成功 配置回源/兜底重定向规则（核心操作） 1. 回到七牛云「对象存储」→「空间管理」→刚建的空间→「域名管理」，点击刚才绑定的域名右侧的「管理」 2. 左侧菜单点击「访问控制」→「重定向规则」→「添加规则」 3. 正常访问规则（优先级设为1）： - 规则名称：`正常跳转原站` - 优先级：1（数字越小优先级越高） - 触发条件： - 路径匹配：选「前缀匹配」，填`/`（匹配所有请求） - 添加条件：选「Query参数匹配」，参数名填`fallback`，参数值填`off`，匹配方式选「完全匹配」 - 执行动作：选「URL重定向」 - 重定向类型：选「302临时重定向」（大促后可改回原站，302不影响SEO） - 重定向URL：填你的完整原站地址（比如`https://www.yourdomain.com$request_uri`——`$request_uri`是七牛云变量，保留原请求路径和参数，体验更好） - 点击「确定」 4. 兜底规则（优先级设为2）： - 规则名称：`静态兜底` - 优先级：2 - 触发条件： - 路径匹配：选「前缀匹配」，填`/`（匹配所有剩下的请求） - 执行动作：选「文件重写」 - 重写路径：填`/index.html` - 点击「确定」 第三步：验证本地切换逻辑 正常状态验证 1. 打开刚才保存的七牛云兜底文件的「外链地址」，在浏览器地址栏末尾加上`?fallback=off` 2. 按回车，应该能302跳转到你的原站 兜底状态验证 1. 去掉地址栏的`?fallback=off` 2. 按回车，应该能显示静态兜底页面 第四步：一键切换脚本（30秒触发） 脚本准备 无需开发环境，直接用浏览器书签栏的「书签脚本」实现，步骤如下 1. 打开你的浏览器（Chrome、Edge、Safari等都支持） 2. 添加正常状态书签： - 右键点击书签栏空白处，选「添加书签」（或「添加到收藏夹」） - 名称：填「切换到正常模式」 - 网址：复制下面的完整代码（注意替换`你的绑定域名`为刚才的域名） ```javascript javascript:(function(){var d=location.hostname;location.href='https://你的绑定域名?fallback=off';})() ``` - 点击「保存」 3. 添加兜底状态书签： - 同样右键点击书签栏空白处，选「添加书签」 - 名称：填「切换到兜底模式」 - 网址：复制下面的完整代码（同样替换`你的绑定域名`） ```javascript javascript:(function(){var d=location.hostname;location.href='https://你的绑定域名';})() ``` - 点击「保存」 书签脚本验证 1. 确保你的域名已经解析到七牛云CNAME 2. 点击书签栏的「切换到正常模式」，应该跳转到带`?fallback=off`的绑定域名，再302到原站 3. 点击书签栏的「切换到兜底模式」，应该跳转到不带参数的绑定域名，显示静态页面 进阶优化（可选，提升大促体验） 优化1：修改静态页面内容 直接用记事本或VSCode打开`index.html`，修改以下部分后重新上传到七牛云空间（覆盖原文件）： - `