Web Deploy 前端自动化部署平台，一个专门部署 Web 前端的自动化部署平台，相较于强大的 Jenkins 配置更加简单、使用更加方便快捷！支持发布版本回滚、各种 Web 的跨域部署等，目前此平台支持静态资源、 Vue、React 项目部署，以及自动远程服务部署。
主要技术栈
- 前端：Vue（全家桶）、font-awesome、view-design
- 后端：Nodejs、MongoDB、Express
- 工具：npm、git、pm2
主要功能点
【?】前端项目静态部署，指部署打包后的静态资源（已完成）
【?】git 自动部署，包括 github、gitlab、gitee 代码托管平台关联部署（已完成）
【?】项目版本回滚部署，每个版本间可以进行切换部署（已完成）
【?】支持多个项目部署，各项目之间互不影响（已完成）
【?】各项目支持跨域（多个）请求部署（已完成）
【?】支持 OAuth（github、gitlab、gitee）第三方登录（已完成）
【?】支持项目部署服务的暂停/启动（已完成）
【?】支持自动部署服务的暂停/启动（已完成）
【?】支持部署项目的 history/hash 访问模式（已完成）
【新增】支持私有仓库自动化部署
【新增】支持远程静态部署、Git 自动部署（已完成）
部分截图
快速开始配置环境
Linux操作系统（Centos 或者 Ubuntu）、Node环境、PM2、Git、MongoDB数据库。
安装（以 Centos 为例）
安装Git
yum install git确认Git已经安装成功
git version若出现版本号则安装成功！
安装 Nodejs LTS版本
wget https://nodejs.org/dist/v13.1.0/node-v13.1.0-linux-x64.tar.xz
xz -d node-v13.1.0-linux-x64.tar.xz
tar -xvf node-v13.1.0-linux-x64.tar.xzNodejs 安装成功后配置一下环境变量，即可。
node -v
npm -v若出现版本号则安装成功！
安装pm2
npm install -g pm2确认pm2已经安装成功
git -v若出现版本号则安装成功！
安装 MongoDB
//下载mongodb包
wget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-4.0.1.tgz
//解压mongodb包
tar xzvf mongodb-linux-x86_64-rhel70-4.0.1.tgz
//重命名
mv mongodb-linux-x86_64-rhel70-4.0.1 mongodbserver
快速安装使用
以 Linux CentOS 7 为例
git clone https://github.com/zlluGitHub/web-deploy.git
node ./lib/www或者使用 pm2 使进程常驻后台
git clone https://github.com/zlluGitHub/web-deploy.git
pm2 start ./lib/www --name=web-deploy配置文件 config.json 说明
{
"database": {
"name": "SimpleDesignNew", //数据库名称
"port": "27017", //数据库端口
"ip": "127.0.0.1", //数据库ip
"username": "", //用户名
"password": "" //用户密码
},
"port": 80, //项目启动端口
"oauth": { // 第三方登录相关配置
"github": {
"state": false, //如需开启请设置成 true ,默认 false
"client_ID": "", // 客户ID
"client_Secret": "", // 客户密匙
"access_token_url": "https://github.com/login/oauth/access_token", // 获取 access_token 地址
"authorize_url":"",
"user_info_url": "https://api.github.com/user", // 获取用户信息
"name": "你的github账号名称"
},
"gitee": {
"state": false, //如需开启请设置成 true ,默认 false
"client_ID": "", // 客户ID
"client_Secret": "", // 客户密匙
"headers": { //请求头配置
"User-Agent": "你的gitee用户名"
},
"authorize_url":"",
"access_token_url": "https://gitee.com/oauth/token",// 获取 access_token 地址
"user_info_url": "https://gitee.com/api/v5/user" // 获取用户信息
},
"gitlab": {
"state": false, //如需开启请设置成 true ,默认 false
"client_ID": "", // 客户ID
"client_Secret": "", // 客户密匙
"authorize_url":"",
"access_token_url": "", // 获取 access_token 地址
"user_info_url": "" // 获取用户信息
}
}
}
开启第三方登录
此平台已支持 github、gitlab、gitee 这三种登录方式，首先，需要在根目录下找到 config.json 配置文件，添加如下内容（根据自身需求添加即可）
{
...
...
"oauth": {
"github": {
"state": true,
"client_ID": "",
"client_Secret": "",
"authorize_url":"",
"access_token_url": "",
"user_info_url": "",
"name": ""
},
"gitee": {
"state": true,
"headers": {
"User-Agent": ""
},
"client_ID": "",
"client_Secret": "",
"authorize_url":"",
"access_token_url": "",
"user_info_url": ""
},
"gitlab": {
"state": true,
"client_ID": "",
"client_Secret": "",
"authorize_url":"",
"access_token_url": "",
"user_info_url": ""
}
}
}
属性说明
静态部署
这种部署适用于一些静态资源的部署，部署方式如下：
1、填写（选择）项目名称；
2、填写你要部署的根目录；
3、若部署项目存在跨域问题，可在这里填写代理地址（选填）；
4、点击上传你要部署的项目打包目录文件；
5、填写项目的部署摘要内容；
6、点击提交部署即可；
自动化部署
1、填写（选择）项目名称；
2、填写你要部署的根目录；
3、若部署项目存在跨域问题，可在这里填写代理地址（选填）；
4、填写你要部署的项目的 Git 地址；
5、填写你要部署的项目的 Git 分支，默认 master；
6、填写项目的打包部署命令，例如：npm run build；
7、根据项目实际的打包目录为准，默认：dist；
8、填写项目的部署摘要内容；
9、点击提交部署即可；
注意：此部署方式部署时间会根据项目的大小而不同，请耐心等待即可，另外，部署成功之后会返回一个 key 值，此 key 值将用于关联Git。
关联 Git 实现自动部署
1、配置 webhook 相关钩子链接，打开 gitea 找到需要部署的项目仓库 -> Settings -> Webhooks -> Add webhook；
2、填入相关配置信息
3、点击 Add Webhook 配置成功
关联 github
1、配置 webhook 相关钩子链接，打开 github 找到需要部署的项目仓库 -> Settings -> Webhooks -> Add webhook；
2、填入相关配置信息
3、点击 Add Webhook 配置成功