从零实现DevOps(六)：Jenkins+GitLab+Docker+Nginx自动化部署前端Vue项目

在上两篇文章中，我们分别演示了 用Jenkins+GitLab实现 从本地环境和远程服务器 去部署SpringBoot项目。众所周知，现在的软件开发主流趋势是前后端分离，后端开发人员负责数据处理，前端负责页面展示。既然分离了，那么前后端就都需要部署后才可以使用。这篇文章就以Vue项目为例，实现本地环境和远程环境自动化部署Vue项目。

一、前置条件

1、硬件需求

两台Centos7操作系统（虚拟机或者主机都可以）

• VMware创建虚拟机教程：https://www.toutiao.com/article/7240831223612867106
• Centos7基础配置流程：https://www.toutiao.com/article/7244383860526563879

2、软件需求

2.1 主服务器 安装Jenkins

Jenkins安装教程：https://www.toutiao.com/article/7251905396581859843/

2.2 主服务器和远程服务器 安装Node

Centos7环境变量配置教程：https://www.toutiao.com/article/7251513478639485479/

2.3 Jenkins安装Node插件

1. 点击Jenkins首页中的Manage Jenkins，进入系统设置
2. 点击Plugins，进入插件中心
3. 选择Available Plugins，搜索NodeJS，勾选后，点击Install without restart（安装无需重启）
   
4. 等待安装完毕后返回首页
   

2.4 Jenkins配置Node环境变量

1. 点击Manage Jenkins，点击Tools(有些版本的jenkins也叫Global Config)，进入工具配置
2. 往下拉找到NodeJS，点击新增NodeJS
3. 取消勾选Install automatically，用我们自己的Node版本
4. 新增NodeJS内容，Name随便取，安装路径用的是自己配置的node路径
5. 点击保存返回首页！！！

2.5 前端项目已上传至GitLab中

二、Jenkins本地环境部署Vue

1、构建前操作

除构建外，其他的操作流程与上两篇部署SpringBoot完全相同：

包含以下操作：

1. 创建流水线
2. 源码管理（配置项目git地址和分支）
3. 构建触发器（配置触发条件和Webhooks）

参考文章：https://www.toutiao.com/article/7254042705716593164

2、Build Steps

1. 点击增加构建步骤，选择“Execute NodeJS script”，从“NodeJS Installation”中选择我们刚才添加的Node版本，其他的默认即可，不需要改动
   

2. 继续往下点击增加构建步骤，选择“Execute shell”，这一项是在服务器上执行的命令，包含如下：

   （1）指定bash为脚本指令

   （2）npm下载前端依赖

   （3）Vue项目打包

   （4）将打包后的“dist文件夹”复制到我们自建的目标位置

   代码为：

   #!/bin/bash
   
   # 刷新环境变量
   source ~/.bash_profile
   
   # 安装依赖
   npm install
   # 打包为dist文件夹
   npm run build
   
   # 复制dist文件夹中的内容到指定位置
   cp -r dist/ /data/vue
   

3. 保存回首页，点击“Build Now”，查看构建是否正常运行，然后去服务器上，查看指定目录中，是否已经把打包好的dist文件夹里边的东西复制过来

   构建完毕：
   控制台显示Success，构建成功：
   
   打包后的文件也复制成功：
   

3、Docker安装nginx映射文件（index.html）

输入命令即可：

docker run \
-p 8002:80 \
--name vue-test \
--restart=always \
-v /data/vue:/usr/share/nginx/html \
-d nginx:latest

解释一下：

• -p：容器外部端口号对应容器内部端口号，我们访问服务器的8002即访问的容器内部的80端口
• —name：容器名称
• –restart=always：遇到问题自动重启
• -v：容器外部挂载文件，这里是重点，在nginx的默认配置文件中，当访问到80端口时，会自动跳转到“/usr/share/nginx/html/index.html”文件上，所以我们才需要把本地刚才打包后的内容，与容器内部做一个外链挂载
• -d：容器在后台运行

容器启动成功：

4、测试效果

访问：http://192.168.1.11:8002/

三、远程服务器部署

将Vue项目部署到远程服务器，与刚才的本地部署有两处不同：

1. “Execute shell”这个模块中，不再需要复制dist文件夹，只需要安装依赖和打包即可

   #!/bin/bash
   
   # 刷新环境变量
   source ~/.bash_profile
   
   # 安装依赖
   npm install
   # 打包为dist文件夹
   npm run build
   

2. 流水线配置中拉到最后，找到“构建后操作”，点击“增加构建后操作部署”，找到“Send build artifacts over SSH”并点击，填写如下内容
   （1）Transfers：需要发送的文件。这里的执行路径是“/root/.jenkins/workspace/项目名称”下，在你用Npm命令打包完成后，会生成dist文件夹。所以，这里只需要填写“**dist/****”即可，这样就能把dist文件夹中的所有内容全部复制到远程服务器”。

   （2）Remove prefix：需要移除的目标前缀。不需要把dist文件夹也传过去，所以把dist文件夹移除掉即可，只发送文件夹中的内容即可。

   （3）Remote directory：目标文件夹。这里就是你的dist文件夹中内容发送到远程服务器的位置。而且这个位置也是Docker Nginx命令挂载的位置。

   （4）Exec command：到达远程服务器后执行的命令，不能为空，随便填写一下即可。

3. 远程服务器同样执行Docker命令，去映射本地”index.html”路径

docker run \
-p 8002:80 \
--name vue-test \
--restart=always \
-v /data/vue:/usr/share/nginx/html \
-d nginx:latest

1. 测试效果
   访问：http://192.168.1.12:8002/

四、总结

本文讲解了在Jenkins服务器和远程服务器上自动化部署前端Vue项目的过程。功能不难，但是也确实需要自己上手去做才可以实现。最近项目紧，有时间的话，我会继续更新用DockerFile、Docker Compose或者Docker Swam等方式继续实现自动化部署的工作，感谢大家支持!

所有你想象的一切，皆是现实！