小白学习gitlab+jenkins进行自动化构建(docker)之vue项目

前言

之前，我写过一篇如何使用jenkins+docker自动化构建springboot的项目的博文，极大的减少了后端开发部署的工作。所以，我打算将前端项目也进行自动化构建，但目前不采用容器化部署，容器化部署后期再做。

springboot的自动化构建参考这篇博文：小白学习gitlab+jenkins进行自动化构建(docker)之springboot项目

准备

安装nodejs和创建nginx容器

nginx安装

nginx采用的是容器化部署，容器部署参考这篇博文：小白学习nginx（一）–docker创建nginx容器

nodejs的安装

通过官方查询需要安装的版本

由于我本地的nodejs版本是v12.16.0，所以我安装的是nodejs-v12, 安装命令如下:

curl -fsSL https://deb.nodesource.com/setup_12.x | bash -
apt-get install -y nodejs
复制代码

一般npm远程仓库下载依赖相当慢，所以我这里将npm的代理改成了我自己安装的nexus私服中的npm仓库

npm config set registry http://192.168.57.128/:9081/repository/group-npm/
复制代码

也可以在jenkins安装nodejs, 原因我会在下面实际操作的教程中说明

新建一个jenkins任务

本案例是对vue项目进行自动化构建，因此新建的任务的类型选择构建一个自由风格的软件项目

源码管理

进入刚刚新建的任务，进行源码管理的配置

构建触发器

构建环境

如果选择执行shell的方式，还需要在系统管理->全局工具配置中安装nodejs

构建后操作

gitlab配置

选择要构建的项目，settings->webhooks

至此，配置完成，在gitlab上刚刚添加的webhook选择push event点击测试，测试成功如下图：

输入ip+端口进行访问（我在nginx里配置了）,访问成功如下图：

总结

经过上述步骤，已经完成了jenkins+gitlab自动化构建和部署vue项目，极大的减少了开发者的工作，提升了方便性。