vue项目-jekins自动化构建踩坑

用户9145550330941
1,765 阅读5分钟

基本环境

  • 操作系统： Linux version 5.10.60-9.al8.x86_64 (mockbuild@x86-006.build.alibaba.eu6) (gcc (GCC) 10.2.1 20200825 (Alibaba 10.2.1-3 2.30)
  • JDK: jdk1.8.0_131
  • vue： 2.6.10
  • Jenkins: 2.319.3

jekins 安装

  • 备份官方默认更新源文件
    sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins-ci.org/redhat-stable/jenkins.repo
  • 导入GPG密钥
    sudo rpm --import <https://jenkins-ci.org/redhat/jenkins-ci.org.key>
  • 安装
    sudo yum install jenkins
  • 查看jekins服务状态
    systemctl status jenkins.serve

修改配置

  • 端口 jekins默认是8080端口 项目8080有其他的服务使用 这里使用8010 要提前在阿里云开启8010端口
  • 修改配置 对/etc/sysconfig/jenkins进行操作
    vim /etc/sysconfig/jenkins
    # 用户
    JENKINS_USER="root"
    #监听端口 JENKINS_PORT="8010"
  • 增加java路径
    # 查询java路径
    which java
    vim /etc/init.d/jenkins
    #增加java路径
    candidates="
    /usr/local/java/jdk1.8.0_131/bin/java
    "

启动

    systemctl start jenkins

访问

1.项目启动之后可以根据ip加端口号访问 2.配置域名访问 在nginx配置下增加jekins配置

    cd /etc/nginx/conf.d/
    # 增加jekins配置
    vi jenkins.conf
  1. jekins配置
    server {
    listen 80;
    # 域名访问
    server_name  jekins.test.aggie.cn;
    charset utf-8;

    location /{
        # 定位到本机8010端口（端口已在阿里云开启）
        proxy_pass http://127.0.0.1:8010;
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_pass_request_headers on;
    }
}
  1. 会出现jekins初始页面

image.png 6 过一会 提示你输入管理员密码

image.png

    vi /var/lib/jenkins/secrets/initialAdminPassword

把密码复制出来填入页面即可进入jekins

安装插件

  1. 安装推荐插件(比较耗时 有时候还会安装失败)

image.png 2. 创建管理员账户

image.png 3. 配置实例（保存之后就会进入jekins管理页面）

image.png

配置项目

  • 因为项目会部署在不同的服务器 所以还需要安装一些插件
  1. 查看服务器是否安装git
    which git

安装以后会出现下图 image.png 2. 安装 Git Parameter Plug-In NodeJS

image.png

image.png Git Parameter Plug-In 可以选择git分支进行构建 Node JS 用来执行npm脚本 3 安装 Publish over SSH 用来构建完成推送远程服务器

本服务器构建

新建任务

image.png

项目名称

输入项目名称 点击构建一个自由风格的软件项目 然后点击确定

image.png

配置项目构建参数（设置不同分支发布）

image.png 由于前面我们配置了插件【Git Parameter】 可以选择git参数 输入名称 描述 选择分支（branch）或者标签(tag)进行构建

image.png

源码管理

  • 选择git 然后输入对应项目的地址 image.png
  • 添加jekins凭证 用来拉去gitlab代码

image.png

  • 添加凭据 选择全局凭证 类型选择有很多种 我这里选择账号和密码 然后输入 用户名 密码 （id和描述可以不填）然后点击添加

image.png

  • 选择刚才添加的凭证

image.png

  • 添加构建的分支 我这里添加了两个 用来选择不同的分支构建

image.png

构建环境

  • 选择Provide Node & npm bin/ folder to PATH（插件已经安装Nodejs） image.png
  • 选择node配置

image.png

构建

  • 这里选择执行shell image.png
  • 输入对应的脚本
    npm install
    rm -rf ./dist/*
    npm run build:prod
    rm -rf /pms-web/web/dist
    cp -rf ./dist /pms-web/web/

npm install 安装依赖

rm -rf ./dist/* 清空项目dist文件夹

npm run build:prod 执行vue项目build

rm -rf /pms-web/web/dist 清空服务器dist文件夹

cp -rf ./dist /pms-web/web/ 复制粘贴打包完的项目到服务器指定的路径

点击保存

image.png

项目初始化

返回任务列表就能看到我们创建的任务 点击进入项目 image.png 点击工作空间 此时工作空间为空 提示需要先构建一次

image.png

点击 Build with Parameters 会让我们选择对应的分支进行构建 image.png 选择分支进行构建 第一次构建会比较慢

image.png

通过构建历史我们可以看到构建过程

image.png

image.png

image.png

这个时候我们的工作空间就已经东西了

image.png

推送远端服务器

由于项目需要我们要把代码部署到另一台服务器上 这个时候我们前面安装的插件Publish over SSH来进行远端服务器推送 新建任务过程和上边一样 接下来我们看一下推送代码到其他服务器

配置Publish over SSH

1.选择系统管理 ——系统配置

image.png

2. 找到 Publish over SSH 点击新增按钮

image.png

image.png

3.配置远端服务器 image.png

  • name 自己命名
  • hostname 填写服务器地址
  • username 连接服务器的用户名
  • Remote Directory 定位到服务器的哪个目录 配置完成之后点击高级配置密码

image.png

  • 写入 Proxy password 端口是22

image.png

  • 最后点击保存

image.png

配置项目

新建任务和前面都一样 最后我们配置一下远端服务区构建 其实就是把本地的dist放入其他服务器

  • 进入任务点击设置

image.png

  • 在构建这里制作 安装依赖 build 项目就行了 image.png

然后选择构建后项目 点击Add Serve

image.png

在SSH Server Name选择刚才创建的服务

image.png

然后配置项目在服务器放的位置

image.png

  • Source files 打包的文件目录
  • Remove prefix 是否删除文件夹 dist只复制里面的文件 根据nginx配置去选 我这快不需要删除dist
  • Remote directory 服务器项目存放的目录 根据nginx配置填写

然后点击保存 image.png 这样就可以把项目布置到知道服务器了

avatar
文章
阅读
粉丝