Liu-fu-gui Liu-fu-gui

最近在开发前端项目时，经常需要将代码部署至服务器然后在不同手机端测试兼容效果。频繁部署更新项目太浪费时间。github提供了webhook接口，可以对接Jenkins实现CICD，但对于个人小项目来说，单独部署一套Jenkins实现完整的CICD流程。今天给大家推荐一套腾讯开发的DevOps平台——coding。

一、coding与云效对比

两个平台我都使用过，首先说说各自的优劣。同一个项目，使用云效整个CICD流程要比coding更短。而且云效的流水线将CI CD两个过程通过流水线组合到一起，编辑整个项目流程更加方便，并且提供了和jira类似的任务看板功能。缺点就是太贵了，不适合个人项目开发使用。但是个人使用免费版功能太少，并且流水线只能免费试用一年，以后需要付费试用。 image.png 于是我将目光投向了腾讯的coding，云效的基础功能都有，只不过敏捷开发那一块做的没有云效好，但最重要的是可以长期免费使用。 image.png 如果个人项目使用，开发人员较少，不需要大量的团队协作，着重使用CICD功能，毫无疑问，coding无疑是最好的选择。

二 CI、CD流程分析

1. DevOps理念

u=727007533,2869911473&fm=26&fmt=auto&gp=0.webp image.png

2. 使用coding实现CI CD

coding的功能模块主要有以下几个 image.png 使用coding目标流程如下：

  • 开发阶段：当开发人员完成代码开发，测试无误后将代码合并至git仓库master分支，触发持续集成操作。
  • 持续集成：从git仓库拉取最新代码，并根据项目中的dockerfile自动打包生成最新版本的docker镜像。
  • 持续部署：镜像打包完成后，自动触发持续部署流程，需要部署的服务器自动拉取镜像，并运行服务

三、coding配置

1. 本地创建项目

因为整个过程使用docker部署nginx服务对外提供访问，因此需要在项目根目录下创建dockerfile和nginx配置文件 image.png

  • dockerfile
FROM node AS build
COPY . /opt/vue_demo
WORKDIR /opt/vue_demo
RUN npm install --registry=https://registry.npm.taobao.org && npm run build

FROM nginx
COPY --from=build /opt/vue_demo/dist /opt/vue_demo/dist
COPY nginx.conf /etc/nginx/nginx.conf
CMD ["nginx", "-g","daemon off;"]
  • nginx.conf
user root;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
    worker_connections 1024;
}
http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;
    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;
    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;
    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;
    server {
        listen       80;
        server_name  m.cuiliangblog.cn;
        location / {
            root  /opt/vue_demo/dist;
            index  index.html index.htm;
        }
    }
}

2. 代码仓库配置

coding支持码云、github等仓库，同时也内置了代码仓库功能，为了便于流程编写，最好使用内置的代码仓库模块 操作步骤：代码仓库——创建代码仓库——然后按照提示，将本地代码推送至代码仓库 image.png

2. 制品管理配置

制品仓库是用来存放源代码编译后的构建产物，例如Docker、Maven、Helm、npm 等。当使用dockerfile构建完镜像后，会自动传入制品库，项目部署阶段自动下载镜像部署服务。 配置流程：制品仓库——创建仓库 image.png

3. 持续集成配置

持续集成——构建计划——创建构建计划——选择构建计划模板（此处选择coding docker镜像推送） 为了便于演示，此处设置镜像版本为固定的latest（可依据实际需求，将git tag变量设置为镜像版本） image.png

  • 配置触发规则(为便于演示，此处配置为推送到master分支时触发)

image.png

  • 配置完成后点击立即构建，手动触发一次构建任务，查看制品仓库是否有镜像生成

image.png

4. 持续部署配置

coding支持多种部署方式，如kubernetes，腾讯云主机等。此处以阿里云ECS主机为例：

  • 配置堡垒机和主机组（如果只有一台主机，那么该主机就是堡垒的和主机组中唯一的一台服务器）

堡垒机——添加堡垒机——将agent安装命令拷贝至云主机执行 image.png 主机组——添加主机组——实例IP填写127.0.0.1 image.png

  • 配置应用和流程

应用——创建应用——填写应用信息（部署方式选主机组） image.png

  • 创建流程，在基础配置中，开启webhook触发器，并记录curl触发命令

image.png

  • 部署（主机组）配置中，前置脚本选择输入内容（coding无法直接选择docker镜像地址下载，需要填写docker相关命令拉取镜像并运行，相关命令查看制品仓库——指引）

image.png shell内容如下所示

docker login -u vue-demo-1616828008788 -p ********************************* cuiliang0302-docker.pkg.coding.net
docker pull cuiliang0302-docker.pkg.coding.net/myblog-demo/vue-demo/vue-demo:latest
docker stop vue | true
docker rm vue | true
docker run -p 80:80 --name vue -d cuiliang0302-docker.pkg.coding.net/myblog-demo/vue-demo/vue-demo:latest
  • 创建完成后，将应用与项目关联，然后点击启动，测试应用能否正常部署

image.png

  • 修改添加DNS域名解析后访问测试

image.png

  • 现在持续部署流程需要手动触发，可以使用持续部署的webhook触发器，当持续集成结束后，自动触发持续部署流程

持续集成——构建计划——流程配置——结束阶段新增shell脚本执行，添加持续集成的webhook地址 image.png

  • 开启消息通知

image.png

四、CICD效果演示

1. 修改本地代码，并提交

$ git add .
$ git commit -m 'v1'
$ git push origin master

2. 查看coding项目概览，已触发自动构建

image.png

3. 收到邮件提示，项目构建成功

image.png

4. 访问测试

image.png 以上就是如何使用coding实现CICD的全部配置过程了，对于我这种全干工程师来说，使用coding可以大大减少项目部署更新所需时间，将精力集中在业务代码的开发上。正在开发项目的你，看到这篇文章后，有没有兴趣尝试一下一条命令完成版本更新的自动化操作的快感呢？

0 子项 · 1 次浏览 · 2026-09-24