jenkins自动打包部署vue_element_admin前端项目

1. nginx安装

nginx安装教程

2. 手动测试一下前端项目打包

1）npm run build:prod （自己看一下自己vue项目的构建命令是什么，该命令一般在package.json文件里面）
正常来说是npm run build，vue_template_admin构建命令是npm run build:prod

2）构建完成后，该目录会出现一个dist目录，里面就是我们的前端项目的内容

3）把这个dist目录放到服务器的一个目录下面，我是把项目内容放在/usr/local/front_project/vue_admin/

4）修改nginx.conf文件的内容（如果是跟着上面的安装教程，那么nginx.conf是在/usr/local/nginx/conf里面的）

5）由nginx来部署这个前端项目（只要是访问nginx机器的90端口就会找/usr/local/front_project/vue_admin/dist里面的index.html）

6） 重启一下nginx
/usr/local/nginx/sbin/nginx -s stop
/usr/local/nginx/sbin/nginx

7）地址栏访问一下 http://192.168.0.130:90/#/login?redirect=%2Fdashboard，证明前端项目没有问题，nginx代理前端项目也没有问题

8) 如果访问地址出错的话，修改以下文件
vi /etc/selinux/config
修改内容如下：

SELINUX=disabled

重启一下机器

3. jenkins安装nodejs插件

jenkins安装下载教程

4.jenkins全局工具配置

这里我选择nodejs版本为 14.9.1版本（我一直用这个版本，最新已经到了18.x了），起名为nodejs14,后面生成脚本需要用到

5. 新建流水线任务

6.编写自动化构建部署脚本

1）设置构建项目分支参数

2-1） 直接在jenkins机器上编写Jenkinsfile文件内容（不推荐，万一机器炸了，那这个脚本文件就拿不回来了，这个jenkinsfile文件还是交给这个项目gitlab等代码托管平台来管理） 不推荐直接在jenkins上面写自动化构建部署脚本

2-2）把jenkinsfile文件还是交给这个项目gitlab等代码托管平台来管理 推荐

如果SCM下拉框没有git选项，自己在jenkins里面安装git plugins

并且jenkins所在机器也要安装git,在jenkins里面全局工具配置添加git所在目录

3） 利用jenkins流水线语法生成工具，生成拉取gitlab(gitee,github)脚本

checkout([$class: 'GitSCM', branches: [[name: '*/master']], extensions: [], userRemoteConfigs: [[credentialsId: 'fa0ff0a7-3b63-46b5-aaed-a7b357c23abe', url: 'http://192.168.0.121:82/root/online2022_admin_front.git']]])

因为我们之前已经设置了参数化项目构建 分支选择
所以把master变成变量${branch}

checkout([$class: 'GitSCM', branches: [[name: '*/${branch}']], extensions: [], userRemoteConfigs: [[credentialsId: 'fa0ff0a7-3b63-46b5-aaed-a7b357c23abe', url: 'http://192.168.0.121:82/root/online2022_admin_front.git']]])

4. 利用jenkins流水线语法生成工具，生成nodejs语法
   

nodejs('nodejs14') {
    // some block
}

这里面的nodejs14是我们之前全局工具设置nodejs工具的名称。
在这里面写入shell脚本npm install ,npm run build:prod

// 使用Nodejs的npm安装依赖和打包
nodejs('nodejs14') {
  sh "npm install"
  sh "npm run build:prod"
}

5. jenkins所在的机器和生成服务器待会要用到SSH

SSH作用: jenkins所在的机器（192.168.0.120）把构建前端项目生成dist目录下文件传输到生产服务器 （192.168.0.130)

具体流程： jenkins所在的机器（192.168.0.120）生产ssh密钥，把公钥交给生产服务器 （192.168.0.130)，待会向jenkins指明该机器ssh私钥所在文件位置

• 开启sshd服务 （192.168.0.120）
  sudo service sshd start

• 如果（192.168.0.120）内核版本过高centos 生成ssh私钥，jenkins可能不支持，那就在用ssh生成密钥的时候指定算法

  ssh-keygen -m PEM -t rsa -b 4096
  否则 执行 ssh-keygen
  执行完命令后不断回车就好
  

• jenkins所在机器把公钥交给生产服务器
  把公钥给生产服务器（192.168.0.130）
  ssh root@192.168.0.130

6. jenkins安装Publish Over SSH插件
   

7）全局设置需要 ssh连接上生成服务器（部署前端项目所在的机器）

jenkins全局配置那里 设置ssh私钥位置
/root/.ssh/id_rsa
在这里插入图片描述

设置ssh连接的生成服务器

自己点击test Configuration来尝试一下链接远程服务器

8)生成 流水线语法（ssh传输前端项目构建文件）
这个语句的作用：用ssh来生成把jenkins项目里面dist目录下文件传输到生产服务器上面
（之前安装Publish Over SSH，那么这里生成流水线语法就会有这个下拉框选项）

// 把该项目下面dist文件从（jenkins服务器） 复制到 生产服务器 
// remoteDiretory就是生产服务器 部署前端项目所在的目录（生产的nginx负责代理这些静态资源的访问）
// sourceFiles就是jenkins的项目所构建后dist目录，dist目录里面的内容就是前端项目需要发布的东西，类似后端springboot生成可执行的jar文件
sshPublisher(publishers: [sshPublisherDesc(configName: 'pro_server2', transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '', execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes: false, patternSeparator: '[, ]+', remoteDirectory: '/usr/local/front_project/vue_admin', remoteDirectorySDF: false, removePrefix: '', sourceFiles: 'dist/**')], usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: false)])

9） 完整的Jenkinsfile文件流水线语法内容

node {
    def mvnHome
    stage('拉取代码') {
        checkout([$class: 'GitSCM', branches: [[name: '*/${branch}']], extensions: [], userRemoteConfigs: [[credentialsId: 'fa0ff0a7-3b63-46b5-aaed-a7b357c23abe', url: 'http://192.168.0.121:82/root/online2022_admin_front.git']]])
    }
    stage('打包 部署网站') {
        // 使用Nodejs的npm安装依赖和打包
        nodejs('nodejs14') {
          sh "npm install"
          sh "npm run build:prod"
        }

        // 把该项目下面dist文件从（jenkins服务器） 复制到 生产服务器 
        // remoteDiretory就是生产服务器 部署前端项目所在的目录（生产的nginx负责代理这些静态资源的访问）
        // sourceFiles就是jenkins的项目所构建后dist目录，dist目录里面的内容就是前端项目需要发布的东西，类似后端springboot生成可执行的jar文件
        sshPublisher(publishers: [sshPublisherDesc(configName: 'prod_server2', transfers: [sshTransfer(cleanRemote: false, excludes: '', execCommand: '', execTimeout: 120000, flatten: false, makeEmptyDirs: false, noDefaultExcludes: false, patternSeparator: '[, ]+', remoteDirectory: '/usr/local/front_project/vue_admin', remoteDirectorySDF: false, removePrefix: '', sourceFiles: 'dist/**')], usePromotionTimestamp: false, useWorkspaceInPromotion: false, verbose: false)])
        
    }
    
}

10. 把这个Jenkinsfile文件放到项目根目录下面
    

11）上传这个Jenkinsfile文件到gitlab（github，gitee）上面

D:\vs2022\vue-element-admin>git add Jenkinsfile

D:\vs2022\vue-element-admin>git commit -m '流水线自动化脚本'
[master 87d2bcf] '流水线自动化脚本'
 1 file changed, 1 insertion(+), 1 deletion(-)

D:\vs2022\vue-element-admin>git push origin master
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 12 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 327 bytes | 327.00 KiB/s, done.
Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
To http://192.168.0.121:82/root/online2022_admin_front.git
   612b7e1..87d2bcf  master -> master

12） 如果构建项目失败，出现以下错误，那就证明jenkins安装nodejs失败
Unpacking https://nodejs.org/dist/v14.19.1/node-v14.19.1-linux-x64.tar.gz to /root/.jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/nodejs14 on Jenkins
那么我们自己安装nodejs，并且在jenkins全局工具配置配置我们安装nodejs所在的目录
centos stream 8安装nodejs14.19.1教程并且jenkins全局工具配置nodejs

13）构建并且传输dist文件到生产服务器成功