自动化部署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",

添加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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值