Jenkins + Github + Nginx 自动化部署 Vue 项目-CSDN博客

本文链接：https://blog.csdn.net/china_coding/article/details/128478683

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

祝各位七夕快乐，如果有机会，就不要再错过她或是他了。

算起来，这应该是建立这个专栏来的第三篇文章啦，可喜可贺，虽然菜，但还在坚持写。

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

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

前言

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

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

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

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

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

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

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

一、初始化项目

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

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

1、初始化 Vue 项目

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

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

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

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

2、推送至 Github 仓库

在 github 建立一个仓库 (默认大家都会哈~ 不会可以留言的，摸鱼的时候会回复的，别慌)
然后在本地项目目录下执行下面的命令，其实不写，在你创建仓库的时候也会给出这些提示命令

gitinit 
  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,甚至都没法立马回退版本,或者出现意外情况没法快速横向扩容.

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

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

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

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

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