Vue automatically deploys projects to the server

Posted May 25, 20208 min read

Desired function

  • Automatically upload folders to the server after packaging the front end
  • The above functions can be completed without submitting the code

After all kinds of Baidu Google, there are finally two options

  • The first is to write a shell and upload the folder through lftp, but there will be a permission problem, you need to change the nginx configuration to solve it
  • The second is to use node to achieve, personally recommend using this
  • The third is Jenkins, but I do n t want to submit the code, I m not satisfied, give up

Use the shell to automatically transfer folders to the server


  • 1 . Install lftp
  • 2 . Write a shell script to automatically transfer folders to the server
  • 3 . After lftp transfers the file successfully, it will access the directory and report a permission error of ngxin 403,(If the test leader does not agree to change the ngxin configuration, then give up)

Introduction to ftp installation and common commands

linux install vftp

rpm -qa | grep initscripts

Check if the ftp installation is successful

which vsftpd

View ftp server status

service vsftpd status

Start the ftp server

service vsftpd start

Restart the ftp server

service vsftpd restart

Check if the service is started

netstat -an | grep 21 //The default port is 21

tcp 0 0* LISTEN

If you see the above information, it proves that the ftp service has been turned on.

If you need to enable the root user's ftp permission to modify the following two files

  • comment out root in vi/etc/vsftpd/ftpusers
  • root is also commented out in vi/etc/vsftpd/user \ _list
  • Then restart the ftp service service vsftpd restart

Detailed explanation of ftpusers and user \ _list files

* image

Install lftp

Why install lftp

ftp cannot transfer folders, lftp can, lftp can log in with account password

installation steps


choco installation

choco install lftp


Choco is not installed, please click the link below and eat it yourself



The process of installing FTP and the overall process of using it under Linux

  • The first step

  • image

  • Second step


  • third step


[Linux]Solution for lack of service command

Introduction to lftp common commands

Shell Tutorial

Why do you want to execute ./ like this, there seems to be a pit

* image.png

Shell uses ftp to transfer files

Please make sure the ftp service is enabled, then do the following operations

Create a new file, which is basically to connect a remote server with ftp and transfer a zip file
Shell source code:

# If an exception occurs, the error will not be reported directly
set -e
# Bale
tar -czvf social
# Remote server ip
ip = ""
# Deploy to the directory of the remote server Replace yourself
remote = "/usr/abcd /"
# Account self-replacement
userName = "admin"
# Password change yourself
password = "123456"
# transfer method
ftpFransferType = "binary"
# Transferred file name
ftpPutFileName = ""
#lcd should use relative paths
#Format:lcd [directory]
#Description:directory specifies the directory on the local computer to be changed. If no directory is specified, the current working directory on the local computer will be displayed
# Batch upload documents from local to FTP
echo "-------------------------------------- Start uploading ${ftpPutFileName} file --- ----------------------------------- "
ftp -v -n << EOF
open $ip
user $userName $password
cd $remote
put $ftpPutFileName
echo "-------------------------------------- Upload ${ftpPutFileName} file successfully --- ----------------------------------- "

Shell uses lftp to transfer folders

Throw the folder directly to the server

Shell source code:

# --------------------------------------------
# Automatically transfer files to different environments
# author:qinyuanqi
# --------------------------------------------
#Anomaly does not go down
set -e
# SFTP configuration information
# IP
IP = ""
# Port
PORT = 22
# username
USER = "user"
# Password
PASSWORD = "password"
# The directory of the file to be uploaded
CLIENTDIR = './Social'
# Upload to the target server's directory
remote = "/usr/local/nginx/html/h5 /"
#echo "$IP --- $USER-$PASSWORD"
if [-d $CLIENTDIR]
echo "$CLIENTDIR is a folder"
elif [-f $CLIENTDIR]
echo "$CLIENTDIR is a file"
echo "$CLIENTDIR does not exist"
if ["$1" x == "test" x]
echo "---- Prepare to transfer $CLIENTDIR file to ---- test environment"
# This is transmitted to the server, accessing the project, nginx will report 403, the test guy said that the nginx configuration cannot be changed, it is difficult, I do n t know how to solve it
IP = ""
USER = "User of test environment"
PASSWORD = "Password of test environment"
echo "---- Prepare to transfer $CLIENTDIR file to ---- development environment"
echo "---- Start uploading ${CLIENTDIR} file ----"
lftp -u $USER, $PASSWORD $IP << EOF
cd ${remote}
mirror -R $CLIENTDIR
echo "---- Upload ${CLIENTDIR} file successfully ----"

** After successful file transfer by lftp, access to the web program will report a permission error of ngxin 403,(If the test leader does not agree to change the ngxin configuration, then give up)

Solve ngxin 403:

Using node


  • Use node-ssh to help us achieve automatic deployment

Installation dependencies

  • npm install node-ssh --save-dev transfer folder
  • npm install compressing --save-dev compressed file
  • npm install chalk -save-dev beautify log

Case Analysis

Implementing functions
  • Development environment and test environment automatically package and transfer files
  • Automatically generate compressed packages in production environment
Define the calling method

Call method, after the vue is packaged, delete the soucemap file, and then use node to automatically publish


  • Define configuration

  • Configure different environments and different operations

  • Use nodessh to upload folders

js source code:
//The development and testing are automatically packaged into an environment, and the production automatically zips the package and directly throws it to the leader to go online
//Command line color
const chalk = require('chalk')
const log = console.log
const path = require('path')
//The connection is transferred to the server plugin
const NodeSSH = require('node-ssh')
const ssh = new NodeSSH()
//Get the parameters of the node execution file, and differentiate the packaging
const argv = process.argv.slice(2)
//Introduce compressed file plugin
const compressing = require('compressing')
//The name of the packaged directory
const buildDirName = 'social'
//The path of the file after packaging
const distDir = './' + buildDirName
//The compressed name after packaging
const distZipPath = './' + buildDirName + '.zip'
//server configuration
let remoteConfig = {}
//node deploy.js qq fetches qq for judgment, judges which environment, and then does different processing
switch(argv [0]) {
//Some configuration of the development environment
case 'dev':
log('---- Start packaging to the development environment ----'))
remoteConfig = {
host:'Development server ip',
//Remote port, default is 21
username:'Development server username',
password:'Development server password',
remotePath:'Address of server deployment',
//Some configuration of the test environment
case 'test':
log('---- Start packaging to test environment ----'))
remoteConfig = {
host:'Test server ip',
//Remote port, default is 21
username:'Test server username',
password:'Test server password',
remotePath:'Test server deployment address',
//Automatically compress files in the production environment, no other processing
case 'production':
log('---- production environment ---- start compressing files ----'))
.compressDir(distDir, distZipPath)
.then(() => {
log(`Zip ${distZipPath} success`))
.catch(() => {
log(`Compression ${distZipPath} failed`))
log(chalk.keyword('orange')('deploy gone without processing way'))

* Upload files to the server
* Node 7.6 and above all support async syntax
* /
async function upload() {
const failed = []
const successful = []
try {
//connect to the server
await ssh.connect({,
//Delete the directory and upload
await ssh.execCommand('rm -rf ../' + buildDirName, {cwd:remoteConfig.remotePath})
//Start uploading files to the remote specified directory
await ssh.putDirectory(distDir, remoteConfig.remotePath, {
validate:function(itemPath) {
const baseName = path.basename(itemPath)
baseName.substr(0, 1)! == '.' && baseName! == 'node_modules' //do not allow dot files
) //do not allow node_modules
tick:function(localPath, remotePath, error) {
if(error) {
} else {
} catch(error) {
log('upload upload failed, the error message is as follows ==>', error))
return false
log('Transfer completed'))
log('Number of files successfully transferred ==>', successful.length))
log('Number of files failed to transfer ==>', failed.length))
//drop out

Node automatic packaging leftovers

  • Multiple projects, each project must introduce deploy.js file, I feel a bit uncomfortable, I did not think of a good way for the time being. Dear viewers, what are the good solutions, take me to chant ~


  • Any errors in this article, please correct me, thank you very much
  • Old iron that feels useful, double click, little red heart walks a wave
  • Welcome to irrigate, come and hurt each other ha( \ _) o haha