小宽带轻量服务器使用又拍云USS加速图片和静态文件的教程

前言

最近入手了一台阿里云学生机,配置为 2 核 CPU、2 GB 内存、2 Mbps 带宽,使用期限为 6 个月。

由于服务器带宽较小,如果博客中使用大量图片或静态资源,访问速度会受到明显影响,尤其是在多人同时访问时,页面加载会更加缓慢。

为减轻源服务器的带宽压力,并提升图片和静态文件的访问速度,我采用了又拍云 USS 与 CDN 结合的加速方案。下面将介绍具体的加速原理、配置步骤,以及又拍云联盟免费加速服务的申请方法。


一、加速方案展示

该方案的基本思路是:
方案展示

  1. 将博客中的图片、CSS、JavaScript 等静态文件上传到又拍云 USS。
  2. 为存储空间绑定 CDN 加速域名。
  3. 将网站原有的静态资源地址替换为 CDN 地址。
  4. 用户访问网站时,由距离用户较近的 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 注册并登录又拍云

访问又拍云官网

  1. 点击页面右上角的“注册”按钮。
  2. 根据提示填写相关信息。
  3. 完成账号注册和实名认证。
  4. 使用账号登录又拍云管理控制台。

3.2 创建云存储服务

登录控制台后,按照以下步骤操作:

  1. 在控制台中找到“云存储”或“云存储服务”。
  2. 点击“创建服务”或“新建存储”。
  3. 填写服务名称。
  4. 根据实际需求选择服务类型。
  5. 配置访问控制、存储区域等选项。
  6. 确认配置后,点击“创建”。

服务名称通常只能使用符合平台要求的英文、数字或特定字符,创建后可能无法随意修改,建议提前规划。

图片示例:

20240411232042.png

3.3 创建操作员并设置权限

为了通过工具、程序或 API 管理 USS 文件,通常需要创建操作员。

  1. 进入又拍云控制台。
  2. 找到“账户管理”或“操作员管理”。
  3. 点击“创建操作员”。
  4. 设置操作员名称和密码。
  5. 为操作员分配对应云存储服务。
  6. 根据需求授予读取、写入或删除权限。

建议遵循最小权限原则,不要为普通上传工具授予不必要的管理权限。

操作员密码应妥善保存,不要直接写入公开网页或提交到公开代码仓库。


3.4 上传文件至又拍云 USS

进入刚刚创建的云存储服务后:

  1. 打开文件管理页面。
  2. 点击“上传文件”。
  3. 选择需要上传的图片或静态资源。
  4. 等待上传完成。
  5. 在文件列表中确认文件是否存在。

图片示例:

20240411232104.png

建议根据资源类型建立不同目录,例如:

/images/
/css/
/js/
/fonts/
/uploads/

这样方便后期管理和配置缓存规则。


3.5 获取文件访问地址

在存储空间中找到已经上传的文件:

  1. 点击文件名称或文件详情。
  2. 查看文件路径。
  3. 通过默认测试域名或已绑定的加速域名访问文件。
  4. 复制完整的文件 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 绑定加速域名

在又拍云控制台中:

  1. 进入对应的云存储服务。
  2. 找到“域名管理”或“加速域名”。
  3. 点击“绑定域名”。
  4. 输入准备好的二级域名。
  5. 根据提示完成域名验证。
  6. 保存配置。

平台会提供一个需要解析的 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 天
CSS7~30 天
JavaScript7~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 使用浏览器测试

  1. 清除浏览器缓存。
  2. 使用无痕模式打开网站。
  3. 按下 F12 打开开发者工具。
  4. 进入“网络”或“Network”页面。
  5. 刷新网页。
  6. 查看图片和静态文件的请求域名。
  7. 确认资源已经通过 CDN 域名加载。

6.2 查看响应头

在浏览器开发者工具中点击某个静态资源,查看响应头。

不同 CDN 的响应头名称可能不同,可以重点查看:

  • Cache-Control
  • Age
  • Via
  • X-Cache
  • Last-Modified
  • ETag

如果响应显示缓存命中,通常说明 CDN 已经开始提供缓存内容。

首次访问时可能处于回源状态,再次刷新后才会命中缓存。


6.3 使用命令测试

可以执行:

curl -I https://static.example.com/images/demo.png

查看文件的响应状态和缓存相关信息。

正常情况下,应返回:

HTTP/2 200

或:

HTTP/1.1 200 OK

6.4 测试不同地区的访问速度

可以使用网站测速工具测试:

  • 不同省份的访问速度
  • 移动、联通、电信三网速度
  • 首次访问时间
  • 缓存命中后的访问时间
  • 图片和静态资源加载时间

测试时应分别观察主站 HTML 和 CDN 静态资源,避免将两者混为一谈。


七、又拍云联盟免费加速服务

7.1 又拍云联盟简介

又拍云联盟是又拍云面向开发者和站长推出的扶持计划。

符合条件的网站申请通过后,可以获得一定额度的云存储和 CDN 资源,用于网站图片、附件和静态资源加速。

又拍云联盟的具体赠送额度、有效期和申请规则可能会调整,请以官方最新页面显示的信息为准。

申请入口:

又拍云联盟


7.2 申请加入又拍云联盟

  1. 登录又拍云管理控制台。
  2. 找到“又拍云联盟”或开发者扶持计划入口。
  3. 阅读并同意联盟服务条款。
  4. 点击“申请加入”。
  5. 填写网站名称、网站地址、联系人和邮箱等信息。
  6. 提交申请。
  7. 等待官方审核。

审核时间通常以平台实际提示为准。

申请网站一般需要满足以下条件:

  • 网站能够正常访问
  • 网站具有一定数量的有效内容
  • 不包含违法违规内容
  • 已经使用又拍云相关服务
  • 页面中按要求展示又拍云联盟标识和链接

7.3 联盟资源和使用规则

又拍云联盟赠送的资源、代金券额度和有效期可能会根据活动规则调整。

使用时应注意:

  • 按要求保留又拍云联盟 Logo 和链接
  • 不要擅自隐藏、删除或遮挡联盟标识
  • 不要将赠送资源用于违规内容
  • 及时关注代金券有效期
  • 重新申请代金券前,确认旧代金券是否会失效
  • 以又拍云联盟当前服务条款为准

如果删除联盟 Logo 或不再满足联盟要求,赠送资源可能被停止。


八、配置联盟免费 CDN 加速

审核通过后,可以返回又拍云控制台继续配置:

  1. 创建或选择已有云存储服务。
  2. 绑定 CDN 加速域名。
  3. 设置 CNAME 解析。
  4. 配置 HTTPS 证书。
  5. 设置缓存规则。
  6. 上传图片和静态资源。
  7. 将网站资源地址替换为 CDN 地址。
  8. 测试缓存和访问速度。

如果之前已经完成 USS 和 CDN 配置,一般不需要重新创建服务,只需确认联盟赠送资源已经正常发放。


九、为网站添加又拍云联盟 Logo

根据联盟规则,需要在网站页面中添加又拍云联盟 Logo 和链接。

可以将以下 HTML 代码添加到主题的页脚文件中。

例如,Typecho 主题通常可以添加到:

/usr/themes/当前主题/footer.php

HTML 代码:

<!-- 又拍云联盟 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=2

10.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 加速网站中的图片和静态文件。

整个方案的核心流程如下:

  1. 注册并登录又拍云。
  2. 创建 USS 云存储服务。
  3. 上传图片和静态文件。
  4. 绑定独立的 CDN 加速域名。
  5. 配置 CNAME 和 HTTPS。
  6. 设置合理的缓存规则。
  7. 替换网站中的静态资源地址。
  8. 测试 CDN 缓存和访问速度。
  9. 申请又拍云联盟免费资源。
  10. 按要求在网站中添加联盟 Logo。

对于带宽较小的轻量服务器来说,将图片和静态文件迁移到云存储和 CDN,可以有效减少源服务器的流量消耗,提高页面加载速度,并改善不同地区用户的访问体验。

评论区
头像