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

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

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

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

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

二、连接上自己的服务器

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

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

输入后点击确定,连接

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

三、安装宝塔面板

centOS 安装命令:

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

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

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

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

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

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

四、使用宝塔安装docker

在软件商城安装Docker管理器

使用docker下载jenkins镜像

使用命令行

js 复制代码
docker pull jenkins/jenkins:lts //lts表示支持版本较长

创建并且挂载jenkins目录并赋值

jenkins_home为我创建的目录 可以修改任意目录

js 复制代码
mkdir -p /jenkins_home chown -R 1000 /jenkins_home

创建并启动Jenkins

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

bash 复制代码
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

出现下面代表成功

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

出现下面提示:

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

js 复制代码
docker logs jenkins

直接安装推荐插件

这里等一会,有点久

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

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

安装成功

完成后最好在docker中重启下jenkins镜像

登录

五、配置Jenkins

首先下载插件

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

完成

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

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

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

接下来配置node工具

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

六、接下来配置服务器SSH

首先在宝塔中开启SSH

之后来到Jenkins这边

找到 Publish over SSH

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

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

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

七、创建并配置项目

来到Jenkins面板 点击新建项目

填下面命令

jsecho 复制代码
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指令根据实际的命令调整

这里步骤是 把你的代码构建成文件并且压缩下一步应该发到你的服务器

这里点击添加构建步骤

Exec command 写入下面命令:

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

应用保存

就可以去尝试部署了

成功

八、去宝塔中创建网站

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

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

这时候复制刚刚设置的ip

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

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

安装配置 Generic WebHookTrigger

目的: 为Jenkins作业添加触发器,便于其他系统调用

安装配置Generic WebHook,插件名称:Generic Webhook Trigger

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

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

填好后点击添加 然后点击这里

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

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

相关推荐
小远yyds7 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端1 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱1 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
许野平1 小时前
Rust: 利用 chrono 库实现日期和字符串互相转换
开发语言·后端·rust·字符串·转换·日期·chrono
guai_guai_guai1 小时前
uniapp
前端·javascript·vue.js·uni-app
bysking2 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云3 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js