nextjs 如何將靜態資源發布到 CDN

nextjs 是基於 react 的服務端同構指出框架，在使用的過程中也多多少少遇到過幾個問題，其中最大的問題就是靜態資源的發布了。

按照官網上的說法，每次發布都會生成新的 hash 路徑，即使當前沒有任何的變動。例如某次發布的路徑是/_next/static/tzonugey-gpceexgbfapl/pages/index.js，那麼下次的 hash 必然不是這個值。這樣導致的乙個問題是：如果在多台機器上發布並 build 時，會導致每次 build 產生的值不同。如果想固定某個值或者使用某個值，乙個是可以先 build 完成後後再分發，或者，可以在next.config.js中自定義generatebuildid：

// 來自官網上的例子
// next.config.js
module.exports = 
};

npm 上也有提供相應的安裝包，可以使用當前 git 提交的 hash 值作為 buildid：next-build-id。

靜態資源上傳到 cdn，這是存在目前存在的最大的問題，雖然在next.config.js中可以配置assetprefix字段，但實際使用起來還是非常困難。

打包後的 js 和 css，引用路由均為/_next/static開頭：

我們以 2019/09/16 提交的 nextjs 原始碼為例：pages_document，裡面有全域性脫水資料的注入，頁面相關的 js 和靜態資源的 js 的拼接：

// 頁面相關的js // assetprefix為我們在next.config.js中配置的字首 // $即為每次打包生成的hash值，在本地環境下值為development // _devonlyinvalidatecachequerystring: 變動的時間戳，正式環境中為空, _devonlyinvalidatecachequerystring: process.env.node_env !== 'production' ? '?ts=' + date.now() : '' src=/pages$`) + _devonlyinvalidatecachequerystring} // 靜態資源的js src=/_next/$$`}

全域性脫水資料的注入

中間多出了/_next/static的路徑，最後的結果是頁面需要載入的資源和上傳的資源路徑不一致，就會各種 404。這裡我的解決方案很簡單粗暴，讀取編譯後的檔案，然後執行 node 程式，將裡面的字元替換掉：

const fs = require('fs');
// 獲取資料夾中所有的檔案
function readdirall(path) ;
var result = ; // 儲存獲取到的檔案
var stats = fs.statsync(path); // 獲取當前檔案的狀態
if (stats.isfile()) else if (stats.isdirectory()) else if (st.isdirectory() && item !== 'cache') }}
return result;
}const list = readdirall('.next');
list.foreach(file => else if (file.indexof('build-manifest.json') > -1) else if (data.indexof('/_next/static') > -1) 
});

這樣就能就可以保證專案的 cdn 位址和真正上傳的位址是一致的了。

nextjs 如何將靜態資源發布到 CDN

如何將部署靜態資源到nginx上，超詳細解決

如何將iOS應用發布到App Store詳解

如何將VUE專案發布到GitHub上

nextjs 如何將靜態資源發布到 CDN

如何將部署靜態資源到nginx上，超詳細解決

如何將iOS應用發布到App Store詳解

如何將VUE專案發布到GitHub上

相關推薦