怎么给服务器加cdn

在现有的服务器的基础上,域名解析使用带有CDN的IP,在服务器上的子域名以及部署使用的域名都换成带有CDN的IP,所有用户的访问流量将会通过CDN节点的形式进行访问转发。通过不使用真实IP的形式,将源站隐藏起来。

cdn就是将多个建设的网络节点一起组成一层互联网络，来对你的web服务器进行内容分发缓存，为您进行加速服务，而高防cdn就是在节点上增加防御功能。使您的网站不怕攻击。

对于用户而言，当他访问您的网站的时候，cdn内部的智能分配机制就会分配离他最近的节点为他进行服务，节点就会像您的web服务器一样来响应用户的请求，因为距离较近，所以这个时候响应时间和速度相比于您的web服务器会有明显的提升。

给自己的服务器套cdn并没有想象中那么难，可能有些人会觉得肯定需要操作代码命令啥的，但是为了受众广大用户群体，cdn服务厂商都会让这个过程变得更加的简单好上手。

给服务器加cdn的注意点：

当你选择好了cdn相应的套餐之后，您只需要将您的网站域名解析到运营商提供的cname记录值即可，其他的地方不需要做任何修改。

然后再根据您自己的爱好需要，在您的控制台设置一下你想要的流量访问规则等参数。就大功告成了，以后您的网站就多了一个金钟罩来抵御各种网络流量攻击。

当今世界，对所有人而言，网站必须具有一切功能：网站必须有吸引力、速度快、有灵活性及可移动性，甚至必须要能够不断变化。此外，还必须支持频繁的会话、支持各种浏览器、智能手机、平板电脑以及其它用户可能会用到的设备。\x0d\x0a网站必须能够在复杂的网络环境下运行，比如中国、亚洲、中东等网络连接很差的区域或国家，这些地方不仅地理位置分散，距离遥远而且网络多样化。更不必说，对于移动站点或应用程序而言，不仅有线连接如DSL或电缆线甚至无线连接如GPRS、EDGE、3G及现在的LTE等，都必须有很高的连接性能，然而即使是这些提供连接服务的供应商都可能不会有很好的网络连接。\x0d\x0a此外，站点使用越来越多的对象，如图片、帧、CSS及APIs，比如AJAX，以及远程调用，比如从Facebook调用到Google，甚至使用各种各样的共享、跟踪及附加值系统等。\x0d\x0a难怪，系统变得越来越慢，用户只访问能够最快打开、性能最好的网站。Google及其它网站的研究表明，一个网站每慢一秒钟，就会丢失许多访客，甚至这些访客永远不会再次光顾这些网站。\x0d\x0a输入CDN或是内容分发网络，你就会搜索到国际公司如Akamai及Limelight，及中国公司如ChinaCache及ChinaNetCenter，他们可以帮助用户提高网站浏览性能，如浏览互联网站、网络游戏网站及应用程序。\x0d\x0aCDN支持许多种服务，最常用的服务有：\x0d\x0a下载_下载服务是CDN提供的最简单的服务，通常是一些终端用户，如网游用户、软件用户、程序开发员及要下载大量文件的用户会使用到。通过使用CDN，人们便无需使用高带宽连接到昂贵的数据中心，并且通过CDN节点，这些文件会放到离终端用户更近的地方。\x0d\x0a静态文件/图片_CDN最常用的用途是用来给终端用户发布静态文件，如图片、java脚本、css文件等。通常这些类型的文件很少变更，即便有变更，也是少量的，所以，把文件发布并存放到离终端用户比较近的地方会极大地提高网站速度，在地理位置分散或连接性能很差的地方，网站速度提高会显得更加明显。请注意，该服务仅仅用于处理静态文件，如主要的网站页面，所有动态内容，都是由主网站服务器提供。这通常是分开处理的，通过不同的子域名进行处理，如images.mydomain.com，与www.是分开的。\x0d\x0aWSA_即整体网站加速，正变得越来越流行。从名称便可知道，它是用来加速整个网站的，包括所有的静态的东西及动态的东西，如网页、购物车及推荐信息等。基本情况是，终端用户只连接到CDN，CDN连接到网站，然后缓存所有的东西，CDN代表用户向实体的网站后台发送请求，获取动态数据。\x0d\x0a当然，CDN只能改善一部分内容的访问速度，因为其它的内容，如采购历史、产品库存等必须直接从后台网站获得。对于连接性很差的网络，如移动网络以及复杂的难以将静态内容从静态CDN分离出来的网站来说，WSA尤为好用。注意，为确保WSA成功，谨慎的配置及缓存控制头信息是非常重要的，因为CDN需要知道要缓存哪些东西，以及哪些东西是要传递到后台的。\x0d\x0a流媒体内容-媒体类网站使用越来越多的流媒体内容，如视频，包括来自于其它网站(如Netflix、Hulu、或Youtube及中国的Tudou/Youku)的实际的电视节目、影片等。对于这些内容而言，CDN提供特别的下载服务，通常称之为点播或Vod，可以处理并控制所有视频，包括快进/后退视频，可以访问经过授权的内容，提供各种跟踪服务等。对于这些服务而言，视频通常是加载到CDN，并且通过特定的URL直接提供视频。此外，一些CDN还提供现场流体内容，如，体育或其它事件等实时播放，进行现场内容直播。\x0d\x0a其它-CDN有许多其它功能及服务，以满足特殊需求，如电商、预加载、网游、动态加速、安全及DRM控制等。此外，还提供特殊的满足地理要求或网络要求(如中国移动或CERNET)的特别服务。\x0d\x0aCDN还有一个服务容易被人忽略，就是安全服务。例如，许多CDN可提供防DDoS攻击服务，由于它们比任何一个网站的带宽都大，而且分散，所以能够经受住此类攻击。此外，一些专门的CDN如，CloudFlare及AnQuanBao也提供像防火墙一样的应用程序，如防止SQL注入攻击、XSS攻击及其它防攻击手段以保护后台站点。\x0d\x0a另一个特别的主要服务就是“内容感知”网络服务。这是一种新新服务，是通过CDN系统的更智能化管理的内容，可以给不同用户，如移动或DSL或办公室用户等提供不同的优化过的内容。它可以对内容进行处理，以便提供给不同设备，也可以对内容进行优化，以便将最重要的内容优先下载下来，使用户获得最佳体验。它们还会判断在哪个地方存放哪些内容，总之，该系统能够使网站在复杂的互联网环境下有良好的性能表现。\x0d\x0a最后，有些CDN还提供全球服务，帮助客户开拓新区域或国际区域，如中国、拉美或国外其它地区。对于全球品牌而言，这种服务非常重要，对于想要获得国际客户的中国公司而言，这种服务也非常重要。这种全球或局部CDN帮助人们在无需数据中心及特别带宽等情形下，便可获得庞大的用户群。\x0d\x0a根据您的需求及站点架构，使用CDN是非常容易的。对于静态/图片CDN而言，关键的一点在于能够将静态内容或图片分离到特定的域名，然后存放到同一服务器上不同的虚拟机上。\x0d\x0a要想使用好CDN，最关键的一点还在于能够有良好的缓存控制。这样，CDN能够知道缓存哪些对象以及要缓存多长时间。理想的情况是，像图片这些东西基本很少发生变化，若有更新的话，应该将文件名/URL更改掉并且HTML变更到指向新的对象。有时候，要进行这些更改并不容易，因为必须在源主机进行更新，这就要求短时间的(1个小时或1天)缓存这些东西，或者使这些在CDN缓存中失效。\x0d\x0a对于任何网站而言，最好的做法也许是将两种方法结合使用，也就是使用CDN来处理静态HTML页面，使用AJAX处理动态数据。这样便可以从后台系统提供服务数据，给用户快速提供动态数据，使用户有良好的体验。\x0d\x0a监控_要想很好地跟踪CDN的运行情况，就必须使用监控工具，如Gomez、ip-label或NetworkBench。它们可以帮助您监控CDN的实际性能，这一点可以从不同的网络及终端用户的使用情况中得到证实。并且，这样做有助于识别并发现问题，确保CDN服务能按照所期望的运作。\x0d\x0a总之，几乎每个人都应该使用CDN，尤其是现在的世界生活节奏快、充满活力、要求又很苛刻，所以人们更应当使用CDN。

在前面的 文章 中我们介绍了cdn的实现原理，现在我们来实现如何在正式开发中使用cdn功能。要使用cdn功能，就需要cdn服务商，我们可以自己搭建，也可以使用一些比较知名的服务商，庆幸的是市面上有不少的免费cdn服务商，如：

其中BootCDN 是 Bootstrap 中文网 支持并维护的前端开源项目免费 CDN 服务，项目资源同步于 cdnjs 仓库。界面相对比较好看，且支持搜索功能，可以在线测试cdn是否正常，所以下面以 Bootcdn 为例说明。

在前段项目开发中，我们经常使用webpack进行项目搭建， 主要作用有两个，分别是

在webpack中使用cdn是在打包生成静态资源的时候做处理，主要原理是使用 html-webpack-plugin 动态插入cdn链接。

关于webpack的使用这里不做过多的介绍，将以vue--cli 2.x生成的默认项目为例做介绍

html-webpack-plugin 是webpack的一个插件，可以动态的创建和编辑html内容，在html中使用 esj语法 可以读取到配置中的参数，简化了html文件的构建。

我们这次主要是使用它来动态插入cdn链接，如link标签和script标签。

在线项目地址

vue-cli 2.x

创建名为 webpack-cdn-demo ，类型为webpack的 vue 项目，如果安装的vue-cli是3.x版本，命令不太一样，详细可看 vue-cli 3 。

安装依赖

启动项目

下面简单介绍一下目录结构

其中build文件夹中的 webpack.prod.conf.js 是我们主要注意的文件,我们在该文件中动态设置不需要被打包的模块并构建出合适的链接。

在webpack项目中，所引入的第三方资源会被统一打包进vender文件中，我们通过webpack的 externals 属性可以设置打包时排除该模块，详情说明见 外部扩展(externals) 。

在前面的步骤中，我们创建的项目包括vue、vue-router，在正式开发在还会有ui库，如element-ui，为了方便演示，我们再安装element-ui和axios两个模块，并实现在构建是把这是个模块以cdn的形式引入。

注意安装时记得 -S ，它的作用是安装完后在 package.json 项目文件中插入记录，后续操作需要读取已安装模块

对于cdn，我们可以自己搭建，也可以使用专业的cdn服务商，这里使用免费的cdn bootcdn 。选用免费cdn有很多好处，但毕竟有隐患，那就是服务有可能会奔溃。

依次搜索出前面模块，结果如下

按照规律，得出cdn资源路径规则为

其他cdn服务商同理

使用cdn其实也就是在webpack热启动和打包项目的时候动态插入script和style链接 ，为了方便维护，我们通过在 build/utils.js 文件上添加几个方法，将来在 webpack.dev.conf.js 和 webpack.prod.conf.js 上可以使用。

如果没有build/utils.js，可以在其他文件上添加，只要在后续步骤中能操作到就行

name 模块名称，与package.json同名

scope 模块作用域命名

js js地址

css css地址

这里特别注意scope，它是webpack配置的external参数下的信息，比如vue的作用域命名是Vue，vue-router的作用域命名是VueRouter，element-ui的作用域命名是ELEMENT，同理，jq的作用域命名是JQuery， 具体做法是先引入该资源，然后在控制台依次输入近似的值，一个个匹配 (目前没找到更好的做法)。

在webpack热启动本地调试的时候，我们可以使用cdn。

在 build/webpack.dev.conf.js 中，默认已经引入了 utils.js ，所以可以直接调用相关方法，如果是自定义的文件，记得引入。

我们可以往里面添加点自定义属性，方便在index.html中调用。 ，修改如下：

其中 cdnConfig 和 onlyCss 自定义属性，在html上通过 htmlWebpackPlugin.options 可以读取到。

更多html-webpack-plugin配置情况官网，这里暂时不需要更多。

在打包的时候，我们使用cdn，配置和前面dev的差不多，只不过需要做多一步。

注意此处的 externalModules ，后面用到，也就是比dev多的步骤。

加入和dev一样的两个配置，不过需要把onlyCss改为 true ，因为我们希望打包时不单单使用css。

webpack配置已经完成，在html-webpack-plugin中已经添加了相关参数，我们再在页面上可以直接使用，使用语法是 ejs ，和asp.net，jsp，php类似。

通过 <% %> 和 htmlWebpackPlugin.options 用js遍历 插入 link标签和script标签。

ps: 修改了webpack配置，需要重启项目才会生效

打包项目

可以看到打包体积大大减小了

页面上也正确引入了cdn资源。

最后奉上git地址： https://gitee.com/zhkumsg/webpack-cdn-demo

比悲伤更悲伤的分割线

原来两年前已经有人做了一个类型的webpack-cdn-plugin

---