基于腾讯CNB的前端代码自动构建及发布流程
基于腾讯CNB的前端代码自动构建及发布流程
自己有一个小网站，一个纯前端的小站点，主要是为了给自己接一点小私活,由于服务器一直用的是腾讯云（便宜啊，299，3年），所以代码自动化部署也用的是腾讯云的Coding，最近需要更新一下数据，提交代码发现Coding已经在6月份就进行了淘汰，迁移到腾讯新推出了腾讯云原生构建（CNB），好名字啊！超牛B还是吹牛B我们先不说，要是我是付费用户肯定不开心，但是咱不是免费用户吗？有一个大一点的正规平台，免费提供自动化构建发布流水线我们还有什么不开心？要什么自行车！话不多说直接开干！
- 登录CNB https://cnb.cool/，创建新的代码库, 并将自己的代码推送到腾讯云仓库.
流程架构
- 创建容器镜像服务，
由于以前的服务器一直在阿里云，所以沿用了阿里云的容器镜像服务，主打一个用免费的！ 阿里云容器镜像服务地址， https://www.aliyun.com/product/acr/，腾讯也有自己的容器镜像服务，需要的评论留言，我在更新。这一步主要是提供远程docker容器镜像服务的，让我们可以把自己的代码镜像上传到一个公共的地方，方便部署时拉。
- 创建自动化构建脚本
由于现在免费的https 证书3个月一到期，并且我经常修改nginx的一些转发端口等信息，所以在启动镜像时，将该部分内容挂载到本地目录：docker run --restart=always -di -v /home/llpdocker/llphome/nginx.conf:/etc/nginx/nginx.conf -v /home/llpdocker/llphome/etc/nginx/lloll.top.key:/etc/nginx/lloll.top.key -v /home/llpdocker/llphome/etc/nginx/lloll.top_bundle.crt:/etc/nginx/lloll.top_bundle.crt --name=c_llphome -p 80:80 -p 443:443 i_llphome
该步骤会使用SSH远程登录你的服务器，请自行搜索SSH如何远程登录服务器，并且保护好你自己的私钥！
master: push: - services: - docker imports: - 你的安全密钥私有代码仓库 stages: - name: echo your build data script: echo ${CNB_BUILD_USER} 通过 ${CNB_BRANCH} 分支触发了 ${CNB_EVENT} 事件 - name: 查看目录 script: | ls -a cat Dockerfile - name: docker login script: docker login -u ${Docker_UserName} -p "${Docker_Password}" ${Docker_Hosts} - name: docker build script: docker build -t ${Docker_Hosts}/xhgycf/llphome:${CNB_BUILD_ID} . - name: "docker push" script: docker push ${Docker_Hosts}/xhgycf/llphome:${CNB_BUILD_ID} #def dockerImage = docker.build(${Docker_Hosts}/xhgycf/llphome:${CNB_BUILD_ID}, "-f ./Dockerfile .") #dockerImage.tag("${Docker_Hosts}/xhgycf/llphome:${CNB_BUILD_ID}") #dockerImage.push("${Docker_Hosts}/xhgycf/llphome:${CNB_BUILD_ID}") - name: deploy to vm image: cnbcool/ssh imports: 你的安全密钥私有代码仓库 settings: host: $REMOTE_HOST port: $REMOTE_PORT username: $REMOTE_USERNAME key: $PRIVATE_KEY script: | echo -e "\033[32m docker login \033[0m" docker login -u ${Docker_UserName} -p "${Docker_Password}" ${Docker_Hosts} echo -e "\033[32m load docker images \033[0m" docker pull ${Docker_Hosts}/xhgycf/llphome:${CNB_BUILD_ID} docker rmi i_llpcmlapi echo -e "\033[32m docker tag \033[0m" docker tag ${Docker_Hosts}/xhgycf/llphome:${CNB_BUILD_ID} i_llphome docker stop c_llphome || true docker rm c_llphome || true docker run --restart=always -di -v /home/llpdocker/llphome/nginx.conf:/etc/nginx/nginx.conf -v /home/llpdocker/llphome/etc/nginx/lloll.top.key:/etc/nginx/lloll.top.key -v /home/llpdocker/llphome/etc/nginx/lloll.top_bundle.crt:/etc/nginx/lloll.top_bundle.crt --name=c_llphome -p 80:80 -p 443:443 i_llphome docker ps 构建流水线效果图
- 创建密钥仓库
参考文档 https://docs.cnb.cool/zh/repo/secret.html，虽然我不是很喜欢这种密钥仓库的形式存放用户名、密码、私钥等安全信息，但是腾讯云说了它提供了一系列方式保障安全，免费的，没办法先相信吧！希望以后有可以修改一个这种对敏感信息的存储方式！
一定要记得选密钥仓库啊！！！不要可能会造成敏感信息泄露喔！！！
密钥yml参考内容：如果报错格式不对，可以用yml check检测一下你的yml 格式https://yamlchecker.com/
Docker_UserName: "容器镜像用户名" Docker_Hosts: "容器镜像地址" Docker_Password: "容器镜像密码" REMOTE_HOST: "远程主机地址" REMOTE_USERNAME: "用户名" REMOTE_PORT: "SSH端口" PRIVATE_KEY: | -----BEGIN RSA PRIVATE KEY----- 这只是一个示例KCAQEAlSazxyWTBgZ4hmpFEwLp512dzQgx4Jwsh1EnHC63klsOWvH6 PUOdmiq4QYi45W7tMikPBAaMptSB6OUOz0xR1P6VneOA7lAAAA这只是一个示例 -----END RSA PRIVATE KEY----- - 基于dockerfile的自动构建，核心就是基于nginx镜像打包，把所有的前端文件copy到指定目录.
# 基础镜像使用Nginx FROM nginx # 作者 MAINTAINER llp # 添加时区环境变量，亚洲，上海 ENV TimeZone=Asia/Shanghai # 将前端dist文件中的内容复制到nginx目录 COPY ../ /usr/share/nginx/html/ # 用本地的nginx配置文件覆盖镜像的Nginx配置 COPY nginx.conf /etc/nginx/nginx.conf # 暴露端口 EXPOSE 80# 设置环境变量TZ ENV TZ=Asia/Shanghai # 配置时区 RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime &&echo$TZ> /etc/timezone - 现在所以的准备都完成了，前端一但提交代码就会自动触发任务流水线，发布到我们的远程服务器了。就和你在公司使用的自动化发布平台一样分方便喔，大家一起来试试吧！
成功访问
