使用Coding持续集成构建流水线自动部署自建静态网站

hexocoding
总字数: 1.2k字 预计阅读: 5分钟

CODING 持续集成便是专门为此工作流而设计的得力功能。通过对每次提交的代码进行自动化的代码检查、单元测试、编译构建、甚至自动部署与发布，能够大大降低开发人员的工作负担，减少许多不必要的重复劳动，持续提升代码质量与开发效率。毫无疑问，持续集成是开发者与研发团队的福音。

背景

静态网站无需购买昂贵的服务器，建议使用先进架构：云存储 + CDN，优点：

提醒：

  • 如果网站面向中国境内用户，需要进行域名备案，然后才能绑定到境内的云存储/CDN。本文以腾讯云为例，其他云计算厂商的流程也类似。
  • 如果网站面向中国境外用户，可直接使用境外云存储/CDN 搭建静态网站。

静态网站有 2 种：

  • 无内容的单页应用：VUE/React SPA；
  • 有内容的页面：HTML 或「程序生成 HTML」；

警告：VUE/React SPA 不带内容，难以被搜索引擎收录，不适合作为公司官网、个人博客。如果有 SEO 需求，推荐使用 MkDocs、Hexo、VUE Nuxt、React Next。

技术方案

通过「持续集成」把 HTML 自动部署到「云存储」，变成静态网站。

  1. 把项目代码推送到 「CODING 代码仓库」。
  2. 在「腾讯云 对象存储 COS」中创建一个「公有读私有写」的「存储桶」，并在设置中开启「静态网站」，即可获得一个访问链接，然后在「腾讯云 账号」的「访问管理」中获取「访问密钥」。
  3. 在「CODING 持续集成」中创建一个 构建任务，把下文的 Jenkinsfile 复制进去，设置环境变量，然后手动「立即构建」，构建成功，访问上面的链接即可看到网站。下次推送代码即可自动部署。
  4. 如果你的域名已备案，则可在「腾讯云 对象存储」的设置中绑定「自定义加速域名」，会提示开通「内容分发网络 CDN」，小型网站建议选择「按使用流量计费」（每月赠送 10GB，小型网站一般用不完），然后进入「内容分发网络 CDN」——「域名管理」——某个域名——「高级设置」——「HTTPS 配置」中，申请免费的 HTTPS 证书，并开启「HTTPS 回源」、「强制跳转 HTTPS」和「HTTP 2.0」。
  5. 在「腾讯云 对象存储 COS」中开启「自动刷新 CDN」，参考文档「CDN 缓存刷新」。

Jenkinsfile

浏览完整代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
pipeline {
  agent any
  stages {
    stage('检出') {
      steps {
        checkout([
          $class: 'GitSCM',
          branches: [[name: env.GIT_BUILD_REF]], 
          userRemoteConfigs: [[url: env.GIT_REPO_URL, credentialsId: env.CREDENTIALS_ID]]
        ])
      }
    }
    stage('部署到腾讯云存储') {
      steps {
        sh "coscmd config -a ${env.COS_SECRET_ID} -s ${env.COS_SECRET_KEY} -b ${env.COS_BUCKET_NAME} -r ${env.COS_BUCKET_REGION}"
        sh 'rm -rf .git'
        sh 'coscmd upload -r ./ /'
      }
    }
  }
}

持续集成环境变量

变量名 含义 参考值
COS_SECRET_ID 腾讯云访问密钥 ID stringLength36stringLength36string36
COS_SECRET_KEY 腾讯云访问密钥 KEY stringLength32stringLength323232
COS_BUCKET_NAME 腾讯云对象存储桶 devops-host-1257110097
COS_BUCKET_REGION 腾讯云对象存储区域 ap-nanjing

截图

腾讯云存储 COS 创建存储桶

腾讯云存储 COS 开启静态网站

腾讯云 访问密钥

腾讯云存储 COS 自定义加速域名

腾讯云 内容分发网络 开启 HTTPS

腾讯云存储 COS 自动刷新 CDN

各种语言生成 HTML

MKDocs

浏览完整代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
pipeline {
  agent any
  stages {
    stage('检出') {...}
    stage('构建') {
      steps {
        echo 'Markdown 转成 HTML'
        sh 'pip install --upgrade mkdocs six'
        sh 'mkdocs build --clean'
      }
    }
    stage('部署到云存储') {
      steps {
        sh "coscmd config ..."
        sh 'coscmd upload -r site/ /'
      }
    }
  }
}

VUE Nuxt

浏览完整代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
pipeline {
  agent any
  stages {
    stage('检出') {...}
    stage('构建') {
      steps {
        echo 'VUE Nuxt 生成 HTML'
        sh 'npm install'
        sh 'npm run generate'
      }
    }
    stage('部署到云存储') {
      steps {
        sh "coscmd config ..."
        sh 'coscmd upload -r dist/ /'
      }
    }
  }
}

VUE

浏览完整代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
pipeline {
  agent any
  stages {
    stage('检出') {...}
    stage('构建') {
      steps {
        echo 'VUE 生成 HTML'
        sh 'npm install'
        sh 'npm run build'
      }
    }
    stage('部署到云存储') {
      steps {
        sh "coscmd config ..."
        sh 'coscmd upload -r dist/ /'
      }
    }
  }
}

React

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
pipeline {
  agent any
  stages {
    stage('检出') {...}
    stage('构建') {
      steps {
        echo 'React 生成 HTML'
        sh 'npm install'
        sh 'npm run build'
      }
    }
    stage('部署到云存储') {
      steps {
        sh "coscmd config ..."
        sh 'coscmd upload -r build/ /'
      }
    }
  }
}

参考

https://coding.net/help/docs/devops/ci/practice/static-website-paas.html

个人微信公众号技术交流QQ群

本文标题:使用Coding持续集成构建流水线自动部署自建静态网站

文章作者:

发布时间:2023-02-25, 20:46:37

最后更新:2023-11-11, 13:56:23

原始链接:http://www.skyheng.com/post/61793.html

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 背景
  2. 2. 技术方案
    1. 2.1. Jenkinsfile
    2. 2.2. 持续集成环境变量
    3. 2.3. 截图
  3. 3. 各种语言生成 HTML
    1. 3.1. MKDocs
    2. 3.2. VUE Nuxt
    3. 3.3. VUE
    4. 3.4. React
  4. 4. 参考