大家都知道基于cdn訪問的資源加載速度會大大優(yōu)于直接訪問部署在服務(wù)器上的資源的加載速度，本文基于阿里云及其相關(guān)產(chǎn)品，做了vue-cli2.0腳手架（公司原有的項(xiàng)目比較老），做了一些vue打包一鍵上傳cdn并自動部署的嘗試（不必再打包上傳服務(wù)器更新資源），并對踩的一些坑做一些說明。

以下這些都是需要的準(zhǔn)備工作

沒有嘗試過的小伙伴可能覺得好麻煩，其實(shí)也還好，點(diǎn)一點(diǎn)就好了，又不用敲代碼！

微信截圖_20210820160341.png

1.準(zhǔn)備好服務(wù)器，并且申請域名并綁定好域名，這里不做贅述。

2.開啟CDN服務(wù)，我選擇了按流量收費(fèi)，并且在cdn域名管理內(nèi)添加域名，選擇全站加速，源站信息可以填寫你的服務(wù)器ip，阿里云上有非常詳細(xì)的操作步驟。

微信截圖_20210820160805.png

添加好之后會自動生產(chǎn)一個(gè)CNAME

微信截圖_20210820161034.png

此時(shí)去你的域名管理-解析設(shè)置內(nèi)，加入CDN內(nèi)給你配置的CNAME解析

微信截圖_20210820161616.png

阿里云上也有非常詳細(xì)的配置操作說明，配置成功后Ping一下 看看能不能對應(yīng)上，對應(yīng)上了說明配置成功了。

微信截圖_20210820162044.png

3.開啟oss(對象存儲)服務(wù)

我5塊錢開通了半年，開通后新建Bucket

微信截圖_20210820162314.png

這個(gè)有個(gè)注意點(diǎn)，bucket的版本控制最好不要開，前端其實(shí)也不需要。然后讀寫權(quán)限，要設(shè)置成公共讀，不然你傳上去的資源，你客戶端可能訪問不到哦。

原理：

這里簡單說一下CDN的工作方式：

當(dāng)你的oss綁定了cdn之后，你可以通過訪問cdn的域名來訪問你的oss

例如你在 OSS 上傳了 a.zip 這個(gè)文件，你訪問了cdn的域名想下載這個(gè)文件，cdn先在自己的緩存中查找 a.zip 這個(gè)文件，發(fā)現(xiàn)沒找到，于是去源站oss找這個(gè)文件。如果找到了，就會放到cdn自己的緩存中。并根據(jù)你設(shè)定的時(shí)間保存緩存。這個(gè)過程就稱為 回源 ， 這個(gè)時(shí)候oss流出的流量就叫 回源流量 （0.15元/GB）

當(dāng)下次你再訪問cdn下載 a.zip 這個(gè)文件的時(shí)候，因?yàn)樯洗蝐dn已經(jīng)前往oss緩存過這個(gè)文件了，所以這次的請求不經(jīng)過 OSS ，由cdn自主把它擁有的緩存文件發(fā)給你 ， 也就是說 理論上不產(chǎn)生OSS的流量費(fèi)用

所以，當(dāng)你使用CDN之后，只有第一次訪問這個(gè)文件會產(chǎn)生OSS的回源流量，只要你在CDN中設(shè)置的緩存足夠久，每次訪問的流量理論上幾乎不經(jīng)過OSS，而是產(chǎn)生CDN的流量費(fèi)用。

ok,到這里，你準(zhǔn)備工作就全部完成了，接下來是代碼環(huán)節(jié)。

1.要寫個(gè)腳本要把你的資源上傳到oss內(nèi)，官網(wǎng)上有sdk，這里以node為例：新建一個(gè)index.js文件，同級目錄下新建一個(gè)file文件夾，然后把打包好的dist文件夾丟進(jìn)去

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

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

// 使用async+await方法，實(shí)現(xiàn)同步化，方便在失敗后重試處理
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 路徑，按照原文件夾結(jié)構(gòu)，進(jìn)行上傳
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/', [])

// 遞歸執(zhí)行文件上傳操作
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可以通過阿里云右上角點(diǎn)擊頭像出現(xiàn)的accessKey管理頁面進(jìn)去查看，bucket就是你的bucket名稱。
執(zhí)行

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

就會發(fā)現(xiàn)文件都傳上去了

微信截圖_20210820163509.png

微信截圖_20210820163545.png

傳上去之后你去預(yù)覽文件，可能會發(fā)現(xiàn)是直接下載文件的，而且文件后面有一大串參數(shù)？expire=XXXX什么的，這種情況下，這些資源是無法直接引入到我們的頁面中的，前面講到了要設(shè)置資源為公共讀，然后要配置一下自有域名，配置完成之后，這個(gè)url就可以直接拿來用了。

微信截圖_20210820164146.png

2.文件傳上去了，下面只需要配置打包的時(shí)候資源引入路徑為CDN上的url就可以了。

微信截圖_20210820164434.png

微信截圖_20210820164937.png