关于阿里云（前置工作）
- 首先需要在阿里云OSS开通服务，创建自己的Bucket列表。
- 出与安全考虑。需要设置为私有读写权限。
- 在阿里云获取accessKeyId和accessKeySecret
- 查看自己的region。（英文regionId）
代码部分
- 引入webpack插件
npm i webpack-aliyun-oss -D
npm i short-uuid -D
- 判断是否需要进行上传阿里云
需要根据环境判断是否需要将资源打包进入阿里云。如果需要上传阿里云时，需要修改配置项assetPrefix修改打包后资源的访问前缀
const isCDN =
process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'staging'
修改打包后资源html访问路径前缀
// https://test/static/ 为CDN给OSS加速路径。，如果不开通CDN,就需要设置Bucket为公共读
assetPrefix: isCDN
? 'https://test/static/' + uuid
: '',
- Webpackp配置
webpack: (config, options) => {
// 无需进行打包上传
if (!isCDN) return config
config.plugins.push(
new WebpackAliyunOss({
from: ['./.next/static/**'], // webpack打包后的所有静态资源存放目录
dist: '/static/' + uuid, // oss上传目录,避免静态资源不更新，需要每次不同的目录
region: ossConfig.region, // OSS regionID
accessKeyId: ossConfig.accessKeyId, // OSS accessKeyId
accessKeySecret: ossConfig.accessKeySecret, // OSS accessKeySecret
bucket: ossConfig.bucket, // 需要上传的阿里云Bucket的全名
overwrite: true, // 是否需要覆盖bucket上的同名文件
setOssPath(filePath) { // 设置文件上传后的文件名 filePath
// 以next为例，打包资源默认位置为.next,所以这里依靠.next定位
const index = filePath.lastIndexOf('.next')
let Path = filePath.substring(index, filePath.length) // filePath为当前文件路径。函数应该返回路径+文件名。
// 修改next 前缀，用以访问文件
Path = Path.replace('.next', '_next').replace(
Path.replace(/\\/g, '/')
)
return Path
},
})
)
return config
},
-
CDN/跨域设置
不使用CDN 可以忽略
选择加速的CDN域名管理
image.png
配置自定义相应头
header: Access-Control-Allow-Origin
value : *
