• linux中使用jenkins自动部署前端工程


    1、去年在自己的服务器上安装了jenkins,说用来自己研究一下jenkins自动化部署前端项目,jenkins安装好了,可是一直没管,最近终于研究了一下使用jenkins自动化部署,以此记录下来。

    一、jenkins的安装

    由于安装已经过去大半年时间了,具体步骤没有记录,可以到网上自行百度。

    大致流程:

    1、安装jdk

    2、下载jenkins包并安装

    3、修改jenkins端口(我用的8888端口)

    4、防火墙开启对应端口(我的开启8888端口)

    5、启动jenkins:service jenkins start

    注:jenkins安装好后的默认账号是admin,默认密码在 /var/jenkins_home/secrets/initialAdminPassword 文件中,重置密码请自行百度

    二、配置jenkins权限

    安装完Jenkins后,还需要再配置一下Jenkins的root权限(提升执行shell命令的权限)

    sudo vim /etc/sysconfig/jenkins
    编辑状态中
    JENKINS_USER="root"

    修改 Jenkins 相关文件夹用户权限

    chown -R root:root /var/lib/jenkins
    chown -R root:root /var/cache/jenkins
    chown -R root:root /var/log/jenkins

    重启jenkins服务

    service jenkins restart

     

    三、jenkins安装插件

    点击Dashboard 旁边的向下的黑色箭头(截图里看不到)-系统管理-插件管理

     

     进入到该页面后,点击 可选插件,可以搜索并安装插件

    需要安装如下插件:

    NodeJS Plugin(nodejs环境)

    Publish over SSH (用于执行构建后的操作)

    Gitee Plugin(由于我用的是gitee管理代码,所以需要安装)

    四、配置信息

    点击左上角Dashborad -> 系统管理 -> 全局工具配置

     

    4.1、配置git命令

    4.2、配置node信息

    这里需要选择和自己本地node一致的版本

     

    4.3、配置gitee

     证书令牌需要提前在gitee里配置,登录gitee账户,进入设置 -> 私人令牌 页面,点击生成新令牌

     

    4.4、配置Publish over SSH

    1、在自己的服务器上生产ssh key

    ssh-keygen -t rsa -C "xxxx@xxx.com"

    2、查看生成的公钥

    cat ~/.ssh/id_rsa.pub

    3、复制公钥到下图的位置

     

     

    五、新建任务

     5.1、添加任务和选择任务类型

    点击左侧的 新建任务,打开如下页面,输入一个任务名称,选择“构建一个自由风格的软件项目”,点击确定

     

     5.2、配置源码管理

    5.3、配置构建触发器

     

    在gitee里对应的仓库里点击左侧WebHooks,添加webhook,配置url,并在webhook密码这里填写上一步在jenkins里生成的密码,保存

     

     5.4、配置构建环境

     5.5、配置构建

    增加构建步骤 选择 执行shell,并编写shell脚本:

    继续点击:增加构建步骤  -> Send files or execute commands over SSH

    执行sheel脚本,其实sheel脚本里的命令也就是先把nginx下的对应前端工程代码先进行备份,然后使用npm命令进行打包,生成dist目录,最后再把dist目录下的所有文件复制到nginx下对应的前端工程目录下,这样也就完成了前端工程部署。nginx下替换完前端工程代码后,不用重启nginx。

    六、执行构建

    可以手动点击执行构建,另外我配置了master分支下代码有push时,会自动执行构建。

     如上图,执行构建任务部署成功,浏览器端直接刷新页面即可看到部署后的页面效果。

     

    备注:该篇博客里记录的配置步骤有些粗糙,或许存在遗漏。不足之处敬请指教。

     

  • 相关阅读:
    「前端+鸿蒙」核心技术HTML5+CSS3(十)
    电子支付市场现状研究:预计2022年业务量将增长至3141亿元
    为了带你搞懂 RPC,我们手写了一个 RPC 框架
    网页信息采集-网页数据采集方法
    【vue】vue2.x解决兼容IE8以上问题:
    django项目实战基于Python实现的在线办公系统
    浅看SpringBoot的自动装配
    笙默考试管理系统-MyExamTest----codemirror(38)
    chrome 谷歌浏览器 导出插件拓展和导入插件拓展
    linux缓存-利用缓存提高性能的编程技巧
  • 原文地址:https://www.cnblogs.com/libo0125ok/p/17415662.html