vue自動部署項目到服務器

時間 2020-05-26

標籤 vue 自動部署項目服務器简体版

原文原文鏈接

想要的功能

前端打包也能夠自動上傳文件夾到服務器
在不提交代碼的前提下，也能夠完成上述功能

通過各類百度谷歌，最後有兩種方案能夠選擇

第一種是寫一個shell，經過lftp上傳文件夾，可是會有個權限的問題，須要更改nginx配置才能夠解決
第二種就是使用node來實現，我的推薦使用這個
第三種就是jenkins, 可是我又不想提交代碼，不知足，放棄

使用shell自動傳輸文件夾到服務器

思路

1. 安裝lftp
2. 編寫shell腳本自動傳輸文件夾到服務器
3. lftp 傳輸文件成功以後會訪問目錄會報一個ngxin 403的權限錯誤，（若是說測試大佬不一樣意改ngxin配置的話，那就放棄把）

ftp安裝和經常使用命令介紹

linux安裝vftp

rpm -qa | grep initscriptshtml

查看ftp安裝是否成功

which vsftpd前端

查看ftp 服務器狀態

service vsftpd statusvue

啓動ftp服務器

service vsftpd startnode

重啓ftp服務器

service vsftpd restartlinux

查看服務有沒有啓動

netstat -an | grep 21 //默認端口爲21nginx

tcp 0 0 0.0.0.0:21 0.0.0.0:* LISTENshell

若是看到以上信息，證實ftp服務已經開啓。npm

若是須要開啓root用戶的ftp權限要修改如下兩個文件

vi /etc/vsftpd/ftpusers 中註釋掉root
vi /etc/vsftpd/user_list 中也註釋掉root
而後從新啓動ftp服務 service vsftpd restart

ftpusers和user_list文件詳解

https://blog.csdn.net/bluishglc/article/details/42273197segmentfault

安裝lftp

爲啥要安裝lftp

ftp不能夠傳文件夾，lftp能夠，lftp可使用賬號密碼登陸bash

安裝步驟

window

choco 安裝

choco install lftp

沒有安裝choco 請點下方連接，本身食用

https://chocolatey.org/install

linux

linux下安裝FTP的過程和使用的總體過程

https://blog.csdn.net/lizexing1/article/details/79308961

第一步

第二步
第三步

爲啥要 ./qq.sh 這樣執行，好像有坑

shell使用ftp傳輸文件

請確保ftp服務已經開啓，再作下面的操做

新建一個qq.sh文件，大體就是是用ftp連接遠程服務器，並傳輸一個zip文件

#!/bin/sh
# 出現異常不往直接報錯
set -e
# 打包
tar -czvf social.zip social
# 遠端服務器ip
ip="192.168.1.99"
# 部署到遠程服務器的目錄  自行更換
remote="/usr/abcd/"
# 賬號 自行更換
userName="admin"
# 密碼 自行更換
password="123456"
# 傳輸方式
ftpFransferType="binary"
# 傳輸的文件名
ftpPutFileName="social.zip"
#lcd 應該使用相對路徑
#格式：lcd [directory]
#說明：directory 指定要更改的本地計算機上的目錄。若是沒有指定directory，將顯示本地計算機中當前的工做目錄
#從本地向FTP批量上傳文檔
echo "-------------------------------------- 開始上傳 ${ftpPutFileName} 文件--------------------------------------"
ftp -v -n<<EOF
open $ip
user $userName $password
$ftpFransferType
cd $remote
pwd
prompt
put $ftpPutFileName
bye
EOF
echo "-------------------------------------- 上傳 ${ftpPutFileName} 文件成功 --------------------------------------"

shell使用lftp傳輸文件夾

直接把文件夾丟到服務器

#!/bin/bash
#--------------------------------------------
# 自動傳輸文件到不一樣環境
# author：qinyuanqi
#--------------------------------------------
#出現異常不往下面走
set -e
# SFTP配置信息
# IP
IP="192.168.1.199"
# 端口
PORT=22
# 用戶名
USER="user"
# 密碼
PASSWORD="password"
# 須要上傳的文件所在目錄
CLIENTDIR='./social'
# 上傳到目標服務器的目錄
remote="/usr/local/nginx/html/h5/"
#echo "$IP---$USER--$PASSWORD"
if [ -d $CLIENTDIR ]
then
echo "$CLIENTDIR  是一個文件夾"
elif [ -f $CLIENTDIR ]
then
echo "$CLIENTDIR  是一個文件"
else
echo "$CLIENTDIR 不存在"
fi
if [ "$1"x == "test"x ]
then
echo  "---- 準備傳輸 $CLIENTDIR 文件到  ----測試環境"
# 這樣傳輸到服務器，訪問項目，nginx會報403，測試大佬說不能改nginx 配置，難搞哦，不知道怎麼解決了
IP="192.168.1.166"
USER="測試環境的用戶"
PASSWORD="測試環境的密碼"
else
echo  "---- 準備傳輸 $CLIENTDIR 文件到  ----開發環境"
fi
echo "---- 開始上傳 ${CLIENTDIR} 文件 ----"
lftp -u $USER,$PASSWORD $IP <<EOF
cd ${remote}
mirror -R $CLIENTDIR
by
EOF
echo "---- 上傳 ${CLIENTDIR} 文件成功 ----"

lftp 傳輸文件成功以後會訪問目錄會報一個ngxin 403的權限錯誤，（若是說測試大佬不一樣意改ngxin配置的話，那就放棄把）

解決辦法：

http://www.javashuo.com/article/p-pcqbklcj-bn.html
1. 改ngxin配置，
2. 重啓ngxin

使用node

安裝依賴

npm install node-ssh --save-dev 傳輸文件夾
npm install compressing --save-dev 壓縮文件
npm install chalk -save-dev 美化log

示例分析

調用方式，vue打包完成以後，刪除soucemap文件，而後使用node 自動發佈
定義配置
配置不一樣環境不一樣操做
使用nodessh上傳文件夾

源碼：

// 開發和測試自動打包到對一個環境，生產自動打zip包，直接丟給領導上線
//命令行顏色
const chalk = require('chalk')
const log = console.log
const path = require('path')
// 鏈接傳輸到服務器插件
const NodeSSH = require('node-ssh')
const ssh = new NodeSSH()
// 取到node執行文件的參數，進行打包區分
const argv = process.argv.slice(2)
// 引入壓縮文件插件
const compressing = require('compressing')
// 打包後的目錄名稱
const buildDirName = 'social'
// 打包後文件的路徑
const distDir = './' + buildDirName
// 打包後的壓縮名稱
const distZipPath = './' + buildDirName + '.zip'
// 服務器配置
let remoteConfig = {}
// node deploy.js qq  取到qq來作判斷，判斷是那個環境，而後作不一樣的處理
switch (argv[0]) {
// 開發環境的一些配置
case 'dev':
log(chalk.blue('----開始打包到開發環境----'))
remoteConfig = {
host: '開發服務器ip',
// 遠程端口，默認是21
// port:21
username: '開發服務器用戶名',
password: '開發服務器密碼',
remotePath: '服務器部署的地址',
}
upload()
break
// 測試環境的一些配置
case 'test':
log(chalk.blue('----開始打包到測試環境----'))
remoteConfig = {
host: '測試服務器ip',
// 遠程端口，默認是21
// port:21
username: '測試服務器用戶名',
password: '測試服務器密碼',
remotePath: '測試服務器部署地址',
}
upload()
break
// 生產環境就自動壓縮文件，不作別的處理
case 'production':
log(chalk.blue('----生產環境----開始壓縮文件----'))
compressing.zip
.compressDir(distDir, distZipPath)
.then(() => {
log(chalk.green(`壓縮 ${distZipPath} 成功`))
})
.catch(() => {
log(chalk.red(`壓縮 ${distZipPath} 失敗`))
})
break
default:
log(chalk.keyword('orange')('deploy走了沒有處理的方式'))
break
}
/**
*  上傳文件到服務器
*  node 7.6 以上都支持 async 語法
*/
async function upload() {
const failed = []
const successful = []
try {
// 鏈接服務器
await ssh.connect({
host: remoteConfig.host,
username: remoteConfig.username,
password: remoteConfig.password,
})
// 刪除目錄再上傳
await ssh.execCommand('rm -rf ../' + buildDirName, { cwd: remoteConfig.remotePath })
// 開始上傳文件到遠程指定目錄下
await ssh.putDirectory(distDir, remoteConfig.remotePath, {
recursive: true,
concurrency: 10,
validate: function(itemPath) {
const baseName = path.basename(itemPath)
console.log(baseName)
return (
baseName.substr(0, 1) !== '.' && baseName !== 'node_modules' // do not allow dot files
) // do not allow node_modules
},
tick: function(localPath, remotePath, error) {
if (error) {
failed.push(localPath)
} else {
successful.push(localPath)
}
},
})
} catch (error) {
log(chalk.red('upload 上傳失敗，錯誤信息以下==>', error))
return false
}
log(chalk.green('傳輸完成'))
log(chalk.green('傳輸成功文件數==>', successful.length))
log(chalk.green('傳輸失敗文件數==>', failed.length))
// 退出
process.exit()
}