爽歪歪，一键提交，coding主动化布置COS，OSS静态网站

愿景

你只管写博客，剩余的就给主动化了！！！

在本地写完markdown后，提交到长途github，剩余的就完全主动化布置，喝杯茶的功夫，回来就能够看到新鲜的页面了。

方案

• 博客：vuepress
• 主动化布置：coding
• 寄存文件：腾讯云cos / 阿里oss

vuepress

怎么经过vuepress构建个人blog就不多描绘了，快速入门：vuepress

coding 主动布置

初始化自己的团队、项目

• coding传送门

构建方案

• 进入项目
• 点击左边菜单，持续集成–>构建方案
• 创建构建方案
• 在方案模板中，挑选Vue + COS或者 React + COS
• 填写对应的构建信息， 如代码库房、COS信息
• 确认完结

代码库房

代码库房能够挑选coding的代码库房和外部的github库房， 如果是外部的需求自行绑定一下

COS OSS

腾讯的COS，阿里的OSS 相似，需自己注册一下，非常便利

构建优化

模板中的初始构建脚本可能不适合咱们， 需求稍微优化一下

• 新建环境变量
  • 腾讯COS
    • COS_SECRET_ID
    • COS_SECRET_KEY
    • COS_BUCKET_NAME
    • COS_UPLOAD_FROM_PATH
  • 阿里OSS
    • ACCESS_KEY_ID
    • ACCESS_KEY_SECRET
    • ENDPOINT

腾讯COS 构建

因生态优势，默许就能够支撑coscmd上传，只需填入相应信息即可

pipeline {
  agent any
  stages {
    stage('检出') {
      steps {
        checkout([$class: 'GitSCM',
        branches: [[name: GIT_BUILD_REF]],
        userRemoteConfigs: [[
          url: GIT_REPO_URL,
          credentialsId: CREDENTIALS_ID
        ]]])
      }
    }
    stage('装置依赖') {
      steps {
        sh 'npm install'
      }
    }
    stage('编译') {
      steps {
        sh '''npm run build'''
      }
    }
    stage('上传到 COS Bucket') {
      steps {
        sh "coscmd config -a ${COS_SECRET_ID} -s ${COS_SECRET_KEY} -b ${COS_BUCKET_NAME} -r ${COS_BUCKET_REGION}"
        sh "coscmd upload -r ${COS_UPLOAD_FROM_PATH} /"
        echo "上传成功，拜访 https://${COS_BUCKET_NAME}.cos-website.${COS_BUCKET_REGION}.myqcloud.com 预览作用"
        echo "您也能够拜访原域名 https://${COS_BUCKET_NAME}.cos.${COS_BUCKET_REGION}.myqcloud.com/index.html 预览作用"
      }
    }
  }
}

阿里ali-oss 构建

经过ossutil 进行上传， 需先装置经过ossutil再使用脚本命令。

在package.json中增加一条script脚本， 其间html为上传目录，oss://app-blog/为oss://+ bucket名

"ali-oss": "ossutil cp -rf --meta Cache-Control:no-cache html oss://app-blog/ ",

pipeline {
  agent any
  stages {
    stage('检出') {
      steps {
        checkout([$class: 'GitSCM',
        branches: [[name: GIT_BUILD_REF]],
        userRemoteConfigs: [[
          url: GIT_REPO_URL,
          credentialsId: CREDENTIALS_ID
        ]]])
      }
    }
    stage('装置依赖') {
      steps {
        sh 'npm install'
      }
    }
    stage('编译') {
      steps {
        sh '''npm run build'''
      }
    }
    stage('上传到 COS Bucket') {
      steps {
        sh "wget https://gosspublic.alicdn.com/ossutil/1.7.12/ossutil64 -O /usr/local/bin/ossutil \
        && chmod 755 /usr/local/bin/ossutil \
        && ossutil config -i ${ACCESS_KEY_ID} -k ${ACCESS_KEY_SECRET} -e ${ENDPOINT}"
        sh 'npm run ali-oss'
        echo "上传成功"
      }
    }
  }
}

自定义域名

在COS、OSS中都有自定义域名绑定， 能够绑定自定义域名，便利在浏览器中进行拜访

总结

• 本文要点描绘了怎么coding 构建方案，实现上传构建文件到COS、OSS中， 其间COS方案相对容易， OSS方案需装置软件ossutil合作脚本命令进行上传，补全了OSS方案

• 主动化进程

  • 编写markdown文件，push到长途代码库房
  • coding构建方案被触发构建
  • 上传构建文件到COS/OSS
  • 页面更新

• 本文以简略的vuepress为例，实际前端项目布置也比较相似，大家可参考。