Jenkins + Github + Nginx 自动化部署 Vue 项目

简介: Jenkins + Github + Nginx 自动化部署 Vue 项目

前言

看起来好像 Jenkins 非常复杂,但其实只要自己多实操几次,一次又一次的去想如何偷懒,你就可以一步一步发现更多的知识点,要相信好奇永远是你的第一老师。

关于如何使用 Docker 安装 Jenkins,Jenkins 插件安装配置、系统配置等,都已在 关于 Docker + Jenkins +Github 实现自动化 中全部陈述。

先说说本文最后做出来的效果:

  1. 本地开发,push 到 github 仓库后
  2. 触发 Github 的钩子函数,通知 Jenkins ,进行重新构建
  3. Jenkins 构建完成后,将前端打包出来的 dist 目录,发送到部署的服务器上的 Nginx 容器挂载的部署目录下
  4. 进行访问测试

除了第一步是需要自己动手外,其余部分实现自动化。

前一篇文章主要介绍了 Jenkins 如何构建一个 Maven 项目,但其实大家可以看到 Jenkisn 还有其他几钟不同的构建项目的方式。

1704465780949.jpg

本篇文章用到的是自由风格式(Freestyle project)部署前端项目。也很简单的哈。

一、初始化项目

如果需要跟着文章实操,大致需要以下环境:

  • 一台云服务器或本地虚拟机
  • 服务器或虚拟机上需要联网、Docker 环境
  • 一个 Github 账号
  • 开发机器上需要有 Git 和 开发环境

1、初始化 Vue 项目

其实我也不知道这一步该不该写......

重点就是大家准备一个可以运行和打包的 Vue 项目。

如果有小伙伴,没的话,我有~,给你指路: jenkins-vue-demo

拉下来之后,把 .git 文件删除掉,然后重新关联你的github 仓库就好~

2、推送至 Github 仓库

  • 在 github 建立一个仓库 (默认大家都会哈~ 不会可以留言的,摸鱼的时候会回复的,别慌)
  • 然后在本地项目目录下执行下面的命令,其实不写,在你创建仓库的时候也会给出这些提示命令
git init 
  git add .
  git commit -m "init"
  git branch -M main
  git remote add  远程仓库地址
  git push origin main

二、设置 Github

1、设置通知 WebHook

在github 上点击仓库,按下图顺序

1704465796780.jpg

1704465807190.jpg

之后点击创建即可

2、创建一个 Personal access tokens

1704465828341.jpg

1704465830769.jpg

1704465858641.jpg

1704465860516.jpg

三 、Jenkins 部署 Vue 项目

1、安装 Nodejs 插件

1704465875038.jpg1704465877119.jpg

等待完成即可

1704465890640.jpg

2、配置 Nodejs

1704465896826.jpg

本地机器查看 node 版本 命令为 node -v

1704465904356.jpg

3、系统配置

之前我们在第四小节,只是在Jenkins中进行了打包,并未发布在服务器上。

如果要发布在服务器上,我们还需要配置一下 远程服务器信息。

此处还需要下载两个插件

稍详细的描述在我上一篇文章:Docker + Jenkins + GitHub 自动化部署 Maven 项目

1704465912480.jpg

找到两个配置:

1、SSH remote hosts

2、SSH Servers

1704465919657.jpg

1704465935882.jpg

1704465929713.jpg

对了记得点击保存哈,不然又得重现填写。

4、创建一个自由风格式任务

1704465943054.jpg

1704465945082.jpg

1704465947421.jpg

(图片说明:指定分支应为 main,图中有误)

1704465961464.jpg

1704465975112.jpg

1704465977804.jpg

1704465980871.jpg

1704466000655.jpg

(图片说明:变量无需填写)

1704466007244.jpg

(图片说明:选择 secret text)

1704466017060.jpg

(图片说明:描述就是取一个名称)

1704466022599.jpg

(图片说明:选择自己添加的那个 凭据)

1704466029464.jpg

1704466036478.jpg

npm cache clear --force # 清理 npm 缓存,之前我一直报错,第一次之后大家可以修改修改 ~
  npm --registry https://registry.npm.taobao.org install cluster # 配置淘宝镜像
  npm install --force 
  npm run build
  echo "打包完成"

执行到这一步时,我们已经可以测试我们当前的这个自由风格的任务了。

点击立即构建,看看git有没有成功拉取,有没有打包成功。

第一次构建的时间也会稍长,需要拉取项目,下载Nodejs,下载依赖等,这些信息都会在控制台上可查看:

1704466044499.jpg

1704466047366.jpg

成功的输出应该如下:

1704466057376.jpg

1704466062296.jpg

5、浅提一下Nginx

谈到部署前端项目时,大部分情况下我们不可避免的会谈到Nginx服务器。

Nginx 这个中间件,不管是对于后端还是前端,都是需要了解的一个服务器。

想要深入的了解它,可能还需要你好好的花费一些时间。

关于Docker 安装 Nginx 部署 前端项目 ,我之前已经写好,链接:Docker 安装 Nginx


后面的小节,都是默认大家已经安装好了Nginx~

我的Nginx 的 server配置如下:

location /hello {
      alias    /usr/share/nginx/html/www/hello/dist;
      try_files $uri $uri/ /hello/index.html;
      index  index.html index.htm;
  }

我们部署成功访问的路径是:IP : Port/hello/ ,例如:192.168.1.100/hello/ 就是访问此项目的的地址。

详细的还是得大家去了解一下。

6、修改Jenkins 任务配置

打开任务配置,直接划到最下面

1704466096969.jpg

1704466099274.jpg

然后选中之前配置的服务器

1704466110204.jpg

#/bin/bash
 # 其实在这里执行的命令,就是在你选择的那台服务器上执行的命令
  echo ">>>>>>>>>>>>>开始执行   此处的 /home/nginx/html/web 是我 nginx 容器 挂载的目录 >>>>>>>>>>>>>"
  cd /home/nginx/html/www/hello/dist/
  rm -rf  dist
  echo ">>>>>>>>>>>>>cd到Jenkins工作挂载目录下>>>>>>>>>>>>>"
  cd /home/jenkins/workspace/jenkins-vue-demo
  echo ">>>>>>>>>>>> 将dist文件夹复制到 nginx 的挂载目录下 >>>>>>>>>>>>>"
  cp -r dist /home/nginx/html/www/hello/
  echo ">>>>>>>>>>>>复制成功  启动成功>>>>>>>>>>>>>"

注意:此处我是直接采取将 dist 目录直接放在了 Nginx 部署的目录下的,请注意:我这里并非是一个合格的方式,只能说是用来写Demo倒也无妨。请大家不要照抄~.

7、最佳实践

看过上一篇文章的读者可能知道,真正的应用场景中这样的部署并不安全,一旦出现bug,甚至都没法立马回退版本,或者出现意外情况没法快速横向扩容.

所以大概率下,最佳实践应当是

  1. 在 vue 项目中增加 Dockerfile 文件 和 nginx.conf 配置文件
  2. 部署时,首先将 dist + Dockerfile + nginx.conf 打成镜像 (docker build 相关明令)
  3. 将打包出来的镜像上传至存储应用的服务器或DockerHub(私服仓库)
  4. 最后在部署服务器上从存储镜像的那台服务器上拉取镜像,执行 docker run 相关命令进行发布.
  5. 测试

原本是没有这一小节的,但是读了一遍,感觉有点遗漏,就新增了这一段。

当时在写的时候,前期的Nginx环境已经搭好,一定程度上少了一些思考,所以就补了这一小节。

关于 Vue 项目利用 Dockerfile 打包成镜像部署,以往也写过一篇不成熟的博客,如果有想改造成镜像发布的小伙伴,可以参考一下。链接:Docker 部署 vue项目

8、测试自动构建

我们在本地修改文件,然后推送到远程仓库中,你刷新jenkins页面,就会发现它已经开始在构建啦。

1704466152864.jpg1704466116388.jpg

(图片说明:此处我放上的是刚写文的测试)

请注意:Github 因为是公用资源,有一定程度延迟,这一点在自己搭建的GitLab的私有仓库上是没有的。

看看我滴测试结果~

1704466126846.jpg

后记

写到这里本文也算是结束了,感觉这篇文章的质量比起上一篇的质量略低,可能里面带有一些重复性的内容,导致写起来有些懈怠了,望各位见谅。

看完这两篇文章,可能会有小伙伴产生一种感觉自己会用 Jenkins 了,哈哈,我也有这种感觉,但其实还差得很常远的,不过自己简单使用是肯定没啥问题了。

这个专栏还在继续更新,两篇入门文章总算是搞定了~

希望让你有所收获~,很开心你读到这里,听我讲完废话

如果今天的你也没有收到情书的话,那就让我送一封情书给你吧💌,

你不是一个人,你还有我。

玫瑰已然到了花期

目录
相关文章
|
16天前
|
jenkins 持续交付
Jenkins自动化部署脚本
Jenkins自动化部署脚本
22 0
|
22天前
|
人工智能 文字识别 异构计算
关于github开源ocr项目的疑问
小白尝试Python OCR学习,遇到报错。尝试Paddle OCR部署失败,Tesseract OCR在Colab误操作后恢复失败。EasyOCR在Colab和阿里天池Notebook成功,但GPU资源不足。其他平台部署不顺,决定使用WebUI或阿里云轻应用。求教OCR项目部署到本地及简单OCR项目推荐。
24 1
|
23天前
|
人工智能 自然语言处理 iOS开发
『GitHub项目圈选19』推荐5款本周 让人爱不释手 的开源项目
『GitHub项目圈选19』推荐5款本周 让人爱不释手 的开源项目
|
23天前
|
存储 Web App开发 人工智能
『GitHub项目圈选18』推荐5款本周 超实用 的开源项目
『GitHub项目圈选18』推荐5款本周 超实用 的开源项目
|
23天前
|
人工智能 物联网 机器人
『GitHub项目圈选17』推荐5款本周 火火火 的AI开源项目
『GitHub项目圈选17』推荐5款本周 火火火 的AI开源项目
132 1
|
23天前
|
JSON 搜索推荐 程序员
『GitHub项目圈选15』推荐5款本周 深受程序员喜爱 的开源项目
『GitHub项目圈选15』推荐5款本周 深受程序员喜爱 的开源项目
|
23天前
|
人工智能 自然语言处理 NoSQL
『GitHub项目圈选13』推荐5款本周 让人爱不释手 的开源项目
『GitHub项目圈选13』推荐5款本周 让人爱不释手 的开源项目
|
10天前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
59 0
|
7天前
|
jenkins 测试技术 持续交付
软件测试|docker搭建Jenkins+Python+allure自动化测试环境
通过以上步骤,你可以在Docker中搭建起Jenkins自动化测试环境,实现Python测试的自动化执行和Allure报告生成。 买CN2云服务器,免备案服务器,高防服务器,就选蓝易云。百度搜索:蓝易云
26 6
|
22天前
|
前端开发 应用服务中间件 nginx
nginx中配置不输入端口(指定地址)访问项目的方法
nginx中配置不输入端口(指定地址)访问项目的方法
23 0