使用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)
网友评论