使用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 - 简书
如果你使用的是Apache2这一查看这篇文章
在Ubuntu上使用Apache2搭建一个web服务器