windows中使用Jenkins打包,部署vue项目完整操作流程

23 篇文章 0 订阅
23 篇文章 0 订阅

1. 下载和安装

网上有许多安装教程,简单罗列几个

2. 使用

在Jenkins已经安装的基础上,可以开始下面的教程

1. 准备一个 新创建 或者 已有的 Vue项目

image-20240719140830121

2. git仓库

  1. github/gitee/gitlab都一样
  2. Jenkins需要凭证,所以我使用的ssh链接
  3. 需要生成秘钥,然后在gitee和Jenkins中添加

image-20240719141305612

image-20240719141849264

image-20240719142410034

3. 添加Jenkinsfile文件

image-20240719142615876

image-20240719142723189

  1. Jenkinsfile代码
pipeline {
    agent any
	
    // 定义变量, 使用方式: ${变量名}
    environment {
        REMOTE_SERVER_DIR  = "/www/wwwroot/XXXXX/vite_test_app"
        REMOVE_PREFIX = "dist"
        ARTIFACT_PATTERN = "**/dist/**"
        SOURCE_FILES =  "dist/**"
    }

    stages {
        stage('Checkout') {
            steps {
                checkout scm
            }
        }
        stage('Install Dependencies') {
            steps {
                bat 'npm install --legacy-peer-deps'
            }
        }
        stage('Build') {
            steps {
                bat 'npm run build'
            }
        }
        stage('Archive Artifacts') {
            steps {
                archiveArtifacts artifacts: "${ARTIFACT_PATTERN}", fingerprint: true
            }
        }
        stage('Deploy to Remote Server') {
            steps {
                sshPublisher(publishers: [sshPublisherDesc(
                    configName: 'baota', // 修改为您的配置名 baota
                    transfers: [sshTransfer(
                        cleanRemote: true,
                        excludes: '',
                        execCommand: "", // 如果有部署后需要执行的命令,可以在这里添加
                        execTimeout: 120000,
                        flatten: false,
                        makeEmptyDirs: false,
                        noDefaultExcludes: false,
                        patternSeparator: '[, ]+',
                        remoteDirectory: "${REMOTE_SERVER_DIR}", // 确保remote_directory变量已定义
                        remoteDirectorySDF: false,
                        removePrefix: "${REMOVE_PREFIX}", // 假设源文件夹结构中dist是要移除的前缀
                        sourceFiles: "${SOURCE_FILES}" // 指定要传输的源文件或目录模式
                    )],
                    usePromotionTimestamp: false,
                    useWorkspaceInPromotion: false,
                    verbose: false
                )])
            }
        }
    }

    post {
        always {
            cleanWs()
        }
    }
}

image-20240719143416742

4. 成功示例

image-20240719143555516

image-20240719143659119

image-20240719150634358

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值