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

上一篇文章其实已经介绍过如何利用 Jenkins + Github + Docker 部署一个 Maven 项目，同时也包含了如何使用 Docker 安装 Jenkins ，以及一些基本概念 📌文章链接

有了后端，那么必然也少不了前端，所以就诞生了本文。

前言

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

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

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

1. 本地开发，push 到 github 仓库后

2. 触发 Github 的钩子函数，通知 Jenkins ，进行重新构建

3. Jenkins 构建完成后，将前端打包出来的 dist 目录，发送到部署的服务器上的 Nginx 容器挂载的部署目录下

4. 进行访问测试

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

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

本篇文章用到的是自由风格式（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 上点击仓库，按下图顺序

之后点击创建即可

2、创建一个 Personal access tokens

三 、Jenkins 部署 Vue 项目

1、安装 Nodejs 插件

等待完成即可

2、配置 Nodejs

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

3、系统配置

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

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

此处还需要下载两个插件

• SSH ： SSH 连接工具

• Publish Over SSH ：SSH 发布工具

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

找到两个配置：

1、SSH remote hosts

2、SSH Servers

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

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

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

（图片说明：变量无需填写）

（图片说明：选择 secret text）

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

（图片说明：选择自己添加的那个 凭据）

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

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

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

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

成功的输出应该如下：

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 任务配置

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

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

 #/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 页面，就会发现它已经开始在构建啦。

（图片说明：此处我放上的是刚写文的测试）

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

看看我滴测试结果~

后记

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

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

写于 2022 年 8 月 3 日晚，作者：宁在春