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

872 阅读5分钟

使用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

先进入到安装目录,在使用这个链接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 - 简书

如果你使用的是Apache2这一查看这篇文章 在Ubuntu上使用Apache2搭建一个web服务器