zoukankan      html  css  js  c++  java
  • 使用jenkins一键打包发布vue项目

    jenkins的安装

    Jenkins是一款开源 CI&CD 软件,用于自动化各种任务,包括构建、测试和部署软件。

    Jenkins 支持各种运行方式,可通过系统包、Docker 或者通过一个独立的 Java 程序。

    安装

    这里的操作系统为WSL Ubuntu,其它系统的安装的请参考jenkins官方文档

    wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add -
    sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'
    sudo apt-get update
    sudo apt-get install jenkins
    

    更换端口号(默认运行在8080端口)

    jenkins的配置文件在 /etc/default/jenkins;在其中找到HTTP-PORT并修改

    企业微信截图_20210507124427.png

    运行

    sudo systemctl start jenkins
    # OR
    sudo service jenkins start
    

    如果要开机自动运行

    sudo systemctl enable jenkins
    

    如果运行时碰到如下图的错误,请先安装jdk

    企业微信截图_20210507124308.png

    基础配置

    启动成功后输入对应的地址(ip:port)进入jenkins管理界面-如下图

    企业微信截图_20210507124747.png

    上图中红色字体对应的文件中拿到默认的管理员密码-具体命令

    cat /var/lib/jenkins/secrets/initialAdminPassword
    

    命令执行完成后返回如下图

    企业微信截图_20210507125217.png

    输入密码之后进入到自定义Jenkins界面(如下图)

    企业微信截图_20210507125324.png

    在此界面我们选择安装推荐的插件就会开始安装插件;如下图

    企业微信截图_20210507125519.png

    插件安装完成后就会自动进入设置用户名密码界面(如下图)

    企业微信截图_20210507125805.png

    输入完成后点击按钮保存并完成就会进入下一个界面实例配置

    企业微信截图_20210507130109.png

    点击按钮保存并完成就进入一个新界面,再点击其中的按钮开始使用Jenkins就进入了jenkins的主界面(如下图),至此就完成了jenkins的安装与基础配置。

    企业微信截图_20210507130412.png

    发布vue项目

    > 打包vue项目需要nodejs,打包完成后需要通过ssh把打包好的文件上传到目标服务器上。所以下面我们将会来安装jenkins的nodejs插件和Publish Over SSH插件。

    安装插件-nodejs

    在jenkins主界面工作台,依次点击系统管理>插件管理进入插件管理界面(如下图)

    企业微信截图_20210507142101.png

    搜索结果如下图

    plugins nodejs.png

    勾选完插件并点击安装后进入到插件下载界面(如下图)

    企业微信截图_20210508083514.png

    配置nodejs插件

    在jenkins主界面工作台,依次点击系统管理>全局工具设置进入插件管理界面并找到NodeJs选项(如下图)

    企业微信截图_20210508084303.png

    安装Publish Over SSH插件并配置

    Publish Over SSH插件的安装和nodejs插件是一样,安装完成后开始配置插件;

    在jenkins主界面工作台,依次点击系统管理>系统配置进入插件配置界面,滚动到Publish over SSH的位置,然后点击SSH Servers下面的新增按钮(如下图)

    企业微信截图_20210508113827.png
    点击按钮高级后出现的界面如下

    企业微信截图_20210508114150.png

    创建任务

    至此,打包vue所需的jenkins插件都已经安装完成,下面我们开始创建vue项目打包的任务。

    具体操作如下图

    企业微信截图_20210507135244.png

    点击按钮确定后,如下图

    FireShot Pro Webpage Screenshot #002 - 'vue-test Config [Jenkins]' - localhost.png

    安装上图所说的配置完成后点击保存按钮就会跳转到所创建任务的详情界面。

    企业微信截图_20210508143239.png

    至此一个我们便实现了一个简单的一键打包前端项目的jenkins配置。

    如有疏漏,欢迎指出
    您的点赞就是对我最大的认可。

  • 相关阅读:
    django控制台输出sql日志
    Find概述
    命令大全
    京东智联云在 Serverless 的探索
    如何优雅地部署一个 Serverless Next.js 应用
    腾讯云 Serverless 保障《创造营》硬糖少女 C 位出道
    Serverless 应用实践及典型案例解析
    LeetCode 数组:62. 不同路径(动态规划 带记忆的递归)
    LeetCode 数组:56.合并区间(数组的自带排序函数 区间合并问题)
    LeetCode 数组:162. 寻找峰值(二分法)
  • 原文地址:https://www.cnblogs.com/guojikun/p/14749634.html
Copyright © 2011-2022 走看看