差别

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

--- 分享:技术:cdn:阿里云cdn的使用 [2016/01/22 10:54]
gxx 创建
+++ 分享:技术:cdn:阿里云cdn的使用 [2016/01/22 12:50] (当前版本)
gxx
@@ 行 3: / 行 3: @@
 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:6.png?800|}}
+{{:分享:技术:cdn:7.png?800|}}
+点击CDN域名列表，就可以看到刚配置的CDN域名
+{{:分享:技术:cdn:8.png?800|}}
+==== 域名解析 ====
+接下来就是在备案的阿里云域名中配置cdn开头的二级域名
-{{:分享:技术:cdn:7.png?800|}}
+{{:分享:技术:cdn:9.png?800|}}
+配置CNAME解析，cdn.enjoyingshop.com跳转到cdn.enjoyingshop.com.w.kunlunno.com，点击保存
+{{:分享:技术:cdn:10.png?800|}}
-{{:分享:技术:cdn:8.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
-{{:分享:技术:cdn:9.png?800|}}
+正在 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
+请求超时。
+.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|}}
-{{:分享:技术:cdn:10.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.
+bytes from 124.160.136.182: icmp_seq=1 ttl=46 time=2.23 ms
+bytes from 124.160.136.182: icmp_seq=2 ttl=46 time=2.10 ms
+bytes from 124.160.136.182: icmp_seq=3 ttl=46 time=2.17 ms
+bytes from 124.160.136.182: icmp_seq=4 ttl=46 time=2.37 ms
+^C
+--- cdn.enjoyingshop.com.w.kunlunno.com ping statistics ---
+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();
+    }
+}
-{{:分享:技术:cdn:11.png?800|}}
+//登陆
+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’
+%[==============================================================================================================================>] 19,256      --.-K/s   in 0.001s
-{{:分享:技术:cdn:12.png?800|}}
+-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>
-{{:分享:技术:cdn:13.png?800|}}
+<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|}}

wiki

用户工具

站点工具

差别

页面工具