關(guān)于阿里云（前置工作）
- 首先需要在阿里云OSS開通服務(wù)，創(chuàng)建自己的Bucket列表。
- 出與安全考慮。需要設(shè)置為私有讀寫權(quán)限。
- 在阿里云獲取accessKeyId和accessKeySecret
- 查看自己的region。（英文regionId）
代碼部分
- 引入webpack插件
npm i webpack-aliyun-oss -D
npm i short-uuid -D
- 判斷是否需要進(jìn)行上傳阿里云
需要根據(jù)環(huán)境判斷是否需要將資源打包進(jìn)入阿里云。如果需要上傳阿里云時(shí)，需要修改配置項(xiàng)assetPrefix修改打包后資源的訪問(wèn)前綴
const isCDN =
process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'staging'
修改打包后資源html訪問(wèn)路徑前綴
// https://test/static/ 為CDN給OSS加速路徑。，如果不開通CDN,就需要設(shè)置Bucket為公共讀
assetPrefix: isCDN
? 'https://test/static/' + uuid
: '',
- Webpackp配置
webpack: (config, options) => {
// 無(wú)需進(jìn)行打包上傳
if (!isCDN) return config
config.plugins.push(
new WebpackAliyunOss({
from: ['./.next/static/**'], // webpack打包后的所有靜態(tài)資源存放目錄
dist: '/static/' + uuid, // oss上傳目錄,避免靜態(tài)資源不更新，需要每次不同的目錄
region: ossConfig.region, // OSS regionID
accessKeyId: ossConfig.accessKeyId, // OSS accessKeyId
accessKeySecret: ossConfig.accessKeySecret, // OSS accessKeySecret
bucket: ossConfig.bucket, // 需要上傳的阿里云Bucket的全名
overwrite: true, // 是否需要覆蓋bucket上的同名文件
setOssPath(filePath) { // 設(shè)置文件上傳后的文件名 filePath
// 以next為例，打包資源默認(rèn)位置為.next,所以這里依靠.next定位
const index = filePath.lastIndexOf('.next')
let Path = filePath.substring(index, filePath.length) // filePath為當(dāng)前文件路徑。函數(shù)應(yīng)該返回路徑+文件名。
// 修改next 前綴，用以訪問(wèn)文件
Path = Path.replace('.next', '_next').replace(
Path.replace(/\\/g, '/')
)
return Path
},
})
)
return config
},
-
CDN/跨域設(shè)置
不使用CDN 可以忽略
選擇加速的CDN域名管理
image.png
配置自定義相應(yīng)頭
header: Access-Control-Allow-Origin
value : *
