jenkins+gitlab CI/CD 实现前后端自动化部署

先部署jenkinks ,gitlab

打开jenkins 登录上去我们能看到

在这里插入图片描述
3.然后点击新建item
在这里插入图片描述

建好后 我们需要安装插件 Manage Jenkins->Plugins

Git Plugin:如果你的代码托管在 Git 仓库中,这个插件可以让你从 Git 仓库中检出代码。

Pipeline Plugin:Jenkins Pipeline 提供了一套可编程的基础,使你可以定义整个构建、测试和部署过程。它支持两种语法:“Declarative Pipeline” 和 “Scripted Pipeline”。

Publish Over SSH Plugin:可以通过 SSH 协议将构建结果或文件发送到远程服务器,并执行命令。非常适合用来做远程部署。

配置一些全局参数

在这里插入图片描述

配置maven

在这里插入图片描述

配置git

在这里插入图片描述

配置jdk(jdk需要自己安装一个)

在这里插入图片描述

如果需要远程部署就需要配置ssh

在这里插入图片描述
特别特别注意一下 Remote Directory配置的目录 到时候文件copy后就会到这个目录下面
在这里插入图片描述填写完需要点一下test 看是否成功

部署一下后端服务

在这里插入图片描述

修改setting文件:因为我的maven是通过jenkins下载的

在这里插入图片描述

配置一下gitlab 凭证

在这里插入图片描述

编写流水线

后端项目我是把dockerFile 文件放在 一个文件夹下
在这里插入图片描述

pipeline {
    
    environment {
        APP_NAME = "jshERP-boot"
        IMAGE_NAME = "jsherp-boot"
        IMAGE_TAG = "latest"
        DOCKER_REGISTRY = "" // 如有私有仓库可填写 harbor 地址,如 "harbor.example.com:5000"
        TARGET_SERVER = "10.10.10.158" // Jenkins SSH 配置的远程服务器名称
        REMOTE_PATH = "/opt/myapp"
        DOCKERFILE_PATH = "docker/Dockerfile"
    }
    agent any // 指定运行此 Pipeline 的环境
    tools {
        maven 'maven3' // 已配置的 Maven 版本'
        jdk 'jdk1.8'
    }

    
      
    
    stages {
        stage('Checkout') { // 拉取代码阶段
            steps {
                git branch: 'test',
                url: 'XXXXXXXXXXX/jsherp-boot.git', // 替换为你的 Git 仓库地址
                credentialsId: 'XXXXXXXXX-1ac0d890b8a1'
                
            }
        }

        // stage('Build') { // 构建阶段
        //     steps {
        //         sh 'mvn clean package' // 使用 Maven 进行构建
        //     }
        // }
          stage('Build with Maven') {
            steps {
                withMaven(
                    maven: 'maven3',
                    mavenSettingsConfig: '2ff841b9-9338-48fc-9971-63f44a4d6d57', // 你在上一步设置的 ID
                    options: [
                        junitPublisher(disabled: false),
                        pipelineGraphPublisher()
                    ]
                    
                ) {
                    sh 'mvn clean package'
                }
            }
        }
        
   

        stage('Archive') { // 归档制品阶段
            steps {
                archiveArtifacts artifacts: "**/target/*.jar", allowEmptyArchive: true
            }
        }
        
       
        stage('Deploy to Remote Server via SSH') {
            steps {
                sshPublisher(
                    publishers: [
                        sshPublisherDesc(
                            configName: "${TARGET_SERVER}",
                            transfers: [
                                sshTransfer(
                                    sourceFiles: "Dockerfile,/var/lib/jenkins/workspace/erp-back/target/${APP_NAME}.jar",
                                    removePrefix: "",
                                    remoteDirectory: "${REMOTE_PATH}",
                                    execCommand: """
                                        set -e

                                        echo '[1] Stopping old container...'
                                        docker stop ${APP_NAME} || true
                                        docker rm ${APP_NAME} || true

                                        echo '[2] Copying new jar file...'
                                        cp /var/lib/jenkins/workspace/erp-back/target/${APP_NAME}.jar               /opt/myapp/${APP_NAME}.jar
                                        cp /var/lib/jenkins/workspace/erp-back/${DOCKERFILE_PATH} /opt/myapp/Dockerfile
                                        echo '[3] Building new Docker image...'
                                        cd ${REMOTE_PATH}
                                        docker build --build-arg JAR_FILE=app.jar -t ${IMAGE_NAME}:${IMAGE_TAG} .

                                        echo '[4] Starting new container...'
                                        docker run -d \\
                                            --name ${APP_NAME} \\
                                            -p 9991:9999 \\
                                            ${IMAGE_NAME}:${IMAGE_TAG}

                                        echo '[5] Cleaning up dangling images...'
                                        docker images -f "dangling=true" -q | xargs --no-run-if-empty docker rmi

                                        echo 'eployment completed.'
                                    """
                                )
                            ],
                            verbose: true
                        )
                    ]
                )
            }
        
        }
    }
}

前端代码通道要复杂一点 如果vue项目,前提是我的douckerFile 文件和 nginx 配置 我放到了代码里面

在这里插入图片描述

pipeline {
    
    environment {
        APP_NAME = "jetlinks-font"
        IMAGE_NAME = "jetlinks-font"
        IMAGE_TAG = "latest"
        DOCKER_REGISTRY = "" // 如有私有仓库可填写 harbor 地址,如 "harbor.example.com:5000"
        TARGET_SERVER = "10.10.10.157" // Jenkins SSH 配置的远程服务器名称不是真实地址
        REMOTE_PATH = "opt/jetlinks-font"
        DOCKERFILE_PATH = "docker/Dockerfile"
    }
    agent any // 指定运行此 Pipeline 的环境
    tools {
        maven 'maven3' // 已配置的 Maven 版本'
        jdk 'jdk1.8'
    }

    
      
    
    stages {
        stage('Checkout') { // 拉取代码阶段
            steps {
                git branch: 'test',
                url: 'XXXXXXXXXXXXXXX', // 替换为你的 Git 仓库地址
                credentialsId: 'XXXXXXXXXXXXXXXXXXXX' //gitlab 配置的标识
                
            }
        }

     
        stage('Setup Node.js with nvm') {
            steps {
                sh '''
                  export NVM_DIR="$HOME/.nvm"
                  [ -s "$NVM_DIR/nvm.sh" ] && \\. "$NVM_DIR/nvm.sh"

                  # 如果未安装 nvm,则安装
                  if ! command -v nvm &> /dev/null; then
                    curl -o- https://gitee.com/mirrors/nvm/raw/v0.39.7/install.sh | bash
                    export NVM_DIR="$HOME/.nvm"
                    [ -s "$NVM_DIR/nvm.sh" ] && \\. "$NVM_DIR/nvm.sh"
                  fi

                  # 使用淘宝镜像加速安装(可选)
                  export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node

                  # 安装并使用 Node.js v16.x
                  nvm install 16
                  nvm use 16
                '''
            }
        }

        stage('Install Dependencies') {
             steps {
                sh '''
                  # 再次加载 nvm,避免 shell 上下文丢失
                  export NVM_DIR="$HOME/.nvm"
                  \\. "$NVM_DIR/nvm.sh"

                  # 执行 npm 安装
                  npm install --legacy-peer-deps
                '''
            }
        }

        stage('Build Vue Project') {
            steps {
                sh '''
                  export NVM_DIR="$HOME/.nvm"
                  \\. "$NVM_DIR/nvm.sh"

                  npm run build
                '''
            }
        }

      

        stage('Archive Artifacts') {
            steps {
                archiveArtifacts artifacts: 'dist/**/*', allowEmptyArchive: false
            }
        }
        
       
        stage('Deploy to Remote Server via SSH') {
            steps {
                sshPublisher(
                    publishers: [
                        sshPublisherDesc(
                            configName: "${TARGET_SERVER}",
                            transfers: [
                                sshTransfer(
                                    sourceFiles: "jetlinks-font/**",
                                    removePrefix: "",
                                    remoteDirectory: "${REMOTE_PATH}",
                                    execCommand: """
                                        echo "✅ 文件已上传到 ${REMOTE_PATH}"
                                        set -e
                                        echo "[2] 删除 node_modules(如果存在)这个node_modules有时候会妨碍我构建镜像..."
                      
                                        if [ -d "/home/jenkins/${REMOTE_PATH}/node_modules" ]; then
                                        rm -rf /home/jenkins/${REMOTE_PATH}/node_modules
                                        fi
                                        
                                        echo '[1] Stopping old container...'
                                        docker stop ${APP_NAME} || true
                                        docker rm ${APP_NAME} || true

                                        echo '[3] Building new Docker image...'
                                        cd /home/jenkins/${REMOTE_PATH}
                                        docker build -t ${IMAGE_NAME}:${IMAGE_TAG} -f Dockerfile .
                                        echo '[4] Starting new container...'
                                        docker run -d \\
                                            --name ${APP_NAME} \\
                                            -p 8081:80 \\
                                            ${IMAGE_NAME}:${IMAGE_TAG}

                                        echo '[5] Cleaning up dangling images...'
                                        docker images -f "dangling=true" -q | xargs --no-run-if-empty docker rmi

                                        echo 'eployment completed.'
                                    """
                                )
                            ],
                            
                            verbose: true
                        )
                    ]
                )
            }
        
        }
        
   stage('Update Nginx Config via SSH') {
    steps {
        sshPublisher(
            publishers: [
                sshPublisherDesc(
                    configName: "${TARGET_SERVER}", // SSH Server 配置名称(在 Jenkins > Credentials 中定义)
                    transfers: [
                        sshTransfer(
                            // sourceFiles: "/var/lib/jenkins/workspace/${APP_NAME}/nginx.conf", // Jenkins workspace 下的 nginx.conf
                            // removePrefix: "",
                            // remoteDirectory: "/tmp",  // 先传到远程服务器的 /tmp 目录
                            execCommand:  """
                        set -e

                        echo '[1] Copying config into container...'
                        sudo docker cp /home/jenkins/${REMOTE_PATH}/nginx.conf ${APP_NAME}:/etc/nginx/conf.d/default.conf

                        echo '[2] Testing Nginx config inside container...'
                        sudo docker exec ${APP_NAME} nginx -t

                        echo '[3] Reloading Nginx in container...'
                        sudo docker exec ${APP_NAME} nginx -s reload

                        echo "✅ Nginx config updated and reloaded."
                    """
                        )
                    ],
                    verbose: true
                )
            ]
        )
    }
   }
}
}

配置一把钩子

在这里插入图片描述

配置一个token

在这里插入图片描述

切换到 gitlab

在这里插入图片描述
在这里插入图片描述输入地址和 触发来源

地址一般是 http://<user>:<api-token>@<jenkins-url>/job/<job-name>/build

apitoken 获取是在
在这里插入图片描述
在这里插入图片描述
然后就可以拼接
http://luhuizhen:XXXXXXXXXXX@10.10.10.158:8080/job/erp-font/build?token=XXX
但是呢 因为ip+端口 不安全 会设置不成功
需要映射一个域名出来
在这里插入图片描述
这样就成功了

1.请添加图片描述

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐