爽歪歪，一键提交，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为例，实际前端项目部署也比较类似，大家可参考。

爽歪歪，一键提交，coding自动化部署COS，OSS网站