手把手教你从买服务器到配置好Jenkins自动化部署前端项目

405 阅读6分钟

一、首先咱们先要有自己的服务器。

这里我是腾讯云打折买的 几十块一年,买来自己玩玩。 买的时候配置如下如,我用的是centOS,支付之后等待服务器实例创建完成。

fuwuqi.jpg 使用腾讯云的话创建好实例后会在自己的站内信收到邮件,里面有服务器的账号密码,这里可以先复制到自己剪切板后面需要用到。

image.png

实例创建完成后进入服务器可以看到我们的服务器ip

二、连接上自己的服务器

我这边使用的是xShell,你们也可以用自己喜欢的方式链接。 下载地址:xshell.en.softonic.com/ 也可以自行百度下载。 安装则是无脑下一步就ok。然后打开xShell 下面开始连接服务器。 跟着下面截图操作: image.png 然后会让你输入服务器的用户名,这在第一步的的站内信哪里可以拿到

image.png 点击确定,然后是输入密码

image.png 输入后点击确定,连接

image.png 出现下图这样表示连接成功。

三、安装宝塔面板

centOS 安装命令:

yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

image.png 中途会有询问,看到都输入y 然后回车。

安装完成后,复制宝塔面板地址至地址栏打开,输入下面的用户名和密码,进入服务器宝塔管理界面。

image.png

这里别忘了去自己的服务器放行宝塔面板所用的端口!!! 以腾讯云为例 搜索安全组,在入站规则中点击添加规则

image.png 我这里直接添加了这两个端口,一个是宝塔的,一个是预留给后面jenkings使用的,我的宝塔是8889 jenkins是8883

image.png 初次进入服务器宝塔管理界面会让你安装服务器环境及登录,服务器环境左边一套,右边一套,都可以。

image.png

四、使用宝塔安装docker

在软件商城安装Docker管理器

image.png 使用docker下载jenkins镜像
使用命令行

docker pull jenkins/jenkins:lts //lts表示支持版本较长

创建并且挂载jenkins目录并赋值
jenkins_home为我创建的目录 可以修改任意目录

mkdir -p /jenkins_home chown -R 1000 /jenkins_home

创建并启动Jenkins

我这里设置的端口为8080 启动之前需要在云服务器管理平台和宝塔开通相应端口号

docker run -di --name=jenkins -p 8080:8080 -v  /jenkins_home:/var/jenkins_home jenkins/jenkins:lts

-d 标识是让 docker 容器在后盾运行
-p 8080:8080 将镜像的8080端口映射到服务器的8080端口
-v  /jenkins_home:/var/jenkins_home目录为容器jenkins工作目录,咱们将硬盘上的一个目录挂载到这个地位,不便后续更新镜像后持续应用原来的工作目录。这里咱们设置的就是下面咱们创立的 /var/jenkins_mount目录
--name定义一个容器的名字,如果没有指定,那么会主动生成一个随机数字符串当做UUID

出现下面代表成功

image.png

复制自己的服务器ip+刚刚启动jenkins的端口号到浏览器打开,如果打不开请检查自己有没有开放端口,看第三步哪里。

image.png 出现下面提示:

image.png 输入密码路径为 之前设置的路径 可以在文件中找或者

docker logs jenkins

image.png 直接安装推荐插件

image.png 这里等一会,有点久

image.png 安装成功后创建管理员账号(一定要记住这个也是登录账号密码)

image.png 这里实例配置直接默认 就行

image.png 安装成功

image.png 完成后最好在docker中重启下jenkins镜像
登录

image.png

五、配置Jenkins

首先下载插件

image.png 安装插件 NodeJS、Publish Over SSH (下图为安装教程)这三个插件都这么安装

image.png 完成

image.png 接下来添加凭证(这里我认为的是添加全局账号密码例如服务器账号、git账号密码)部署时候用

image.png

image.png

image.png

image.png 这里我创建了服务器账号密码和gitee账号密码

image.png 添加完成后可以在这里看到我们的凭证

image.png 接下来配置node工具

image.png image.png 设置好 勾选自动安装然后应用=》保存不要选18版本的node 有问题

六、接下来配置服务器SSH

首先在宝塔中开启SSH

image.png

image.png

之后来到Jenkins这边

image.png 找到 Publish over SSH

需要配置 Passphrase 服务器SSH远程连接密码

Passphrase密码我没有设置则是空 SSH Servers中 Name 服务器名称(随便起名) Hostname 主机号 例如192.168.0.1 (实际主机号) Username 服务器SSH远程连接账号 Remote Directory 进入的路径

image.png

image.png 输入完成之后点击右下角测试 显示成功说明成功连接

image.png

七、创建并配置项目

来到Jenkins面板 点击新建项目 image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png 填下面命令

node -v
npm -v
 npm install -g cnpm --registry=http://registry.npmmirror.com
cnpm install
npm run build
#进入到打包目
ls
cd dist
ls
#删除上次打包生成的压缩文件
rm -rf *.tar.gz
#把生成的项目打包成压缩包方便传输到远程服务器
tar -zcvf `date +%Y-%m-%d-%H-%M-%S`.tar.gz *
#回到上层工作目录
cd ../
echo "构建结束"


里面的npm指令根据实际的命令调整
这里步骤是 把你的代码构建成文件并且压缩下一步应该发到你的服务器
这里点击添加构建步骤

image.png

image.png Exec command 写入下面命令:

#进入远程服务器的目录
cd /www/wwwroot/你的项目地址
#找到新的压缩包
tar -zxvf *.tar.gz -C ./
echo ">>>移除*.tar.gz"
rm -rf *.tar.gz
#发布完成
echo "发布完成"

应用保存
就可以去尝试部署了

image.png 成功

image.png

八、去宝塔中创建网站

打开文件 看看刚刚打包的东西有没有到服务器上 image.png 添加站点

image.png

image.png

image.png 然后点保存 然后启动Nginx 和站点 我这里默认是启动了的

image.png 这时候复制刚刚设置的ip

image.png 然后在浏览器打开就可以看到自己的网站了。

九、配置gitee推代码后自动触发Jenkins自动部署

安装配置 Generic WebHookTrigger

目的: 为Jenkins作业添加触发器,便于其他系统调用
安装配置Generic WebHook,插件名称:Generic Webhook Trigger

image.png

image.png

image.png

image.png 找到之前新建的项目,点击配置

image.png

image.png 去到自己的代码仓库,我这里用的是gitee ,进入仓库找到管理->webHooks->添加webHooks

image.png

image.png 填好后点击添加 然后点击这里

image.png 看到这里请求状态码是绿色的200说明请求成功,去Jenkins可以看到项目在构建了。

image.png

构建完成后打开自己站点的ip 就是最新的代码,之后只要自己向仓库推送代码都会触发构建。