自己搭建cdn(自己搭建cdn服务器有什么危害)

慈云数据 2023-04-06 网络资讯 602 2

本篇文章给大家谈谈自己搭建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服务器有什么危害的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

评论列表

支持并维护的前端开源项目免费 CDN 服务,项目资源同步于 cdnjs 仓库。界面相对比较好看,且支持搜索功能,可以在线测试cdn是否正常,所以下面以 Bootcdn 为例说明。 在前段项目开发中,我们经常使用webp
2023-04-06 00:10:34 回复
用户可以就近获取所需的内容,提高了访问响应的速率,减少了网络拥堵。使用Cloudfront实现内容分发网络(CDN)的简单总结前段时间,好几次,看到自己的网站不翻墙连不上了,但是别的网站却可以。而且,看到连接别人网站加载的资源时,不同区域加载的数据也来自于不
2023-04-06 05:20:29 回复

发表评论:

微信扫一扫加客服

微信扫一扫加客服

微信扫一扫加客服

微信扫一扫加客服