使用Jenkins中的Pipeline流水线自动化部署前端Vue项目

本文介绍了JenkinsPipeline的使用,包括agent、stage和steps等关键概念,展示了如何配置从git仓库拉取Vue项目,使用nodejs进行构建,然后通过sshPublisher将结果部署到远程服务器的完整流程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、pipeline

简介:
Jenkins Pipeline是一套插件,支持将连续输送Pipeline实施和整合到Jenkins。Pipeline 提供了一组可扩展的工具,用于通过Pipeline DSL为代码创建简单到复杂的传送Pipeline

语法:
agent:表示Jenkins应该为Pipeline的这一部分分配一个执行者和工作区。
stage:描述了这条Pipeline的一个阶段
steps:描述了要在其中运行的步骤 stage
sh:执行给定的shell命令
在sh编写多条命令的写法:

sh """
npm install
npm run build
"""

详细的知识点请查阅官网:https://www.jenkins.io/zh/doc/pipeline/tour/getting-started/

2、创建pipeline任务

在这里插入图片描述
在这里插入图片描述

git、nodejs和sshPublisherh的生成
点击图中的流水线语法
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

完整案例:

pipeline {
    agent any
    
    stages {
        stage ("拉取vue项目") {
            steps {
                git credentialsId: 'e0939905-8a6b-445d-906d-fe469c2fcb8a', url: 'http://192.168.13.226:3000/zhush/topfus-guodian-ui.git'
            }
        }
        
        stage ("Install") {
            steps {
                nodejs(configId: 'a4720548-c973-408b-ae68-a882421af9b5', nodeJSInstallationName: 'nodejs') {
                    sh """
                    npm install
                    npm run build
                    """
                    
                }
            }
        }
        
        stage ("tar.gz") {
            steps {
                sh "tar -zcvf ./shvuepipeline.tar.gz ./dist"
            }
        }
        
        stage ("tuisong") {
            steps {
                sshPublisher(publishers: [sshPublisherDesc(configName: 'localserver', transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '''cd ~/shvuepipeline
tar -xvf shvuepipeline.tar.gz -C /data/sh/shvuepipeline/''', execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes: false, patternSeparator: '[, ]+', remoteDirectory: '/shvuepipeline', remoteDirectorySDF: false, removePrefix: '', sourceFiles: 'shvuepipeline.tar.gz')], usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: false)])
            }
        }
        
    }
}
### Gitee CI/CD Pipeline for Vue Project Deployment #### 配置 `.gitlab-ci.yml` 文件实现自动化部署 对于在Gitee上的Vue项目,配置CI/CD流水线的关键在于编写`.gitlab-ci.yml`文件。此文件定义了不同阶段的任务,包括构建、测试以及最终的部署操作[^1]。 ```yaml image: node:lts stages: - build - deploy cache: paths: - node_modules/ build_vue_project: stage: build script: - npm install - npm run build artifacts: paths: - dist/ deploy_to_production: stage: deploy only: - master script: - echo "Deploying to production..." - 'curl -H "Authorization: Bearer $TOKEN" -F file=@dist/index.html https://your-server.com/upload' ``` 上述脚本展示了如何通过NPM安装依赖并打包Vue应用,在成功完成后会触发部署动作。这里假设有一个API端点用于上传编译后的HTML文件作为示例[^4]。 #### 使用 Jenkins-Pipeline 自动化部署至 Kubernetes (K8S) 另一种方法是借助Jenkins管道工具配合Docker镜像完成更复杂的场景——比如将应用程序容器化并通过Kubernetes集群管理服务实例。为此需准备一个适合前端应用的基础NGINX Dockerfile: ```dockerfile FROM nginx RUN rm -rf /usr/share/nginx/html/* COPY ./dist /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"] ``` 接着可以在Jenkins中创建一个多分支Pipeline工程,并指定其读取位于仓库根目录下的`Jenkinsfile`来进行持续集成工作流控制[^5]。 #### 构建多层架构优化性能 考虑到生产环境中的效率问题,可以采用分层方式制作Docker镜像以减少体积和加速传输速度。下面是一个针对Java项目的例子,虽然适用于不同的编程语言和技术栈,但概念相同:先在一个临时环境中编译源码生成可执行包;再切换到精简版运行时映像里加载该二进制文件[^3]。 ```dockerfile # Build Stage FROM maven AS builder WORKDIR /app COPY pom.xml . COPY src ./src RUN mvn clean package -DskipTests # Final Stage FROM openjdk:alpine WORKDIR /app COPY --from=builder /app/target/*.jar app.jar ENTRYPOINT ["java","-jar","/app/app.jar"] ``` 尽管这段代码片段主要面向后端开发人员,但对于任何类型的Web应用来说都是有价值的实践指南。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

珍朱(珠)奶茶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值