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

以下這些都是需要的準備工作

沒有嘗試過的小伙伴可能覺得好麻煩慈俯，其實也還好，點一點就好了拥峦，又不用敲代碼贴膘！

微信截圖_20210820160341.png

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

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

微信截圖_20210820160805.png

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

微信截圖_20210820161034.png

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

微信截圖_20210820161616.png

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

微信截圖_20210820162044.png

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

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

微信截圖_20210820162314.png

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

原理：

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

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

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

當下次你再訪問cdn下載 a.zip 這個文件的時候，因為上次cdn已經(jīng)前往oss緩存過這個文件了应结，所以這次的請求不經(jīng)過 OSS 刨疼，由cdn自主把它擁有的緩存文件發(fā)給你 ， 也就是說 理論上不產(chǎn)生OSS的流量費用

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

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

1.要寫個腳本要把你的資源上傳到oss內(nèi)侨糟，官網(wǎng)上有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方法，實現(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)，進行上傳
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可以通過阿里云右上角點擊頭像出現(xiàn)的accessKey管理頁面進去查看服鹅，bucket就是你的bucket名稱凳兵。
執(zhí)行

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

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

微信截圖_20210820163509.png

微信截圖_20210820163545.png

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

微信截圖_20210820164146.png

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

微信截圖_20210820164434.png

微信截圖_20210820164937.png