CDN加速服务器

优点：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)