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编译前端项目

安装插件

点击系统管理下的插件管理，安装nodekjs和Publish 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)