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.xz Nodejs 安裝成功後配置一下環境變量，即可。
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 配置成功