====== 阿里云cdn的使用 ======
===== cdn介绍 =====
cdn也就是内容分发网络，将网站静态资源(图片，css，js等)分发到离用户最近的节点，提高访问速度(减少延迟时间)，也分摊了网站80%的请求压力，具体介绍见：[[分享:技术:高并发:高并发处理#cdn加速技术|高并发量网站解决方案]]
===== 阿里云cdn的使用 =====
==== 添加加速域名 ====
访问阿里云CDN概览页面，点击CDN域名列表

{{:分享:技术:cdn:1.png?800|}}

点击添加域名

{{:分享:技术:cdn:2.png?800|}}

输入加速域名(必须备案过，可以配置二级域名，我这里就配置cdn.enjoyingshop.com)，选择图片小文件加速(可以选择大文件，视频音频流，https加速等)，选择源站类型，我选择的是IP(也可以选择域名或者OSS域名)，输入IP地址，选择端口，点击下一步

{{:分享:技术:cdn:3.png?800|}}

然后，您的加速域名已经审核通过，域名添加完成，点击立即配置

{{:分享:技术:cdn:4.png?800|}}

可以看到阿里云已经帮我们生成一个CNAME，阿里云CDN的域名

{{:分享:技术:cdn:5.png?800|}}
==== 配置刷新缓存 ====
点击刷新缓存，点击目录刷新，选择加速域名，输入多个静态文件所在的目录，比如原来访问为http://121.43.104.34/config_center/script/XXXX，配置完成后就可以用http://cdn.enjoyingshop.com/config_center/script/XXXX来访问，点击提交

{{:分享:技术:cdn:6.png?800|}}

点击查看操作记录，可以看到配置成功的内容

{{:分享:技术:cdn:7.png?800|}}

点击CDN域名列表，就可以看到刚配置的CDN域名

{{:分享:技术:cdn:8.png?800|}}
==== 域名解析 ====
接下来就是在备案的阿里云域名中配置cdn开头的二级域名

{{:分享:技术:cdn:9.png?800|}}

配置CNAME解析，cdn.enjoyingshop.com跳转到cdn.enjoyingshop.com.w.kunlunno.com，点击保存

{{:分享:技术:cdn:10.png?800|}}

1分钟后生效

{{:分享:技术:cdn:11.png?800|}}
==== 测试CDN ====
到这里，效果就是访问cdn.enjoyingshop.com跳转到cdn.enjoyingshop.com.w.kunlunno.com，cdn.enjoyingshop.com.w.kunlunno.com会去离用户最近的节点取缓存的静态内容，测试如下：

在公司(德邦证券上海市浦电路500号)内网ping
<file>
C:\Users\Administrator>ping cdn.enjoyingshop.com

正在 Ping cdn.enjoyingshop.com.w.kunlunno.com [222.73.134.109] 具有 32 字节的数
据:
来自 222.73.134.109 的回复: 字节=32 时间=27ms TTL=43
来自 222.73.134.109 的回复: 字节=32 时间=31ms TTL=43
来自 222.73.134.109 的回复: 字节=32 时间=9ms TTL=43
请求超时。

222.73.134.109 的 Ping 统计信息:
    数据包: 已发送 = 4，已接收 = 3，丢失 = 1 (25% 丢失)，
往返行程的估计时间(以毫秒为单位):
    最短 = 9ms，最长 = 31ms，平均 = 22ms
</file>
百度上查看该ip[222.73.134.109]来自上海，说明最近的节点在上海，同时也会看到跳转到cdn.enjoyingshop.com.w.kunlunno.com了

{{:分享:技术:cdn:13.png?800|}}

在阿里云(杭州的ECS)上ping
<file>
root@iZ23goxo66aZ:~# ping cdn.enjoyingshop.com
PING cdn.enjoyingshop.com.w.kunlunno.com (124.160.136.182) 56(84) bytes of data.
64 bytes from 124.160.136.182: icmp_seq=1 ttl=46 time=2.23 ms
64 bytes from 124.160.136.182: icmp_seq=2 ttl=46 time=2.10 ms
64 bytes from 124.160.136.182: icmp_seq=3 ttl=46 time=2.17 ms
64 bytes from 124.160.136.182: icmp_seq=4 ttl=46 time=2.37 ms
^C
--- cdn.enjoyingshop.com.w.kunlunno.com ping statistics ---
4 packets transmitted, 4 received, 0% packet loss, time 3003ms
rtt min/avg/max/mdev = 2.102/2.223/2.375/0.105 ms
</file>
百度上查看该ip[124.160.136.182]来自浙江省嘉兴市，说明最近的节点在浙江省，同时也会看到跳转到cdn.enjoyingshop.com.w.kunlunno.com了

{{:分享:技术:cdn:12.png?800|}}

在阿里云上curl http://cdn.enjoyingshop.com/config_center/scripts/login.js，可以访问到js文件
<file>
root@iZ23goxo66aZ:~# curl http://cdn.enjoyingshop.com/config_center/scripts/login.js
/**
 * 按钮监听
 */
function keyPress(e){
    if( 13 == e.keyCode){
        login();
    }
}

//登陆
function login() {
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    //判非空
    if (username == EMPTY) {
        showAttention("请输入用户名!");
        return;
    }
    if (password == EMPTY) {
        showAttention("请输入密码!");
        return;
    }
    // 判断字符串是否含有非法字符
    var result = checkStr(username, SYMBOL_ARRAY_1);
    if (result["isSuccess"] == false) {
        showAttention("用户名包含非法字符:" + result["symbol"]);
        return;
    }
    result = checkStr(password, SYMBOL_ARRAY_1);
    if (result["isSuccess"] == false) {
        showAttention("密码包含非法字符:" + result["symbol"]);
        return;
    }

    //ajax登陆
    var SUCCESS_STR = "success";//成功编码
    $.ajax({
        type:"post",
        async:false,
        url:contextPath + "login.htm",
        data:"username=" + filterStr(username) + "&password=" + password,
        success:function (data, textStatus) {
            if ((SUCCESS_STR == textStatus) && (null != data)) {
                //判登陆是否成功
                if (false == data["isSuccess"]) {
                    showAttention(data["message"]);
                    document.getElementById("password").value = EMPTY;
                    return;
                } else {
                    //登陆成功
                    showSuccess(data["message"]);
                    location.href = contextPath + "index.htm";
                }
            } else {
                showAttention("服务器连接异常，请稍后再试！");
            }
        },
        error:function (data, textStatus) {
            showAttention("服务器连接异常，请稍后再试！");
        }
    });
}
</file>
在阿里云上下载logo.jpg
<file>
root@iZ23goxo66aZ:~# wget http://cdn.enjoyingshop.com/config_center/images/logo.jpg
--2016-01-22 09:55:20--  http://cdn.enjoyingshop.com/config_center/images/logo.jpg
Resolving cdn.enjoyingshop.com (cdn.enjoyingshop.com)... 124.160.136.182
Connecting to cdn.enjoyingshop.com (cdn.enjoyingshop.com)|124.160.136.182|:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: 19256 (19K) [image/jpeg]
Saving to: ‘logo.jpg’

100%[==============================================================================================================================>] 19,256      --.-K/s   in 0.001s  

2016-01-22 09:55:20 (13.3 MB/s) - ‘logo.jpg’ saved [19256/19256]

root@iZ23goxo66aZ:~# ls
install_log.txt  logo.jpg  rsa_private_key.pem  rsa_private_key(PKCS8格式).pem  rsa_public_key.pem
root@iZ23goxo66aZ:~# 
</file>
==== 应用代码验证 ====
应用freemarker代码中写相对路径，如下：
<file html login.ftl>
<html>
<head>
    <title>登录页面</title>
    <link rel="stylesheet" href="${rc.contextPath}/css/reset.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="${rc.contextPath}/css/style.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="${rc.contextPath}/css/invalid.css" type="text/css" media="screen"/>
    <script type="text/javascript" src="${rc.contextPath}/scripts/jquery-min.js"></script>
    <script type="text/javascript" src="${rc.contextPath}/scripts/simpla.jquery.configuration.js"></script>
    <script type="text/javascript" src="${rc.contextPath}/scripts/base.js"></script>
    <script type="text/javascript" src="${rc.contextPath}/scripts/login.js"></script>
    <script language="javascript" type="text/javascript" >
		var contextPath = "${rc.contextPath}/";
	</script>
</head>

<body id="login" onkeypress="keyPress(event)">
<div id="login-wrapper" class="png_bg">
    <div id="login-top">
        <h1>登录页面</h1>
        <img id="logo" src="${rc.contextPath}/images/logo.jpg" alt="MANAGE" />
    </div>
    <div id="login-content">
        <form onsubmit="return false;">
            <div id="message_id" class="notification information png_bg" style="display: none;">
                <a href="#" class="close">
                    <img src="${rc.contextPath}/images/icons/cross_grey_small.png" title="关闭" alt="关闭"/>
                </a>
                <div id="message_id_content"> 提示信息！ </div>
            </div>
            <p>
                <label>用户名</label>
                <input class="text-input" type="text" id="username" />
            </p>
            <div class="clear"></div>
            <p>
                <label>密码</label>
                <input class="text-input" type="password" id="password" />
            </p>
            <div class="clear"></div>
            <div class="clear"></div>
            <p>
                <input class="button" type="button" onclick="login();" value="Log In" />
            </p>
        </form>
    </div>
</div>
</body>
</html>
</file>
访问界面，查看源码如下：
<file html login.html>

<html>
<head>
    <title>登录页面</title>
    <link rel="stylesheet" href="/config_center/css/reset.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="/config_center/css/style.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="/config_center/css/invalid.css" type="text/css" media="screen"/>
    <script type="text/javascript" src="/config_center/scripts/jquery-min.js"></script>
    <script type="text/javascript" src="/config_center/scripts/simpla.jquery.configuration.js"></script>
    <script type="text/javascript" src="/config_center/scripts/base.js"></script>
    <script type="text/javascript" src="/config_center/scripts/login.js"></script>
    <script language="javascript" type="text/javascript" >
		var contextPath = "/config_center/";
	</script>
</head>

<body id="login" onkeypress="keyPress(event)">
<div id="login-wrapper" class="png_bg">
    <div id="login-top">
        <h1>登录页面</h1>
        <img id="logo" src="/config_center/images/logo.jpg" alt="MANAGE" />
    </div>
    <div id="login-content">
        <form onsubmit="return false;">
            <div id="message_id" class="notification information png_bg" style="display: none;">
                <a href="#" class="close">
                    <img src="/config_center/images/icons/cross_grey_small.png" title="关闭" alt="关闭"/>
                </a>
                <div id="message_id_content"> 提示信息！ </div>
            </div>
            <p>
                <label>用户名</label>
                <input class="text-input" type="text" id="username" />
            </p>
            <div class="clear"></div>
            <p>
                <label>密码</label>
                <input class="text-input" type="password" id="password" />
            </p>
            <div class="clear"></div>
            <div class="clear"></div>
            <p>
                <input class="button" type="button" onclick="login();" value="Log In" />
            </p>
        </form>
    </div>
</div>
</body>
</html>
</file>
应用freemarker代码中修改成CDN加速域名前缀后，如下：
<file html login.ftl>
<html>
<head>
    <title>登录页面</title>
    <link rel="stylesheet" href="http://cdn.enjoyingshop.com/config_center/css/reset.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="http://cdn.enjoyingshop.com/config_center/css/style.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="http://cdn.enjoyingshop.com/config_center/css/invalid.css" type="text/css" media="screen"/>
    <script type="text/javascript" src="http://cdn.enjoyingshop.com/config_center/scripts/jquery-min.js"></script>
    <script type="text/javascript" src="http://cdn.enjoyingshop.com/config_center/scripts/simpla.jquery.configuration.js"></script>
    <script type="text/javascript" src="http://cdn.enjoyingshop.com/config_center/scripts/base.js"></script>
    <script type="text/javascript" src="http://cdn.enjoyingshop.com/config_center/scripts/login.js"></script>
    <script language="javascript" type="text/javascript" >
		var contextPath = "${rc.contextPath}/";
	</script>
</head>

<body id="login" onkeypress="keyPress(event)">
<div id="login-wrapper" class="png_bg">
    <div id="login-top">
        <h1>登录页面</h1>
        <img id="logo" src="http://cdn.enjoyingshop.com/config_center/images/logo.jpg" alt="MANAGE" />
    </div>
    <div id="login-content">
        <form onsubmit="return false;">
            <div id="message_id" class="notification information png_bg" style="display: none;">
                <a href="#" class="close">
                    <img src="http://cdn.enjoyingshop.com/config_center/images/icons/cross_grey_small.png" title="关闭" alt="关闭"/>
                </a>
                <div id="message_id_content"> 提示信息！ </div>
            </div>
            <p>
                <label>用户名</label>
                <input class="text-input" type="text" id="username" />
            </p>
            <div class="clear"></div>
            <p>
                <label>密码</label>
                <input class="text-input" type="password" id="password" />
            </p>
            <div class="clear"></div>
            <div class="clear"></div>
            <p>
                <input class="button" type="button" onclick="login();" value="Log In" />
            </p>
        </form>
    </div>
</div>
</body>
</html>
</file>
访问界面，查看源码如下：
<file html login.html>
<html>
<head>
    <title>登录页面</title>
    <link rel="stylesheet" href="http://cdn.enjoyingshop.com/config_center/css/reset.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="http://cdn.enjoyingshop.com/config_center/css/style.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="http://cdn.enjoyingshop.com/config_center/css/invalid.css" type="text/css" media="screen"/>
    <script type="text/javascript" src="http://cdn.enjoyingshop.com/config_center/scripts/jquery-min.js"></script>
    <script type="text/javascript" src="http://cdn.enjoyingshop.com/config_center/scripts/simpla.jquery.configuration.js"></script>
    <script type="text/javascript" src="http://cdn.enjoyingshop.com/config_center/scripts/base.js"></script>
    <script type="text/javascript" src="http://cdn.enjoyingshop.com/config_center/scripts/login.js"></script>
    <script language="javascript" type="text/javascript" >
		var contextPath = "/config_center/";
	</script>
</head>

<body id="login" onkeypress="keyPress(event)">
<div id="login-wrapper" class="png_bg">
    <div id="login-top">
        <h1>登录页面</h1>
        <img id="logo" src="http://cdn.enjoyingshop.com/config_center/images/logo.jpg" alt="MANAGE" />
    </div>
    <div id="login-content">
        <form onsubmit="return false;">
            <div id="message_id" class="notification information png_bg" style="display: none;">
                <a href="#" class="close">
                    <img src="http://cdn.enjoyingshop.com/config_center/images/icons/cross_grey_small.png" title="关闭" alt="关闭"/>
                </a>
                <div id="message_id_content"> 提示信息！ </div>
            </div>
            <p>
                <label>用户名</label>
                <input class="text-input" type="text" id="username" />
            </p>
            <div class="clear"></div>
            <p>
                <label>密码</label>
                <input class="text-input" type="password" id="password" />
            </p>
            <div class="clear"></div>
            <div class="clear"></div>
            <p>
                <input class="button" type="button" onclick="login();" value="Log In" />
            </p>
        </form>
    </div>
</div>
</body>
</html>
</file>
界面查看，访问正常！
==== 流量监控 ====
阿里云上还可以查看通过该CDN的流量监控

{{:分享:技术:cdn:14.png?800|}}