wiki

用户工具

站点工具

您的足迹:
分享:技术:cdn:阿里云cdn的使用

差别

这里会显示出您选择的修订版和当前版本之间的差别。

到此差别页面的链接

两侧同时换到之前的修订记录 前一修订版
后一修订版 		前一修订版
分享:技术:cdn:阿里云cdn的使用 [2016/01/22 11:07]
gxx 		分享:技术:cdn:阿里云cdn的使用 [2016/01/22 12:50] (当前版本)
gxx
行 3: 行 3:
 cdn也就是内容分发网络，将网站静态资源(图片，css，js等)分发到离用户最近的节点，提高访问速度(减少延迟时间)，也分摊了网站80%的请求压力，具体介绍见：[[分享:​技术:​高并发:​高并发处理#​cdn加速技术|高并发量网站解决方案]] cdn也就是内容分发网络，将网站静态资源(图片，css，js等)分发到离用户最近的节点，提高访问速度(减少延迟时间)，也分摊了网站80%的请求压力，具体介绍见：[[分享:​技术:​高并发:​高并发处理#​cdn加速技术|高并发量网站解决方案]]
 ===== 阿里云cdn的使用 ===== ===== 阿里云cdn的使用 =====
 +==== 添加加速域名 ====
 访问阿里云CDN概览页面，点击CDN域名列表 访问阿里云CDN概览页面，点击CDN域名列表
  
行 22: 行 23:
  
 {{:​分享:​技术:​cdn:​5.png?​800|}} {{:​分享:​技术:​cdn:​5.png?​800|}}
 +==== 配置刷新缓存 ====
 点击刷新缓存，点击目录刷新，选择加速域名，输入多个静态文件所在的目录，比如原来访问为http://​121.43.104.34/​config_center/​script/​XXXX，配置完成后就可以用http://​cdn.enjoyingshop.com/​config_center/​script/​XXXX来访问，点击提交 点击刷新缓存，点击目录刷新，选择加速域名，输入多个静态文件所在的目录，比如原来访问为http://​121.43.104.34/​config_center/​script/​XXXX，配置完成后就可以用http://​cdn.enjoyingshop.com/​config_center/​script/​XXXX来访问，点击提交
  
行 34: 行 35:
  
 {{:​分享:​技术:​cdn:​8.png?​800|}} {{:​分享:​技术:​cdn:​8.png?​800|}}
 +==== 域名解析 ====
 接下来就是在备案的阿里云域名中配置cdn开头的二级域名 接下来就是在备案的阿里云域名中配置cdn开头的二级域名
  
行 46: 行 47:
  
 {{:​分享:​技术:​cdn:​11.png?​800|}} {{:​分享:​技术:​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|}} {{:​分享:​技术:​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;
 +    }
  
-{{:​分享:​技术:​cdn:​13.png?800|}}+    //​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|}}
分享/技术/cdn/阿里云cdn的使用.1453432068.txt.gz · 最后更改: 2016/01/22 11:07 由 gxx

页面工具

除额外注明的地方外，本维基上的内容按下列许可协议发布： CC Attribution-Share Alike 3.0 Unported
CC Attribution-Share Alike 3.0 Unported Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki