1. 为什么需要CI/CD流水线每次手动部署前端项目时你是不是也经历过这样的痛苦改完代码后先在本地跑npm run build然后用FTP工具把dist文件夹上传到服务器最后还要SSH登录服务器重启Nginx。更糟的是团队协作时经常出现在我电脑上好好的怎么上线就报错的情况。这就是我们为什么要搭建自动化部署流水线。想象一下这样的场景你刚把代码push到Gitee仓库服务器就自动完成构建、测试、部署全过程全程无需人工干预。这就是CI/CD持续集成/持续交付的魅力。我去年给公司搭建这套系统时最初也担心配置复杂。但实际用下来发现DockerJenkinsGitee的组合就像乐高积木每个组件各司其职Docker解决环境一致性问题让应用在任何地方运行结果相同Jenkins担任自动化工程师负责调度整个构建流程Gitee扮演触发器角色代码变动时通知Jenkins开工2. 环境准备Docker与Jenkins安装2.1 干净安装Docker引擎在CentOS 7上安装Docker时我最常遇到两个坑旧版本残留导致冲突默认国外源下载速度慢到怀疑人生先彻底清理旧版本就算你是新系统也建议执行yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest-logrotate \ docker-logrotate \ docker-engine接着配置阿里云镜像源加速安装yum install -y yum-utils yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo yum makecache fast安装社区版Docker并启动yum install -y docker-ce docker-ce-cli containerd.io systemctl start docker systemctl enable docker # 设置开机自启验证安装成功docker run hello-world如果看到Hello from Docker!的欢迎信息说明你的Docker已经准备好干活了。2.2 运行Jenkins容器官方jenkins镜像有多个版本切记要选择jenkins/jenkins这个标签带lts的长期支持版更稳定。这是我踩过的坑——第一次用了过时的镜像导致插件安装失败。拉取镜像docker pull jenkins/jenkins:lts启动容器时这几个参数最关键docker run -d -uroot \ -p 10001:8080 -p 10002:50000 \ -v /home/jenkins:/var/jenkins_home \ --name myjenkins \ jenkins/jenkins:lts-uroot用root权限运行避免后面操作时权限不足-v参数把容器内的Jenkins工作目录挂载到宿主机方便备份和迁移端口映射8080是Web界面端口50000是Jenkins集群通信端口检查容器是否正常运行docker ps -a | grep jenkins如果STATUS列显示Up就可以用浏览器访问http://服务器IP:10001了。3. Jenkins初始化配置3.1 解锁Jenkins第一次访问时会要求输入初始密码获取方式有两种查看容器日志docker logs myjenkins直接查看挂载目录cat /home/jenkins/secrets/initialAdminPassword3.2 插件安装策略在自定义Jenkins页面建议选择安装推荐插件。但要注意国内网络可能安装失败多试几次关键插件后续可以手动补充安装完成后创建管理员账户这个账户要记牢我团队曾经有同事忘记密码最后不得不重建Jenkins实例。3.3 必须安装的三大插件进入系统管理 插件管理搜索安装NodeJS前端项目构建必备Gitee对接国内代码托管平台Publish Over SSH部署构建产物到目标服务器安装完记得勾选安装完成后重启Jenkins。4. 关键系统配置4.1 Node.js环境配置在系统管理 全局工具配置页面点击NodeJS安装下的新增安装填写别名如Node16选择版本建议LTS版本如16.x关键步骤替换默认镜像源为淘宝源https://registry.npmmirror.com4.2 SSH服务器配置在系统管理 系统配置页面找到Publish over SSH区域Name给服务器起个易懂的名字Hostname目标服务器IPUsername登录用户建议用有sudo权限的账户Remote Directory部署目录如/home/www点击Test Configuration测试连接看到Success提示才算配置成功。4.3 Gitee插件配置在系统管理 系统配置找到Gitee配置区域点击添加Gitee API令牌在Gitee账号设置中生成私人令牌测试连接确保配置正确5. 创建前端项目示例用Vite快速创建一个React项目npm create vitelatest my-project --template react cd my-project git init git add . git commit -m Initial commit推送到Gitee仓库git remote add origin https://gitee.com/yourname/my-project.git git push -u origin master6. 配置自动化构建任务6.1 新建自由风格项目点击新建任务输入任务名称如FE-Deploy-Demo选择自由风格的软件项目6.2 源码管理配置选择Git填写仓库URL建议用HTTPS地址添加凭证Gitee账号密码6.3 构建触发器设置这是实现自动化的关键步骤勾选Gitee webhook触发构建记录显示的URL如http://your-jenkins/gitee-project/my-job到Gitee仓库设置中配置WebhookURL填写上一步的地址触发事件选择Push事件6.4 构建环境配置勾选Provide Node npm bin/ folder to PATH选择之前配置的Node版本6.5 构建脚本编写在增加构建步骤中选择执行Shellnode -v npm -v npm config set registry https://registry.npmmirror.com rm -rf node_modules rm -rf dist npm install npm run build这个脚本做了三件事确认Node环境设置淘宝源加速安装执行标准构建流程6.6 构建后操作选择Send build artifacts over SSHSource files:dist/**所有构建产物Remove prefix:dist避免上传dist目录本身Remote directory:my-project会放在之前配置的SSH目录下Exec command: 可选填部署后命令如重启Nginx7. 验证全流程自动化现在尝试修改项目代码并push到Giteeecho console.log(Hello CI/CD) src/main.js git add . git commit -m Test CI/CD git push回到Jenkins界面你会看到自动触发了一个新构建。构建成功后检查目标服务器的/home/www/my-project目录应该能看到最新的构建产物。我在实际项目中遇到过两个典型问题Webhook未触发检查Gitee的Webhook请求记录常见原因是Jenkins URL不可达或认证失败SSH部署失败确认目标目录权限我遇到过因www-data用户无写权限导致的部署失败这套方案已经在我们团队稳定运行半年多部署时间从原来的15分钟缩短到2分钟以内。最重要的是再也没出现过测试环境正常线上环境报错的情况。