wiki

用户工具

站点工具

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

差别

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

到此差别页面的链接

两侧同时换到之前的修订记录 前一修订版
后一修订版 		前一修订版
分享:技术:cdn:阿里云cdn的使用 [2016/01/22 11:18]
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会去离用户最近的节点取缓存的静态内容，测试如下： 到这里，效果就是访问cdn.enjoyingshop.com跳转到cdn.enjoyingshop.com.w.kunlunno.com，cdn.enjoyingshop.com.w.kunlunno.com会去离用户最近的节点取缓存的静态内容，测试如下：
  
行 170: 行 171:
 root@iZ23goxo66aZ:​~# ​ root@iZ23goxo66aZ:​~# ​
 </​file>​ </​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的使用.1453432697.txt.gz · 最后更改: 2016/01/22 11:18 (外部编辑)

页面工具

除额外注明的地方外，本维基上的内容按下列许可协议发布： 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