需求
在Next项目构建完成后,自动将static资源发布到cdn上,区分sit,prod环境
难点分析
1:需要上传整个文件夹并且不改变目录结构
2:需要区分不同的部署环境。
步骤
使用coscmd
1: 安装依赖
2: package.json中添加命令
"build": "next build && cos up",
"build-sit":"cross-env NODE_ENV=development next build && cos up",
添加cos.config.js
问题
在cos.config.js中无法读取之前设置的NODE_ENV环境变量,因此使用环境变量process.env.npm_lifecycle_event进行区分,该变量存储的为构建时候的命令,通过该变量然后可以判断需要部署的环境。
const isProd = process.env.npm_lifecycle_event;//build build-sit
// console.log('******************************************************',process.env)
console.log('*******************************************',process.env.npm_lifecycle_event)
module.exports = {
client: {
enable: true, // 是否启用
Bucket: isProd=='build-sit' ? "sit" : "prod", // COS 存储桶的名称
Region: isProd=='build-sit' ? "ap-shanghai" : "ap-hongkong", // COS 存储桶所在地域
SecretId: process.env.SecretId, // 腾讯云 SecretId
SecretKey: process.env.SecretKey, // 腾讯云 SecretKey
},
upload: {
source: ".next/static", // 本地资源,支持单文件、文件夹、glob 表达式
//ignore: ["dist/**/*.map"], // 要忽略文件的 glob 表达式
cwd: process.cwd(), // 查找 source 时的工作目录,默认是 process.cwd()
target: "_next/static", // 保存到 COS 的路径,默认是根路径
rename: false, // 是否对文件进行重命名,如何设置为 true 默认重命名为 16 个小写字母和数字的随机组合,设置为数字可以自定义长度
flat: false, // 是否铺平文件夹层级
showProgress: true, // 是否以进度条的形式展示上传过程
cdnPurgeCache: false, // 是否刷新 CDN 缓存
cdnPushCache: false, // 是否预热 CDN 缓存
dryRun: false, // 只模拟上传过程,不实际上传
},
};
此处还是推荐使用和服务器通信的方式获得临时的id和key,这样会更安全
tips:需要注意该依赖只支持linux环境下的文件夹上传,未兼容windows,windows上传时候文件路径为\。
具体用法参考官方文档:
https://www.npmjs.com/package/coscmd