本篇文章给大家谈谈自己搭建cdn，以及自己搭建cdn服务器有什么危害对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
webpack使用HtmlWebpackPlugin进行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地址：
比悲伤更悲伤的分割线
原来两年前已经有人做了一个类型的webpack-cdn-plugin
我有几个香港服务器想搭建cdn
香港服务器搭建cdn步骤如下：
1、登录提供商官网，进入管理面板；
2、找到CND加速度服务，付款购买；
3、接着在香港服务器管理上，点击添加CND加速；
4、填写相关信息，确定加速即可。
cdn是内容分发网络。其功能是通过服务器的调节，使用户可以就近获取所需的内容，提高了访问响应的速率，减少了网络拥堵。
使用Cloudfront实现内容分发网络（CDN）的简单总结
前段时间，好几次，看到自己的网站不翻墙连不上了，但是别的网站却可以。而且，看到连接别人网站加载的资源时，不同区域加载的数据也来自于不同的ip，顿时感觉好牛逼。那他们怎么做到的？于是乎，经过搜索之后才知道，是别人用了平台的CDN服务（当然有的大公司可以自己搭建）。之后，我通过使用亚马逊的Cloudfront也实现了相似的效果，并将实践中遇到的问题总结下。
如何使用Cloudfront，可以参考官方文档 CloudFront 入门指南 。我实现的方式是在Cloudfront指定web源，并且设置CNAME，最后在域名解析时候相对应设置。
在配置过程中，遇到下面几个问题：
1、web资源加载不会缓存到浏览器中
解决的办法就是在 源服务器 的Nginx配置 Cache-Control ，如下：
2、加载的JS、CSS资源不压缩
解决办法：nginx需要添加gzip_proxied any; 才会生效，具体配置如下：
3、https通信中证书的问题
刚开始，我是用自己的证书进行HTTPS配置，然后将证书也上传到亚马逊后台，但是配置之后发现不能用。之后，在仔细理解HTTPS的逻辑和Cloudfront之后，发现其实配置特别简单，需要列举有两点：
高防cdn怎么搭建
1、登录高防cdn提供商官网。
2、进入个人中心，打开管理控制面板。
3、申请条件高防cdn服务。
4、最后在cdn管理中，给对应的服务器添加高防cdn服务即可。
关于自己搭建cdn和自己搭建cdn服务器有什么危害的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
