Ubuntu下使用Jenkins搭建前端自动化部署

使用Jenkins编译前端环境不仅需要安装jenkins还要安装nodejs,git和Java。

安装Java

如果已经安装了Java可以跳过此步骤

如果不确定是否已经安装了jre可以运行java -version命令,查看jer的版本,看到一下信息说明没有安装jer。

Command 'javac' not found, but can be installed with:

apt install openjdk-11-jdk-headless  # version 11.0.11+9-0ubuntu2~20.04, or
apt install default-jdk              # version 2:1.11-72
apt install openjdk-13-jdk-headless  # version 13.0.7+5-0ubuntu1~20.04
apt install openjdk-16-jdk-headless  # version 16.0.1+9-1~20.04
apt install openjdk-8-jdk-headless   # version 8u292-b10-0ubuntu1~20.04
apt install ecj                      # version 3.16.0-1

执行一下命令安装jdk。

apt install openjdk-8-jre-headless

如果你需要编译其他Java代码就需要安装jdk了。

apt install default-jdk

安装nodejs

如果已经安装nodejs可以跳过此步骤。

方法一:使用apt包管理器安装

查看当前系统是否已经安装了nodejsnode -v,如果显示一下界面就是没有安装nodejs。

Command 'node' not found, but can be installed with:

apt install nodejs

执行node -v查看node的版本;

v14.17.6

方法二:离线安装,这种方式不仅适用于Ubuntu系统同样适用于CentOS

先进入到安装目录,在使用这个链接https://nodejs.org/下载Linux的二进制文件。

请添加图片描述

下载完成后使用上传到服务器的/usr/local目录,上传到什么目录下可以自己定义,上传号后使用tar解压,

tar xf node-v14.17.6-linux-x64.tar.xz

解压好后编辑profile文件。

vim /etc/profile

把下面的内容添加到最后一行$PATH后面是node下bin的目录

export PATH=$PATH:/usr/local/node-v14.17.6-linux-x64/bin

执行下面的命令看到这样的提示就安装成功了。

root@gml:/usr/local# node -v
v14.17.6
root@@gml:/usr/local# npm -v
6.14.15
root@@gml:/usr/local# npx -v
6.14.15

需要对前端箱码进行打包我们一般会使用到yarn包管理器。

npm install -g yarn
yarn -v
1.22.11

安装Git

自动化编译需要先从代码仓库中拉去代码才能编译打包。
安装步骤省略…

安装Jenkins

这是 Jenkins 的 Debian 软件包存储库,用于自动安装和升级。要使用此存储库,首先将密钥添加到您的系统:

wget -q -O - https://pkg.jenkins.io/debian-stable/jenkins.io.key | sudo apt-key add -

然后添加一个 Jenkins apt 存储库条目:

sudo sh -c 'echo deb https://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'

更新您的本地包索引,然后最后安装 Jenkins:

sudo apt-get update
sudo apt-get install jenkins

启动Jenkins

service jenkins start

启动完成后可以通过浏览器访问到Jenkins的访问,默认端口是8080。根据页面上的路径提示打开相应的文件,把文件里的密码复制到输入框里并点击继续。

vim /var/lib/jenkins/secrets/initialAdminPassword

请添加图片描述

安装推荐的插件,并初始化用户名和密码。


请添加图片描述
请添加图片描述
请添加图片描述

配置Jenkins编译前端项目

安装插件

点击系统管理下的插件管理,安装nodekjsPublish Over SSH插件。安装好后重启Jenkins。

请添加图片描述

请添加图片描述

配置nodejs

进入系统管理-全局工具配置,在最下面找到NodeJs(如果没有安装nodejs插件的话就看不到)。
在这里插入图片描述

别名自己定义一个。


在这里插入图片描述

下面验证一下刚才配置的nodejs是否生效。在首页视图中找到新建项目。


在这里插入图片描述

任务的名称自己自己可以随便定义一个这只是用来测试的,选择构建一个自由风格的软件项目。
确认后直接定位到构建环境。选择Provide Node & npm bin/ folder to PATH,NodeJS Installation选中的就是刚才配置nodejs.

在这里插入图片描述

构建步骤选择执行shell

在这里插入图片描述

输入node -v保存

在这里插入图片描述

点击立即构建,会在Build History里显示当前构建的记录。点击构建记录可以查看详情。


在这里插入图片描述

进入构建记录里点击控制台输出看到一下的提示说明nodejs配置的没有问题。
在这里插入图片描述

配置Publish Over SSH

在系统管理下找到系统配置。


在这里插入图片描述
在这里插入图片描述

部署前端

新建一个项目,名称自定义,选择构建一个自由风格的软件项目。


在这里插入图片描述

点击源码管理选择git设置git仓库地址和认证方式。并且指定分支,在打包的时候会自动拉取这个分支。


在这里插入图片描述

定位到构建环境选择Provide Node & npm bin/ folder to PATH,默认会选择刚才配置的nodejs项目。添加构建步骤选择执行shell

在这里插入图片描述

执行shell命令:

yarn install
yarn build
tar -zcf dist.tar.gz ./dist

在这里插入图片描述

选择构建后操作,添加构建后的步骤,选择Send build artifacts over SSH

在这里插入图片描述

  • name: 上文在 系统管理 > 配置中心 中配置的 ssh 服务器名字。
  • Source files: 制定上传到服务器的文件,注意这里的文件是上面我们配置的构建脚本产生的文件。
  • Remote directory: 这个是上传到远程服务器位置,上传上去的文件还是一个压缩包,后面还有在这个目录下执行节约命令
  • Exec command: 在远程服务器上执行的 shell 命令:
cd /www
sudo rm -rf dist
sudo tar -zxf dist.tar.gz
sudo rm -f dist.tar.gz

在这里插入图片描述

到这里基本的功能已经配置完成点击保存,回到任务主界面点击立即构建。


在这里插入图片描述

把dist文件夹放到www目录下用nginx就可以起服务就可以了。nginx如何搭建web应用请看这篇文章前端项目上线_nginx - 简书 (jianshu.com)

如果你使用的是Apache2这一查看这篇文章
在Ubuntu上使用Apache2搭建一个web服务器 - 简书 (jianshu.com)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,240评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,328评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,182评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,121评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,135评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,093评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,013评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,854评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,295评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,513评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,398评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,989评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,636评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,657评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2 352

推荐阅读更多精彩内容