cdn配置信息如何同步

阿里云CDN设置

服务器 阿里云 云服务器ECS Centos7.4

域名 阿里云的域名

SSL协议 certbot生成的SSL协议

阿里云官方CDN 学习路径

1.为什么使用CDN？

阿里云内容分发网络 CDN 将源站内容分发至最接近用户的节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率。

从这个节点获取资源，使得访问更加流畅，降低真实服务器的负载。

对于家大业大的服务器拥有者可以通过增加带宽达到相同的效果。

登录阿里云账号，在阿里云 控制台页面 下面产品选择CDN，或者左上角侧导航点击打开，再下来选项中选择CDN

1.开通方式有两种，一种流量方式，一种带宽方式

使用流量，通过购买流量包，在访问缓存在节点资源时候，会消耗流量，直到流量用完。

使用带宽，包年服务

2.选择某一种方式，勾选同意CDN协议，即可开通成功

1.如果走流量，进入CDN控制台，购买流量包

配置如下

2.创建加速域名（域名管理-添加域名）目的获取 CNAME

3.解析域名

针对阿里云域名，依照 步骤

值得注意的主机记录与记录类型搭配的组合 不能与列表中的其他项目冲突

在这一切都完成后，通过WIN+R 输入cmd打开终端，通过 ping 加速域名 来查看是否成功开启CDN

如果出现

如果回显信息包括 . kunlun*.com，则表示CNAME配置已经生效，域名加速也已生效。

访问下自己加速域名下的资源看一看,是否出现了问题?

出现的问题：

1.如果 CDN管理 中的HTTPS显示未开启，而自己确开通了HTTPS（配置了SSL），那么通过HTTPS访问网站资源会报错，说是无法加密解密，我出现这个问题，是因为我使用的certbot配置的SSL,由于挂载得项目需要python2.7等问题，虽然配置SSL成功，但是有一个警告

NGINX configured with OpenSSL alternatives is not officiallysupported by Certbot.

所以出现这个问题后，我不知道是不是因为SSL本身配置的问题

查看 域名管理列表 - 点击加速域名右侧的 管理 ，选择HTTPS配置 强制跳转

配置了 https - http

最终问题得到了解决，资源可以访问到了

2. 配置CDN且预热资源成功，但是总是无法命中，回源怎么办？

进入CDN控制台 -》 域名管理 -》管理 -》缓存配置 -》 添加

地址添加需要缓存的文件后缀，多个以“,”号分隔；添加过期时间和权重，其中权重 1-99 ，权重越高，执行规则越优先

添加完一个后，可以继续点击添加，添加另一个规则。

以我的为例，我需要对视频进行CDN节点加速，则

1. 关闭CDN服务 , 选择列表内的操作域名 最右侧三个点，点开有 停止 与 删除 ，可供操作

2.CDN提供资源的刷新和预热功能。

通过刷新功能，您可以强制CDN节点回源并获取最新文件；

通过预热功能您可以在业务高峰前预热热门资源，提高资源访问效率。

通过本文您可以了解刷新和预热功能的配置方法，也可以查询其操作记录。

刷新操作，将最新内容强制推送至CDN节点 - 进入 CDN控制台 -》 点击 刷新预热 -》 选择操作方式 -》 添加对应内容

如：

刷新

淘汰旧文件，重新获取文件的新版本

当文件有跟新时，需要手动执行刷新操作，将CDN中缓存的历史版本设置为超时，并从源站获取最新的版本。

刷新操作相对于一个触发更新的动作。

如果不刷会有啥问题呢?

用户在访问URL时，命中的是CDN中的旧数据，因此需要“缓存刷新”。

预热

首次发布的文件，主动从源站推送到CDN，让用户访问到CDN时不用回源命中

预热时间

资源预热完成时间将取决于用户提交预热文件的数量、文件大小、源站带宽情况、网络状况等诸多因素。

手动访问加速域名，只是推送数据到离你最近的节点，而不是所有的节点，所以阿里云CDN还是需要预热或刷新同步资源。

手机cdn怎么设置

1、在手机中打开浏览器搜索还未官网。

2、在华为官网中选中待操作的桶，在桶列表上方单击“更多配置cdn下载”。

3、系统弹出“配置cdn下载”对话框。

4、在待配置的用户域名所在行后面，勾选“启用cdn下载”。

5、在弹出的消息窗口中，单击“确定”关闭消息窗口即可在手机上设置cdn。

如何正确配置腾讯云CDN

1.网页静态内容/移动应用加速

推荐配置：CDN+云主机CVM+对象存储COS

2.大文件下载分发/音视频点播加速

推荐配置：CDN+对象存储COS

3.音视频直播加速

推荐配置：CDN+对象存储COS

cdn里的数据怎么传进去

CDN（内容分发网络）是一种通过在全球各地部署节点服务器来提高网站访问速度和稳定性的技术。将数据传输到 CDN 中需要以下步骤：

1. 选择 CDN 服务提供商：选择一个可靠的 CDN 服务提供商，根据自己的需求选择合适的服务套餐。

2. 注册 CDN 服务：注册 CDN 服务并获取 CDN 的 API 密钥，这些信息将用于将数据上传到 CDN。

3. 上传数据到 CDN：将需要分发的数据上传到 CDN，通常可以通过 CDN 服务提供商提供的 API 或控制面板来完成上传。

4. 配置 CDN：配置 CDN 以确保数据可以被正确分发。这包括设置缓存策略、域名解析、SSL 证书等。

5. 测试 CDN：测试 CDN 是否正常工作，包括测试数据是否可以被正确分发、访问速度是否有所提高等。

需要注意的是，上传数据到 CDN 时需要注意数据的安全性和完整性，以避免数据泄露或损坏。此外，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