index.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>SaeLayer CDN</title>
  6. <meta name="description" content="">
  7. <meta name="author" content="">
  8. <style>
  9. *{
  10. margin: 0;
  11. padding:0;
  12. border:0;
  13. }
  14. body{
  15. font-size:14px;
  16. font-family:"微软雅黑","Microsoft Yahei";
  17. color: #222;
  18. background-color:#fff;
  19. word-wrap:word-break;
  20. word-break:break-all;
  21. }
  22. .small{
  23. font-size:0.8em;
  24. color:#666;
  25. }
  26. .text-right{
  27. text-align:right;
  28. }
  29. a{
  30. color: #f44;
  31. text-decoration:none;
  32. }
  33. h1,h2{
  34. font-weight:600;
  35. }
  36. blockquote{
  37. padding:10px 5px;
  38. border:1px solid #ddd;
  39. border-radius:3px;
  40. color: #f44;
  41. background-color:#f0f0f0;
  42. margin: 10px 0px;
  43. }
  44. pre{
  45. font-size:13px;
  46. font-family:Consolas;
  47. line-height:16px;
  48. display: block;
  49. margin:5px 0;
  50. border-left:2px solid #a44;
  51. padding-left:5px;
  52. }
  53. ul{
  54. list-style:inside square;
  55. }
  56. ul,p{
  57. margin-bottom:8px;
  58. }
  59. #body{
  60. width:800px;
  61. margin:0 auto;
  62. padding:5px 10px;
  63. margin-top:30px;
  64. border-radius:5px;
  65. }
  66. .unit{
  67. margin-top:20px;
  68. line-height:22px;
  69. }
  70. .unit h2{
  71. padding-bottom:5px;
  72. margin-bottom:5px;
  73. border-bottom:1px dashed #ddd;
  74. font-size:16px;
  75. }
  76. h1.page-header{
  77. text-align:center;
  78. font-size:28px;
  79. padding:10px 0;
  80. border-bottom:1px solid #ccc;
  81. margin-bottom:10px;
  82. }
  83. </style>
  84. </head>
  85. <body>
  86. <div id="body">
  87. <h1 class="page-header">SaeLayer CDN</h1>
  88. <div id="content">
  89. <!-- <blockquote>SaeLayer CDN已经成功安装!</blockquote> -->
  90. <div class="unit">
  91. <h2>关于SaeLayerCDN</h2>
  92. <div class="description">
  93. <p>SaeLayerCDN是一个基于SAE的轻巧的CDN程序,你可以利用SaeLayerCDN快速地为你的博客或者网站搭建自己的CDN,从而加速网站的加载,提升用户体验。关于CDN,更多介绍在<a href="#">这里</a>。</p>
  94. <p>SaeLayerCDN的优势在于:</p>
  95. <ul>
  96. <li>基于SAE云平台,充分利用其强大的分布式架构,CDN加速效果甚至好于大部分的专业、收费的CDN。程序免费开源。</li>
  97. <li>一次修改,永久适用。</li>
  98. <li>你可以不会编程也能够为你的网站添加CDN,添加SaeLayerCDN不用修改网站的核心程序。</li>
  99. <li>如果不想使用CDN,能很容易就能改回来,而且数据仍在自己网站的服务器上。</li>
  100. <li>SaeLayerCDN架构超轻量,全部代码只有200余行,非常便于自己修改和定制。</li>
  101. </ul>
  102. </div>
  103. </div>
  104. <div class="unit">
  105. <h2>安装和使用</h2>
  106. <div class="description">
  107. <ul>
  108. <li><strong>部署代码:</strong>可以手动部署(即创建应用、上传代码)或者在线安装<span class="small">(还没有通过审核o(︶︿︶)o)</span>。</li>
  109. <li><strong>配置程序:</strong>如果是手动部署,则要先在SAE后台创建一个storage的domain。然后设置index.php,修改下面的四个常量:
  110. <pre>
  111. /**
  112. * 网站静态文件的根目录对应的URL地址
  113. * */
  114. define('STATIC_URL','http://www.baidu.com/');
  115. /**
  116. * SAE storage的domain
  117. * */
  118. define('DOMAIN','cdn');
  119. /**
  120. * 空请求时是否显示本文档
  121. * */
  122. define('WELCOME_DOC',TRUE);
  123. /**
  124. * 运行环境:development/testing/production
  125. * */
  126. define('ENVIRONMENT','production');
  127. </pre></li>
  128. <li><strong>使用CDN:</strong>将网站模板中静态文件的的根目录URL替换成你的SAE应用地址,如将<strong>http://blog.creatist.cn/</strong>logo.jpg换成<strong>http://mysqecdn.sinaapp.com/</strong>logo.jpg。<span class="small">对于网站程序的一个建议是,设置一个$cdn_base配置变量,然后静态文件的URL根据$cdn_base生成,以后修改CDN只要配置这个变量就可以了。</span></li>
  129. <li>最后,刷新你的网站。然后感受网站加载速度的飞跃。</li>
  130. </ul>
  131. <p></p>
  132. </div>
  133. </div>
  134. <div class="unit">
  135. <h2>原理</h2>
  136. <div class="description">
  137. <p>大致就是取静态内容的过程中增加一个SAE层:前端从SAE取静态文件,当该文件是第一次被访问时,SAE从源服务器上取文件并保存到自己的storage里,然后返回给前端;之后就直接从SAE取而不需要再访问源服务器了。这样的好处就是在源服务器端可以实现无痛切换,不用使用像又拍CDN之类的API进行专门的编程,用户资源仍保存在源服务器上,只要将静态资源的前缀改为SAE的网址就行了,当不想使用CDN时可以再改回来。</p><p>例如,源文件地址是http://www.creatist.cn/avatar/21223.jpg(或者相对地址/avatar/21223.jpg),前端使用CDN,访问地址改成http://cdnxxx.sinaapp.com/avatar/21223.jpg(这通常是非常容易修改的)。SAE首先检查/avatar/21223.jpg在storage中是否已存在,如果存在即以前已经被访问过的话就直接取出来;如果不存在就从http://www.creatist.cn/avatar/21223.jpg保存到storage,以后就直接从storage里面取了。</p><p>SAE层还能实现其他很多功能,例如设置浏览器缓存、防盗链等等。</p>
  138. </div>
  139. </div>
  140. <div class="unit">
  141. <h2>其他</h2>
  142. <div class="description">
  143. <p>SaeLayerCDN还在完善中,项目的Github地址是:<a href="https://github.com/Slacken/cdn">https://github.com/Slacken/cdn</a>,欢迎fork和贡献代码。</p>
  144. <p>我的博客是:<a href="http://blog.creatist.cn/">http://blog.creatist.cn/</a></p>
  145. <p><a href="http://sae.sina.com.cn/"><img src="http://static.sae.sina.com.cn/image/poweredby/120X33_transparent.gif" width="120" height="33" /></a></p>
  146. </div>
  147. </div>
  148. </div>
  149. </div>
  150. </body>
  151. </html>