前端视角看CICD

什么是CI/CD？

CI/CD（持续集成/持续交付）是现代软件开发中的重要实践，它通过自动化的流程来提高软件交付的效率和质量。

CI（持续集成）：开发人员频繁地将代码集成到主干分支，每次集成都通过自动化构建和测试来验证，从而尽早发现问题。
CD（持续交付/部署）：将软件自动化地部署到各种环境中（测试环境、预发环境、生产环境等）。

CI/CD的优势

提高开发效率
- 自动化构建和部署，减少人工操作
- 快速发现并解决问题
- 减少重复性工作
保证代码质量
- 自动化测试确保代码质量
- 统一的构建流程
- 代码规范检查
降低部署风险
- 环境一致性
- 可回滚机制
- 分步骤部署

核心工具介绍

Jenkins

Jenkins是最流行的CI/CD工具之一，具有以下特点：

强大的插件生态
- 支持各种构建工具
- 丰富的集成能力
- 自定义扩展性强
Pipeline即代码
- 使用Jenkinsfile描述整个流水线
- 版本控制
- 可复用性高
分布式构建
- Master-Slave架构
- 负载均衡
- 跨平台支持

Docker

Docker是容器化技术的代表，在CI/CD中发挥着重要作用：

环境隔离
- 应用程序及其依赖打包
- 确保开发和生产环境一致
- 快速部署和扩展
镜像管理
- 版本控制
- 快速回滚
- 镜像复用
资源优化
- 轻量级虚拟化
- 快速启动
- 资源利用率高

Nginx

Nginx作为高性能的Web服务器，在前端部署中具有重要作用：

反向代理
- 负载均衡
- 安全防护
- 缓存加速
静态资源服务
- 高效的静态文件服务
- Gzip压缩
- 缓存控制

实战案例：Vue2项目的CI/CD部署

1. Jenkins Pipeline配置

groovy

pipeline {
    agent any
    
    environment {
        DOCKER_IMAGE = 'vue-app'
        DOCKER_TAG = "${BUILD_NUMBER}"
    }
    
    stages {
        stage('Checkout') {
            steps {
                checkout scm
            }
        }
        
        stage('Install Dependencies') {
            steps {
                sh 'npm install'
            }
        }
        
        stage('Build') {
            steps {
                sh 'npm run build'
            }
        }
        
        stage('Docker Build') {
            steps {
                script {
                    docker.build("${DOCKER_IMAGE}:${DOCKER_TAG}")
                }
            }
        }
        
        stage('Deploy') {
            steps {
                sh """
                    docker stop ${DOCKER_IMAGE} || true
                    docker rm ${DOCKER_IMAGE} || true
                    docker run -d --name ${DOCKER_IMAGE} -p 8080:80 ${DOCKER_IMAGE}:${DOCKER_TAG}
                """
            }
        }
    }
}

2. Dockerfile配置

dockerfile

# 构建阶段
FROM node:14 as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 生产阶段
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

3. Nginx配置

nginx

server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # API代理配置
    location /api {
        proxy_pass http://backend-service;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 静态资源缓存配置
    location /static/ {
        expires 7d;
        add_header Cache-Control "public, no-transform";
    }
}

部署流程说明

代码提交触发Jenkins构建
- 开发人员提交代码到Git仓库
- Webhook触发Jenkins构建任务
- Jenkins拉取最新代码
Jenkins执行构建流程
- 安装项目依赖
- 执行代码检查和测试
- 构建生产环境代码
Docker镜像构建
- 基于Dockerfile构建应用镜像
- 多阶段构建优化镜像大小
- 推送镜像到镜像仓库
部署和服务配置
- 拉取Docker镜像
- 启动容器
- Nginx配置生效

总结

通过CI/CD的实践，我们可以：

实现自动化的构建和部署流程
提高开发团队的效率
保证部署的稳定性和可靠性
快速响应业务需求变化

建议在实际项目中根据具体需求调整配置，并持续优化部署流程。

前端视角看CICD ​

什么是CI/CD？ ​

CI/CD的优势 ​

核心工具介绍 ​

Jenkins ​

Docker ​

Nginx ​

实战案例：Vue2项目的CI/CD部署 ​

1. Jenkins Pipeline配置 ​

2. Dockerfile配置 ​

3. Nginx配置 ​

部署流程说明 ​

总结 ​