vue打包上传cdn实现自动化部署

大家都知道基于cdn访问的资源加载速度会大大优于直接访问部署在服务器上的资源的加载速度，本文基于阿里云及其相关产品，做了vue-cli2.0脚手架（公司原有的项目比较老），做了一些vue打包一键上传cdn并自动部署的尝试（不必再打包上传服务器更新资源），并对踩的一些坑做一些说明。

以下这些都是需要的准备工作

没有尝试过的小伙伴可能觉得好麻烦，其实也还好，点一点就好了，又不用敲代码！

微信截图_20210820160341.png

1.准备好服务器，并且申请域名并绑定好域名，这里不做赘述。

2.开启CDN服务，我选择了按流量收费，并且在cdn域名管理内添加域名，选择全站加速，源站信息可以填写你的服务器ip，阿里云上有非常详细的操作步骤。

微信截图_20210820160805.png

添加好之后会自动生产一个CNAME

微信截图_20210820161034.png

此时去你的域名管理-解析设置内，加入CDN内给你配置的CNAME解析

微信截图_20210820161616.png

阿里云上也有非常详细的配置操作说明，配置成功后Ping一下 看看能不能对应上，对应上了说明配置成功了。

微信截图_20210820162044.png

3.开启oss(对象存储)服务

我5块钱开通了半年，开通后新建Bucket

微信截图_20210820162314.png

这个有个注意点，bucket的版本控制最好不要开，前端其实也不需要。然后读写权限，要设置成公共读，不然你传上去的资源，你客户端可能访问不到哦。

原理：

这里简单说一下CDN的工作方式：

当你的oss绑定了cdn之后，你可以通过访问cdn的域名来访问你的oss

例如你在 OSS 上传了 a.zip 这个文件，你访问了cdn的域名想下载这个文件，cdn先在自己的缓存中查找 a.zip 这个文件，发现没找到，于是去源站oss找这个文件。如果找到了，就会放到cdn自己的缓存中。并根据你设定的时间保存缓存。这个过程就称为 回源 ， 这个时候oss流出的流量就叫 回源流量 （0.15元/GB）

当下次你再访问cdn下载 a.zip 这个文件的时候，因为上次cdn已经前往oss缓存过这个文件了，所以这次的请求不经过 OSS ，由cdn自主把它拥有的缓存文件发给你 ， 也就是说 理论上不产生OSS的流量费用

所以，当你使用CDN之后，只有第一次访问这个文件会产生OSS的回源流量，只要你在CDN中设置的缓存足够久，每次访问的流量理论上几乎不经过OSS，而是产生CDN的流量费用。

ok,到这里，你准备工作就全部完成了，接下来是代码环节。

1.要写个脚本要把你的资源上传到oss内，官网上有sdk，这里以node为例：新建一个index.js文件，同级目录下新建一个file文件夹，然后把打包好的dist文件夹丢进去

let OSS = require('ali-oss')
let fs = require('fs')

let client = new OSS({
  region: 'oss-cn-hangzhou',
  accessKeyId: '',
  accessKeySecret: '',
  bucket: 'xxxx'
})

// 使用async+await方法，实现同步化，方便在失败后重试处理
async function put(fileName) {
  try {
    let result = await client.put(fileName, './file/dist/' + fileName)
    console.log('File Upload Success: ', fileName)
  } catch (e) {
    console.log('File Upload Failed: ', fileName)
    // 这里省略异常/失败的重试
  }
}

// 读取打包后的 dist 路径，按照原文件夹结构，进行上传
let readFileList = (path, filesList) => {
  let files = fs.readdirSync(path)
  files.forEach(itm => {
    if (itm) {
      let stat = fs.statSync(path + itm)
      if (stat.isDirectory()) {
        readFileList(path + itm + '/', filesList)
      } else {
        filesList.push(path + itm)
      }
    }
  })
  return filesList
}
let dist = readFileList('./file/dist/', [])

// 递归执行文件上传操作
let i = 0, l = dist.length
let uploadAsset = () => {
  if (i < l) {
    let name = dist[i].split('./file/dist/')[1]
    put(name)
    i++
    uploadAsset()
  }
}
uploadAsset()

accessKeyId,accessKeySecret可以通过阿里云右上角点击头像出现的accessKey管理页面进去查看，bucket就是你的bucket名称。
执行

npm install --save-dev ali-oss
node index

就会发现文件都传上去了

微信截图_20210820163509.png

微信截图_20210820163545.png

传上去之后你去预览文件，可能会发现是直接下载文件的，而且文件后面有一大串参数？expire=XXXX什么的，这种情况下，这些资源是无法直接引入到我们的页面中的，前面讲到了要设置资源为公共读，然后要配置一下自有域名，配置完成之后，这个url就可以直接拿来用了。

微信截图_20210820164146.png

2.文件传上去了，下面只需要配置打包的时候资源引入路径为CDN上的url就可以了。

微信截图_20210820164434.png

vue-cli2.0也简单，红框里面配置成自有域名就可以了。3.0的话可以参考：
https://segmentfault.com/a/1190000018915895
到此为止，操作就都结束了。以后要做的就是npm run build之后，再执行一下node index，项目就自动部署了，然后到时候index.js的目录层级结构要变一下，最好是和package.json同级，然后对应的寻找dist的目录也改一下。到时候cdn上的Index.html文件的url访问路径，便是我们项目的首屏访问路径。

微信截图_20210820164937.png

这篇文章也写的不错哦，大家可以看下：
https://blog.m-jay.cn/?p=85