想要的功能

前端打包之后自動上傳文件夾到服務器

在不提交代碼的前提下，也可以完成上述功能

經過各種百度谷歌，最后有兩種方案可以選擇

第一種是寫一個shell，通過lftp上傳文件夾，但是會有個權限的問題，需要更改nginx配置才可以解決

第二種就是使用node來實現，個人推薦使用這個

第三種就是jenkins, 但是我又不想提交代碼，不滿足，放棄

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

思路

1. 安裝lftp

2. 編寫shell腳本自動傳輸文件夾到服務器

3. lftp 傳輸文件成功之后會訪問目錄會報一個ngxin 403的權限錯誤，(如果說測試大佬不同意改ngxin配置的話， 那就放棄把)

ftp安裝和常用命令介紹

linux安裝vftp

rpm -qa | grep initscripts

查看ftp安裝是否成功

which vsftpd

查看ftp 服務器狀態

service vsftpd status

啟動ftp服務器

service vsftpd start

重啟ftp服務器

service vsftpd restart

查看服務有沒有啟動

netstat -an | grep 21 //默認端口為21

tcp 0 0 0.0.0.0:21 0.0.0.0:* LISTEN

如果看到以上信息，證明ftp服務已經開啟。

如果需要開啟root用戶的ftp權限要修改以下兩個文件

vi /etc/vsftpd/ftpusers 中注釋掉root

vi /etc/vsftpd/user_list 中也注釋掉root

然后重新啟動ftp服務 service vsftpd restart

ftpusers和user_list文件詳解

安裝lftp

為啥要安裝lftp

ftp不可以傳文件夾，lftp可以，lftp可以使用帳號密碼登錄

安裝步驟

window

choco 安裝

choco install lftp

沒有安裝choco 請點下方鏈接，自己食用

linux

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

第一步

第二步

第三步

【Linux】缺少service命令的解決辦法

lftp 常用命令介紹

Shell 教程

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

shell使用ftp傳輸文件

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

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

shell源碼：

#!/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<

open $ip

user $userName $password

$ftpFransferType

cd $remote

pwd

prompt

put $ftpPutFileName

bye

EOF

echo "-------------------------------------- 上傳 ${ftpPutFileName} 文件成功 --------------------------------------"

shell使用lftp傳輸文件夾

直接把文件夾丟到服務器

shell源碼：

#!/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 <

cd ${remote}

mirror -R $CLIENTDIR

by

EOF

echo "---- 上傳 ${CLIENTDIR} 文件成功 ----"

lftp 傳輸文件成功之后，訪問web程序會報一個ngxin 403的權限錯誤，(如果說測試大佬不同意改ngxin配置的話， 那就放棄把)

解決ngxin 403：

使用node

思路：

使用node-ssh 來幫助我們實現自動部署

安裝依賴

package.json文件

{

"devDependencies": {

"chalk": "^4.0.0",

"compressing": "^1.5.1",

"node-ssh": "^10.0.2"

}

}

npm install node-ssh –save-dev 傳輸文件夾

npm install compressing –save-dev 壓縮文件

npm install chalk -save-dev 美化log

實例分析

實現功能

開發環境和測試環境自動打包并傳輸文件

生產環境自動生成壓縮包

定義調用方式

調用方式 ，vue打包完成之后，刪除soucemap文件，然后使用node 自動發布

定義配置

配置不同環境不同操作

使用nodessh上傳文件夾

js源碼：

// 開發和測試自動打包到對一個環境，生產自動打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()

}

node 自動打包遺留問題

多個項目，每個項目都要引入deploy.js文件，感覺有點難受，暫時沒想到啥好方法。各位觀眾老爺，有啥好方案，帶帶我唄~

結束語

本文如有錯誤，歡迎指正，非常感謝

覺得有用的老鐵，點個雙擊，小紅心走一波

歡迎灌水，來呀，互相傷害哈 o(∩_∩)o 哈哈

參考資料

總結

以上是生活随笔為你收集整理的vue项目前端服务器,【前端技术】vue自动部署项目到服务器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。