自动化部署static资源到cos-bucket

需求

在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",
1
2

添加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, // 只模拟上传过程，不实际上传
    },
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

此处还是推荐使用和服务器通信的方式获得临时的id和key，这样会更安全

tips：需要注意该依赖只支持linux环境下的文件夹上传，未兼容windows，windows上传时候文件路径为\。
具体用法参考官方文档：
https://www.npmjs.com/package/coscmd