分享:技术:cdn:阿里云cdn的使用
阿里云cdn的使用
cdn介绍
cdn也就是内容分发网络，将网站静态资源(图片，css，js等)分发到离用户最近的节点，提高访问速度(减少延迟时间)，也分摊了网站80%的请求压力，具体介绍见：高并发量网站解决方案
阿里云cdn的使用
添加加速域名
访问阿里云CDN概览页面，点击CDN域名列表
点击添加域名
输入加速域名(必须备案过，可以配置二级域名，我这里就配置cdn.enjoyingshop.com)，选择图片小文件加速(可以选择大文件，视频音频流，https加速等)，选择源站类型，我选择的是IP(也可以选择域名或者OSS域名)，输入IP地址，选择端口，点击下一步
然后，您的加速域名已经审核通过，域名添加完成，点击立即配置
可以看到阿里云已经帮我们生成一个CNAME，阿里云CDN的域名
配置刷新缓存
点击刷新缓存，点击目录刷新，选择加速域名，输入多个静态文件所在的目录，比如原来访问为http://121.43.104.34/config_center/script/XXXX，配置完成后就可以用http://cdn.enjoyingshop.com/config_center/script/XXXX来访问，点击提交
点击查看操作记录，可以看到配置成功的内容
点击CDN域名列表，就可以看到刚配置的CDN域名
域名解析
接下来就是在备案的阿里云域名中配置cdn开头的二级域名
配置CNAME解析，cdn.enjoyingshop.com跳转到cdn.enjoyingshop.com.w.kunlunno.com，点击保存
1分钟后生效
测试CDN
到这里，效果就是访问cdn.enjoyingshop.com跳转到cdn.enjoyingshop.com.w.kunlunno.com，cdn.enjoyingshop.com.w.kunlunno.com会去离用户最近的节点取缓存的静态内容，测试如下：
在公司(德邦证券上海市浦电路500号)内网ping
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
百度上查看该ip[222.73.134.109]来自上海，说明最近的节点在上海，同时也会看到跳转到cdn.enjoyingshop.com.w.kunlunno.com了
在阿里云(杭州的ECS)上ping
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
百度上查看该ip[124.160.136.182]来自浙江省嘉兴市，说明最近的节点在浙江省，同时也会看到跳转到cdn.enjoyingshop.com.w.kunlunno.com了
在阿里云上curl http://cdn.enjoyingshop.com/config_center/scripts/login.js，可以访问到js文件
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("服务器连接异常，请稍后再试！");
}
});
}
在阿里云上下载logo.jpg
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:~#
应用代码验证
应用freemarker代码中写相对路径，如下：
- 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>
访问界面，查看源码如下：
- 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>
应用freemarker代码中修改成CDN加速域名前缀后，如下：
- 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>
访问界面，查看源码如下：
- 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>
界面查看，访问正常！
流量监控
阿里云上还可以查看通过该CDN的流量监控
分享/技术/cdn/阿里云cdn的使用.txt · 最后更改: 2016/01/22 12:50 由 gxx
除额外注明的地方外，本维基上的内容按下列许可协议发布： CC Attribution-Share Alike 3.0 Unported
