优点:CDN 不仅提高了用户访问的速度,还有效减轻了主站点的负载,提升了整体系统性能。
前提及准备:Linux系统,Nginx下载配置,一个html文件及相关链接信息(图片或文件),阿里云购买CDN,a.online
域名注册备案
Linux下存放资源路径:
MyHome.html内容
xml
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的首页</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1em 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
.image-gallery {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.image-item {
margin: 20px;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<header>
<h1>欢迎来到我的首页</h1>
</header>
<div class="container">
<h2>图片展示</h2>
<div class="image-gallery">
<div class="image-item">
<img src="http://site1-cdn.codingjudyzhengwill.online/image/image1.jpg"alt="图片1">
<p>描述1</p>
</div>
<div class="image-item">
<img src="http://site1-cdn.codingjudyzhengwill.online/image/image2.jpg" alt="图片2">
<p>描述2</p>
</div>
<div class="image-item">
<img src="http://site1-cdn.codingjudyzhengwill.online/image/image3.jpg" alt="图片3">
<p>描述3</p>
</div>
<div class="image-item">
<img src="http://site1-cdn.codingjudyzhengwill.online/image/image4.jpg" alt="图片4">
<p>描述4</p>
</div>
</div>
</div>
</body>
</html>
阿里云上相关操作
根据解释,我们把名称与负责的事情定义及梳理一下:
-
主站点(site1.a.online) :
- 该域名为主站点,用户可以直接通过此地址访问服务器。主站点一般用于存放动态内容和不容易缓存的资源。用户通过这个地址访问时,请求会直接到达后端服务器,以获取最新的内容和服务。
-
CDN 域名(site1-cdn.a.online) :
- 该域名是用于 CDN 加速的次级域名。用户请求首先会发往此 CDN 域名,CDN 服务器会检查请求的资源是否已经被缓存。
1. 具体工作流程
-
用户访问 site1-cdn.a.online 进行资源请求。
-
CDN 服务器检查该请求资源是否在其缓存中:
- 如果缓存命中:CDN 直接返回缓存内容。
- 如果缓存未命中 :CDN 服务器向 site1.a.online 发送请求以获取最新内容,并将此内容缓存于 CDN 之上。
2. 添加加速域名
CDN-内容分发服务-域名管理-添加域名
点击下方 新增源站信息
点击 √ 我理解同意...
点击下一步,选择 一键配置
3. 对域名进行解析设置
可以点击完成后按钮跳转到解析设置界面,也可以按下方路径: 云解析 DNS (aliyun.com)-公网DNS解析-权威解析
右侧:选择需要域名-点击 解析设置- 添加记录
3.1 对site1.a.online添加记录
点击添加记录:记录值填写服务器域名 完成nginx配置,上传文件到linux后可以进行访问,输入site1.a.online,可以访问网页~
3.2 对site1-cdn.a.online添加记录
添加记录:记录值为之前copy的值
回到域名管理界面进行刷新或用方法检测是否配置成功~
有红色框内容代表成功。
linux系统
1. nginx配置文件
以下是site1.a.online和site1-cdn.a.online基本的 Nginx 配置示例,在 /etc/nginx/sites-enabled
文件中进行配置:
vim site1
并保存退出
ini
server {
listen 80;
server_name site1.codingjudyzhengwill.online;
location / {
root /usr/share/nginx-test/judy;
index MyHome.html;
}
}
vim site1cdn
并保存退出
ini
server {
listen 80;
server_name site1-cdn.codingjudyzhengwill.online;
location / {
root /usr/share/nginx-test/judy;
index MyHome.html;
}
}
检查nginx格式并刷新
nginx -t
systemctl reload nginx
也可以使用nginx -s reload
重新加载
2. 实现效果
F12-网络-选择某张图片,查看
X-Cache:
- HIT代表从CDN取到
- MISS代表未取到,从原址拿的
出现X-Cache代表访问时经过了CDN加速,则成功~
过程中用到的其他测试方法
tail -f /var/log/nginx/access.log
查看回访日志
测试正确的信息
新开一个命令窗口:
对无法输出的资源进行赋值
bash
echo haha > favicon.ico
输出
bash
curl http://site1-cdn.a.online/favicon.ico -o test1
cat test1
- 会输出
haha
- 查看access.log数据,除了第一次加载的信息,在cdn取到值后不产生日志
测试错误的数据
arduino
curl http://site1-cdn.a.online/404notfound.ico
- 查看access.log数据,每刷新一次均产生一次数据,代表从源站站点取数据了
参考文档:
快速添加域名接入CDN加速服务_CDN(CDN)-阿里云帮助中心 (aliyun.com) 通过配置CNAME域名实现网站加速_CDN(CDN)-阿里云帮助中心 (aliyun.com)