在上两篇文章中,我们分别演示了 用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插件
- 点击Jenkins首页中的Manage Jenkins,进入系统设置
- 点击Plugins,进入插件中心
- 选择Available Plugins,搜索NodeJS,勾选后,点击Install without restart(安装无需重启)
- 等待安装完毕后返回首页
2.4 Jenkins配置Node环境变量
- 点击Manage Jenkins,点击Tools(有些版本的jenkins也叫Global Config),进入工具配置
- 往下拉找到NodeJS,点击新增NodeJS
- 取消勾选Install automatically,用我们自己的Node版本
- 新增NodeJS内容,Name随便取,安装路径用的是自己配置的node路径
- 点击保存返回首页!!!
2.5 前端项目已上传至GitLab中
二、Jenkins本地环境部署Vue
1、构建前操作
除构建外,其他的操作流程与上两篇部署SpringBoot完全相同:
包含以下操作:
- 创建流水线
- 源码管理(配置项目git地址和分支)
- 构建触发器(配置触发条件和Webhooks)
参考文章:https://www.toutiao.com/article/7254042705716593164
2、Build Steps
-
点击增加构建步骤,选择“Execute NodeJS script”,从“NodeJS Installation”中选择我们刚才添加的Node版本,其他的默认即可,不需要改动
-
继续往下点击增加构建步骤,选择“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
-
保存回首页,点击“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、测试效果
三、远程服务器部署
将Vue项目部署到远程服务器,与刚才的本地部署有两处不同:
-
“Execute shell”这个模块中,不再需要复制dist文件夹,只需要安装依赖和打包即可
#!/bin/bash # 刷新环境变量 source ~/.bash_profile # 安装依赖 npm install # 打包为dist文件夹 npm run build
-
流水线配置中拉到最后,找到“构建后操作”,点击“增加构建后操作部署”,找到“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:到达远程服务器后执行的命令,不能为空,随便填写一下即可。
-
远程服务器同样执行Docker命令,去映射本地”index.html”路径
docker run \
-p 8002:80 \
--name vue-test \
--restart=always \
-v /data/vue:/usr/share/nginx/html \
-d nginx:latest
- 测试效果
访问:http://192.168.1.12:8002/
四、总结
本文讲解了在Jenkins服务器和远程服务器上自动化部署前端Vue项目的过程。功能不难,但是也确实需要自己上手去做才可以实现。最近项目紧,有时间的话,我会继续更新用DockerFile、Docker Compose或者Docker Swam等方式继续实现自动化部署的工作,感谢大家支持!
所有你想象的一切,皆是现实!