前言
最近入手了一台阿里云学生机,配置为 2 核 CPU、2 GB 内存、2 Mbps 带宽,使用期限为 6 个月。
由于服务器带宽较小,如果博客中使用大量图片或静态资源,访问速度会受到明显影响,尤其是在多人同时访问时,页面加载会更加缓慢。
为减轻源服务器的带宽压力,并提升图片和静态文件的访问速度,我采用了又拍云 USS 与 CDN 结合的加速方案。下面将介绍具体的加速原理、配置步骤,以及又拍云联盟免费加速服务的申请方法。
一、加速方案展示
- 将博客中的图片、CSS、JavaScript 等静态文件上传到又拍云 USS。
- 为存储空间绑定 CDN 加速域名。
- 将网站原有的静态资源地址替换为 CDN 地址。
- 用户访问网站时,由距离用户较近的 CDN 节点提供资源。
这样可以减少源服务器的流量消耗,并提升网站静态资源的加载速度。
二、加速原理分析
2.1 内容分发网络(CDN)
又拍云通过内容分发网络,将图片和静态文件缓存到多个 CDN 节点。
当用户访问网站时,CDN 会根据用户所在区域、网络状况和节点负载,将请求分配到合适的节点。相比直接从源服务器加载资源,这种方式可以减少网络延迟,提升图片、CSS 和 JavaScript 文件的加载速度。
对于带宽较小的轻量服务器来说,使用 CDN 能够显著降低源服务器的出口带宽压力。
2.2 缓存机制
又拍云 CDN 会按照缓存规则,将访问过的静态资源保存在边缘节点中。
当其他用户再次请求相同文件时,如果缓存仍然有效,CDN 节点会直接返回缓存内容,无需再次向源服务器获取。
这样可以带来以下优势:
- 减少源服务器带宽消耗
- 降低源服务器负载
- 提升静态文件加载速度
- 缩短用户访问延迟
- 提高网站访问稳定性
2.3 USS 云存储
USS 是又拍云提供的云存储服务,可以用于保存以下内容:
- 图片
- 视频
- CSS 文件
- JavaScript 文件
- 字体文件
- 压缩包
- 其他静态资源
将静态文件保存到 USS 后,再通过 CDN 加速域名对外访问,可以实现“云存储+CDN”的静态资源加速方案。
三、配置又拍云 USS 加速图片和静态文件
3.1 注册并登录又拍云
访问又拍云官网。
- 点击页面右上角的“注册”按钮。
- 根据提示填写相关信息。
- 完成账号注册和实名认证。
- 使用账号登录又拍云管理控制台。
3.2 创建云存储服务
登录控制台后,按照以下步骤操作:
- 在控制台中找到“云存储”或“云存储服务”。
- 点击“创建服务”或“新建存储”。
- 填写服务名称。
- 根据实际需求选择服务类型。
- 配置访问控制、存储区域等选项。
- 确认配置后,点击“创建”。
服务名称通常只能使用符合平台要求的英文、数字或特定字符,创建后可能无法随意修改,建议提前规划。
图片示例:
20240411232042.png3.3 创建操作员并设置权限
为了通过工具、程序或 API 管理 USS 文件,通常需要创建操作员。
- 进入又拍云控制台。
- 找到“账户管理”或“操作员管理”。
- 点击“创建操作员”。
- 设置操作员名称和密码。
- 为操作员分配对应云存储服务。
- 根据需求授予读取、写入或删除权限。
建议遵循最小权限原则,不要为普通上传工具授予不必要的管理权限。
操作员密码应妥善保存,不要直接写入公开网页或提交到公开代码仓库。
3.4 上传文件至又拍云 USS
进入刚刚创建的云存储服务后:
- 打开文件管理页面。
- 点击“上传文件”。
- 选择需要上传的图片或静态资源。
- 等待上传完成。
- 在文件列表中确认文件是否存在。
图片示例:
20240411232104.png建议根据资源类型建立不同目录,例如:
/images/
/css/
/js/
/fonts/
/uploads/这样方便后期管理和配置缓存规则。
3.5 获取文件访问地址
在存储空间中找到已经上传的文件:
- 点击文件名称或文件详情。
- 查看文件路径。
- 通过默认测试域名或已绑定的加速域名访问文件。
- 复制完整的文件 URL。
例如:
https://static.example.com/images/demo.png建议正式使用时绑定自己的独立域名,不要长期依赖平台提供的测试域名。
四、配置 CDN 加速域名
4.1 准备加速域名
建议使用独立的二级域名作为静态资源域名,例如:
static.example.com也可以使用:
cdn.example.com
img.example.com
assets.example.com不要直接使用主站域名作为静态资源域名,以免影响主站解析和后续维护。
4.2 绑定加速域名
在又拍云控制台中:
- 进入对应的云存储服务。
- 找到“域名管理”或“加速域名”。
- 点击“绑定域名”。
- 输入准备好的二级域名。
- 根据提示完成域名验证。
- 保存配置。
平台会提供一个需要解析的 CNAME 地址。
4.3 配置 CNAME 解析
登录域名 DNS 管理平台,添加一条 CNAME 记录。
例如:
| 配置项 | 示例 |
|---|---|
| 记录类型 | CNAME |
| 主机记录 | static |
| 记录值 | 又拍云提供的 CNAME 地址 |
| TTL | 默认 |
保存后,需要等待 DNS 解析生效。
可以通过以下命令检查解析结果:
nslookup static.example.com或者:
ping static.example.com需要注意的是,部分 CDN 节点可能不会响应 Ping,因此 Ping 不通并不一定代表 CDN 配置失败。
4.4 配置 HTTPS
建议为加速域名启用 HTTPS。
可以选择:
- 上传已有的 SSL 证书
- 使用又拍云提供的证书申请功能
- 配置自动续期证书
启用 HTTPS 后,建议同时开启:
- HTTP 自动跳转 HTTPS
- TLS 1.2 或更高版本
- HTTP/2
- HTTPS 强制访问
如果主站已经启用 HTTPS,而静态资源仍使用 HTTP,浏览器可能会出现混合内容警告,导致部分资源无法正常加载。
4.5 配置缓存规则
可以根据文件类型设置不同的缓存时间。
参考规则如下:
| 文件类型 | 建议缓存时间 |
|---|---|
| 图片 | 30 天 |
| CSS | 7~30 天 |
| JavaScript | 7~30 天 |
| 字体文件 | 30 天 |
| 视频 | 7~30 天 |
| HTML | 不缓存或短时间缓存 |
常见图片扩展名:
jpg
jpeg
png
gif
webp
avif
svg
ico常见静态资源扩展名:
css
js
woff
woff2
ttf
eot如果网站经常更新同名 CSS 或 JavaScript 文件,建议采用版本号方式避免旧缓存,例如:
style.css?v=20260411或者直接修改文件名:
style-20260411.css五、更新网站中的静态资源链接
完成 USS 和 CDN 配置后,需要将网站原有的图片和静态文件地址替换为 CDN 地址。
原地址示例:
https://blog.example.com/usr/uploads/2024/04/demo.png替换为:
https://static.example.com/usr/uploads/2024/04/demo.png可以替换的资源包括:
- 文章图片
- 网站 Logo
- CSS 文件
- JavaScript 文件
- 字体文件
- 主题背景图
- 用户头像
- 下载附件
修改完成后,保存并上传相关代码或配置。
5.1 Typecho 网站替换方式
如果使用 Typecho,可以通过以下方式实现:
- 在主题设置中修改静态资源地址
- 使用对象存储或 CDN 插件
- 修改主题模板中的资源链接
- 批量替换数据库中的旧图片地址
- 设置上传附件的 CDN 前缀
批量修改数据库前,务必先备份数据库。
不要直接在没有备份的情况下执行全库替换,否则可能导致文章内容或附件地址异常。
5.2 WordPress 网站替换方式
如果使用 WordPress,可以选择:
- 对象存储插件
- CDN 插件
- 数据库搜索替换插件
- 在主题中设置静态资源域名
- 配置反向代理回源
替换数据库地址时,需要注意 WordPress 中可能存在序列化数据,不建议直接使用普通 SQL 进行不受控制的全局替换。
六、测试 CDN 加速效果
完成配置后,可以通过以下方式测试。
6.1 使用浏览器测试
- 清除浏览器缓存。
- 使用无痕模式打开网站。
- 按下
F12打开开发者工具。 - 进入“网络”或“Network”页面。
- 刷新网页。
- 查看图片和静态文件的请求域名。
- 确认资源已经通过 CDN 域名加载。
6.2 查看响应头
在浏览器开发者工具中点击某个静态资源,查看响应头。
不同 CDN 的响应头名称可能不同,可以重点查看:
Cache-ControlAgeViaX-CacheLast-ModifiedETag
如果响应显示缓存命中,通常说明 CDN 已经开始提供缓存内容。
首次访问时可能处于回源状态,再次刷新后才会命中缓存。
6.3 使用命令测试
可以执行:
curl -I https://static.example.com/images/demo.png查看文件的响应状态和缓存相关信息。
正常情况下,应返回:
HTTP/2 200或:
HTTP/1.1 200 OK6.4 测试不同地区的访问速度
可以使用网站测速工具测试:
- 不同省份的访问速度
- 移动、联通、电信三网速度
- 首次访问时间
- 缓存命中后的访问时间
- 图片和静态资源加载时间
测试时应分别观察主站 HTML 和 CDN 静态资源,避免将两者混为一谈。
七、又拍云联盟免费加速服务
7.1 又拍云联盟简介
又拍云联盟是又拍云面向开发者和站长推出的扶持计划。
符合条件的网站申请通过后,可以获得一定额度的云存储和 CDN 资源,用于网站图片、附件和静态资源加速。
又拍云联盟的具体赠送额度、有效期和申请规则可能会调整,请以官方最新页面显示的信息为准。
申请入口:
7.2 申请加入又拍云联盟
- 登录又拍云管理控制台。
- 找到“又拍云联盟”或开发者扶持计划入口。
- 阅读并同意联盟服务条款。
- 点击“申请加入”。
- 填写网站名称、网站地址、联系人和邮箱等信息。
- 提交申请。
- 等待官方审核。
审核时间通常以平台实际提示为准。
申请网站一般需要满足以下条件:
- 网站能够正常访问
- 网站具有一定数量的有效内容
- 不包含违法违规内容
- 已经使用又拍云相关服务
- 页面中按要求展示又拍云联盟标识和链接
7.3 联盟资源和使用规则
又拍云联盟赠送的资源、代金券额度和有效期可能会根据活动规则调整。
使用时应注意:
- 按要求保留又拍云联盟 Logo 和链接
- 不要擅自隐藏、删除或遮挡联盟标识
- 不要将赠送资源用于违规内容
- 及时关注代金券有效期
- 重新申请代金券前,确认旧代金券是否会失效
- 以又拍云联盟当前服务条款为准
如果删除联盟 Logo 或不再满足联盟要求,赠送资源可能被停止。
八、配置联盟免费 CDN 加速
审核通过后,可以返回又拍云控制台继续配置:
- 创建或选择已有云存储服务。
- 绑定 CDN 加速域名。
- 设置 CNAME 解析。
- 配置 HTTPS 证书。
- 设置缓存规则。
- 上传图片和静态资源。
- 将网站资源地址替换为 CDN 地址。
- 测试缓存和访问速度。
如果之前已经完成 USS 和 CDN 配置,一般不需要重新创建服务,只需确认联盟赠送资源已经正常发放。
九、为网站添加又拍云联盟 Logo
根据联盟规则,需要在网站页面中添加又拍云联盟 Logo 和链接。
可以将以下 HTML 代码添加到主题的页脚文件中。
例如,Typecho 主题通常可以添加到:
/usr/themes/当前主题/footer.phpHTML 代码:
<!-- 又拍云联盟 Logo -->
<div class="upyun-badge">
<a
href="https://www.upyun.com/?utm_source=upyun-union&utm_medium=link&utm_campaign=upyun-union-link"
target="_blank"
rel="noopener noreferrer"
>
<img
src="https://blog.lixinbk.cn/upylogo.png"
alt="又拍云联盟"
width="250"
height="16"
>
</a>
</div>建议将 Logo 图片保存到自己的 USS 存储空间中,避免依赖其他网站的图片地址。
9.1 添加自定义 CSS
将以下样式添加到主题的 CSS 文件中:
/* 又拍云联盟 Logo 样式 */
.upyun-badge {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
padding: 8px 0;
font-size: 13px;
color: #999;
opacity: 0.8;
transition: opacity 0.3s ease;
}
.upyun-badge:hover {
opacity: 1;
}
.upyun-badge a {
display: inline-flex;
align-items: center;
justify-content: center;
}
.upyun-badge img {
display: block;
width: auto;
max-width: 250px;
height: 16px;
margin: 0 5px;
vertical-align: middle;
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.upyun-badge:hover img {
filter: grayscale(0%);
}修改完成后,清除网站缓存和 CDN 缓存,再刷新页面检查显示效果。
十、常见问题
10.1 CDN 配置后无法访问文件
可以检查以下内容:
- CNAME 是否解析正确
- 域名是否已经绑定到对应服务
- 文件路径是否正确
- 存储空间是否允许公开读取
- HTTPS 证书是否正常
- 域名是否处于审核或配置中
- CDN 配置是否已经生效
10.2 修改文件后内容没有更新
通常是 CDN 缓存仍未过期。
解决方法包括:
- 在控制台手动刷新缓存
- 修改文件名称
- 为 URL 添加版本参数
- 缩短对应文件的缓存时间
例如:
style.css?v=210.3 图片返回 403
可能原因包括:
- 防盗链配置错误
- Referer 白名单不完整
- 文件访问权限受限
- Token 防盗链参数错误
- 域名未正确绑定
- 操作员权限不足
建议先暂时关闭防盗链进行测试,确认文件能够正常访问后,再逐步恢复安全策略。
10.4 网站启用 HTTPS 后图片不显示
检查图片链接是否仍为:
http://应统一修改为:
https://或者使用相对协议和相对路径。
同时确认 CDN 域名已经正确配置 SSL 证书。
10.5 CDN 流量消耗过快
可以采取以下措施:
- 压缩图片
- 使用 WebP 或 AVIF
- 限制大文件下载
- 开启防盗链
- 设置合理缓存时间
- 检查是否被恶意刷流量
- 查看访问日志中的异常 IP
- 限制不必要的海外访问
- 避免在外部网站直接引用大文件
十一、使用建议
对于 2 Mbps 带宽的轻量服务器,建议将以下资源迁移到 USS 和 CDN:
- 文章图片
- 网站 Logo
- 主题背景图
- CSS 文件
- JavaScript 文件
- 字体文件
- 下载附件
而以下内容可以继续由源服务器提供:
- HTML 页面
- PHP 动态请求
- 后台管理页面
- 数据库查询结果
- 用户登录和评论请求
这样既可以降低服务器带宽压力,也能避免将动态内容错误缓存。
十二、总结
通过以上步骤,可以在小带宽轻量服务器上完成又拍云 USS 与 CDN 的配置,并使用 CDN 加速网站中的图片和静态文件。
整个方案的核心流程如下:
- 注册并登录又拍云。
- 创建 USS 云存储服务。
- 上传图片和静态文件。
- 绑定独立的 CDN 加速域名。
- 配置 CNAME 和 HTTPS。
- 设置合理的缓存规则。
- 替换网站中的静态资源地址。
- 测试 CDN 缓存和访问速度。
- 申请又拍云联盟免费资源。
- 按要求在网站中添加联盟 Logo。
对于带宽较小的轻量服务器来说,将图片和静态文件迁移到云存储和 CDN,可以有效减少源服务器的流量消耗,提高页面加载速度,并改善不同地区用户的访问体验。
