Jenkins自动化运维-打包部署Vue前端项目(2):Jenkins配置Web前端打包任务

最新推荐文章于 2024-03-12 16:59:22 发布

飞鸽FlyGo

最新推荐文章于 2024-03-12 16:59:22 发布

阅读量1.2k

点赞数

分类专栏： # 运维文章标签： jenkins 运维自动化 Vue 前端

本文链接：https://blog.csdn.net/weixin_42257984/article/details/124924273

版权

运维专栏收录该内容

4 篇文章 2 订阅

订阅专栏

往期博文

Jenkins自动化运维-打包部署Vue前端项目(1):搭建打包部署环境_飞鸽FlyGo的博客-CSDN博客Jenkins自动化运维-打包部署Vue前端项目(1):搭建打包部署环境。总体步骤流程概览；环境为CentOS7 系统环境，安装node.js 和 npm；yarn打包命令无法使用问题及目录权限问题。https://flygo.blog.csdn.net/article/details/124905125

一、总体步骤流程概览

二、配置Job任务

1、在compass-jobs-test标签下新建Job任务

2、填写创建任务信息

3、配置任务

3.1、配置任务丢弃旧的构建

3.2、编写Pipeline流水线脚本

pipeline 脚本文件

pipeline {
    agent any

    environment {
        // 应用名称
        APPLICATION_NAME = "looksky-compass-web"

        // 项目项目名称，为项目工程模块名称，主要用于拼接路径
        PROJECT_NAME = "looksky-compass-web"
        // 项目部署路径
        DEPLOY_DIR = "/usr/local/nginx/html/web/www/${env.APPLICATION_NAME}"
        // 项目部署目录归属的用户和用户组
        DEPLOY_DIR_USER = "compass_web"

        // npm已经打包好的主目录
        TARGET_HOME_DIR = "${env.WORKSPACE}"
        // npm已经打包好的包路径
        TARGET_WAR_DIR = "${env.TARGET_HOME_DIR}/dist"

        // 需要部署的远程机器
        DEPLOY_REMOTE_SERVER = "root@172.18.75.175"
        // 需要部署编译的环境 test: 测试环境 prod: 正式环境
        DEPLOY_BUILD_EVN = "test"
    }

    stages {
        stage('拉取Git代码') {
            steps {
                echo "\n--------------- 拉取Git代码 start ---------------\n"

                // 拉取Git上的最新代码
                git branch: '${compass_web_test_build_branch}', credentialsId: 'bb8bae6b-4812-445b-8e39-caef8db7343b', url: 'https://codeup.aliyun.com/5ff9448b10dfd380901661ec/looksky_compass_repos/looksky-compass-web.git'

                echo "\n--------------- 拉取Git代码 end ---------------\n"
            }
        }

        stage('npm打包构建') {
            steps {
              // 调用yarn脚本进行打包编译
              sh "${env.TARGET_HOME_DIR}/jenkins/yarn-build.sh"
            }
        }

        stage('部署启动工程') {
            steps {
                echo "\n--------------- 部署启动工程 start ---------------\n"

                echo "复制部署目录 [${env.TARGET_WAR_DIR}] to [${env.DEPLOY_DIR}] ... start"

                // 复制最新的dist打包的文件到部署目录
                sh "scp -r ${env.TARGET_WAR_DIR}/* ${env.DEPLOY_REMOTE_SERVER}:${env.DEPLOY_DIR}"

                echo "复制部署目录 [${env.TARGET_WAR_DIR}/**] to [${env.DEPLOY_DIR}] ...ok"

                // 使用root权限 scp过去的文件和目录，通过浏览器域名访问出现403权限问题

                echo "\n修改部署目录权限及用户组 [${env.DEPLOY_DIR}] ... start"

                // 这里使用的是root用户操作，复制过去的文件权限是root用户，需要修改为web归属的用户和用户组
                sh "ssh ${env.DEPLOY_REMOTE_SERVER} chown -R ${env.DEPLOY_DIR_USER}:${env.DEPLOY_DIR_USER} ${env.DEPLOY_DIR}"

                // 修改目录和子目录、文件权限全部未 755
                sh "ssh ${env.DEPLOY_REMOTE_SERVER} chmod -R 755 ${env.DEPLOY_DIR}"

                echo "\n修改部署目录权限及用户组 [${env.DEPLOY_DIR}] ... ok"

                echo "\n--------------- 部署启动工程 end ---------------\n"
            }
        }
    }
}