Vue automatically deploys projects to the server

Time:2020-11-3

Desired features

  • After the front-end package, automatically upload the folder to the server
  • The above functions can also be completed without submitting code

After a variety of Baidu Google, there are finally two options to choose

  • The first is to write a shell and upload the folder through LFTP. However, there will be a permission problem, which needs to be solved by changing the nginx configuration
  • The second one is to use node, which is recommended by individuals
  • The third is Jenkins, but I don’t want to submit the code. If I’m not satisfied, I give up

Automatically transfer folders to the server using the shell

thinking

  • 1. Install LFTP
  • 2. Write shell script to automatically transfer the folder 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 guru does not agree to change the ngxin configuration, give up.)

FTP installation and common commands

Installing VFTP on Linux

rpm -qa | grep initscripts

Check whether FTP installation is successful

which vsftpd

View FTP server status

service vsftpd status

Start FTP server

service vsftpd start

Restart FTP server

service vsftpd restart

Check if the service is started

Netstat – an | grep 21 / / the default port is 21

tcp 0 0 0.0.0.0:21 0.0.0.0:* LISTEN

If you see the above information, it proves that the FTP service has been started.

If you need to enable the FTP permission of root user, you need to modify the following two files

  • Comment out root in VI / etc / vsftpd / ftpusers
  • vi /etc/vsftpd/user_ Also comment out root in the list
  • Then restart the FTP service, service vsftpd restart

Ftpusers and users_ Detailed explanation of list file

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

  • Vue automatically deploys projects to the server

Installing LFTP

Why install LFTP

FTP can’t transfer folder, LFTP can, LFTP can use account password login

Installation procedure

window

Choco installation

choco install lftp

Vue automatically deploys projects to the server

Choco is not installed. Please click the link below and eat it yourself

https://chocolatey.org/install

Vue automatically deploys projects to the server

linux

The whole process of FTP installation and use under Linux

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

  • The first step
  • Vue automatically deploys projects to the server
  • Step two

    Vue automatically deploys projects to the server

  • Step three

    Vue automatically deploys projects to the server

Solutions to the lack of service command in Linux

  • https://blog.csdn.net/imliuqun123/article/details/83340763

    Vue automatically deploys projects to the server

Introduction to common commands of LFTP

  • https://man.linuxde.net/lftp

    • Vue automatically deploys projects to the server

Shell tutorial

https://www.runoob.com/linux/linux-shell.html

Why/ qq.sh There seems to be a pit in this way

  • Vue automatically deploys projects to the server

Shell uses FTP to transfer files

Please make sure that FTP service has been started, and then do the following operation

Create a new one qq.sh File, roughly is to use FTP link remote server, and transfer a zip file
Vue automatically deploys projects to the server
Shell source code:

#!/bin/sh
#If there is any abnormality, do not report it directly
set -e
#Packing
tar -czvf social.zip social
#Remote server IP
ip="192.168.1.99"
#The directory deployed to the remote server changes itself
remote="/usr/abcd/"
#The account number can be changed by itself
userName="admin"
#Password self change
password="123456"
#Transmission mode
ftpFransferType="binary"
#File name of the transfer
ftpPutFileName="social.zip"
#LCD should use relative path
#Format: LCD [directory]
#Description: Directory specifies the directory on the local computer to change. If no directory is specified, the current working directory on the local computer is displayed
#Batch upload documents from local to FTP
Echo "- start uploading ${ftpputtfilename} file
ftp -v -n<<EOF
open $ip
user $userName $password
$ftpFransferType
cd $remote
pwd
prompt
put $ftpPutFileName
bye
EOF
Echo "---- upload of ${ftpputtfilename} file succeeded

The shell uses LFTP to transfer folders

Drop the folder directly to the server

Vue automatically deploys projects to the server

Shell source code:

#!/bin/bash
#--------------------------------------------
#Automatically transfer files to different environments
# author:qinyuanqi
#--------------------------------------------
#Don't go down in case of abnormality
set -e
#SFTP configuration information
# IP
IP="192.168.1.199"
#Port
PORT=22
#User name
USER="user"
#Password
PASSWORD="password"
#Directory of the file to be uploaded
CLIENTDIR='./social'
#Upload to the directory of the target server
remote="/usr/local/nginx/html/h5/"
#echo "$IP---$USER--$PASSWORD"
if [ -d $CLIENTDIR ]
then
Echo "$clientdir is a folder"
elif [ -f $CLIENTDIR ]
then
Echo "$clientdir is a file"
else
Echo "$clientdir does not exist"
fi
if [ "$1"x == "test"x ]
then
Echo "- ready to transfer $clientdir file to -- Test Environment"
#In this way, when the data is transmitted to the server and the project is accessed, nginx will report 403. The test guru says that the nginx configuration cannot be changed. It's difficult to do it. I don't know how to solve it
IP="192.168.1.166"
User = user of test environment
Password = password for test environment
else
Echo "- ready to transfer $clientdir file to development environment"
fi
Echo "- start uploading ${clientdir} file ---"
lftp -u $USER,$PASSWORD $IP <<EOF
cd ${remote}
mirror -R $CLIENTDIR
by
EOF
Echo "- successfully uploaded ${clientdir} file ---"

After LFTP transfers the file successfully, the access web program will report a permission error of ngxin 403. (if the test guru does not agree to change the ngxin configuration, give up.)

Solve ngxin 403:

  • https://segmentfault.com/a/1190000007117542
  • 1. Change the configuration of ngxin,

    Vue automatically deploys projects to the server

  • 2. Restart ngxin

Using node

Ideas:

  • Using node SSH to help us implement automatic deployment

Installation dependency

package.json file

{
 "devDependencies": {
   "chalk": "^4.0.0",
   "compressing": "^1.5.1",
   "node-ssh": "^10.0.2"
  }
}
  • NPM install node SSH — save dev transfer folder
  • NPM install compressing — save dev compressed file
  • NPM install chat – save dev beautify log

Case analysis

Implementation function
  • Development environment and test environment automatically package and transfer files
  • Automatic generation of compressed package in production environment
Define call mode

After the Vue package is completed, delete the soucemap file, and then use node to automatically publish

  • Vue automatically deploys projects to the server
  • Define configuration
    Vue automatically deploys projects to the server
  • Configure different environments and operate differently

    Vue automatically deploys projects to the server

  • Uploading a folder using nodesh

    Vue automatically deploys projects to the server

JS source code:
//The development and testing are automatically packaged to an environment, and the production is automatically zipped and directly thrown to the leader online
//Command line color
const chalk = require('chalk')
const log = console.log
const path = require('path')
//The connection is transferred to the server plug-in
const NodeSSH = require('node-ssh')
const ssh = new NodeSSH()
//Get the parameters of the node execution file for packaging and differentiation
const argv = process.argv.slice(2)
//Introduce compressed file plug-in
const compressing = require('compressing')
//Packaged directory name
const buildDirName = 'social'
//Path of the packaged file
const distDir = './' + buildDirName
//Packed compressed name
const distZipPath = './' + buildDirName + '.zip'
//Server configuration
let remoteConfig = {}
// node  deploy.js  QQ takes QQ to make judgment, judge the environment, and then do different processing
switch (argv[0]) {
//Some configuration of development environment
case 'dev':
log( chalk.blue ('--- start packaging to development environment ---')
remoteConfig = {
Host: 'development server IP',
//Remote port, the default is 21
// port:21
Username: 'development server user name',
Password: 'development server password',
Remotepath: 'address of server deployment',
}
upload()
break
//Some configuration of test environment
case 'test':
log( chalk.blue ('--- start packaging to test environment ---')
remoteConfig = {
Host: 'test server IP',
//Remote port, the default is 21
// port:21
Username: 'test server user name',
Password: 'test server password',
Remotepath: 'test server deployment address',
}
upload()
break
//The production environment will automatically compress the files and do nothing else
case 'production':
log( chalk.blue ('--- production environment -- start compressing files ---')
compressing.zip
.compressDir(distDir, distZipPath)
.then(() => {
log( chalk.green ('compress ${distzippath} succeeded '))
})
.catch(() => {
log( chalk.red (` failed to compress ${distzippath} '))
})
break
default:
log( chalk.keyword ('Orange ') ('deploy has gone without processing'))
break
}
/**
*Upload file to server
*Node 7.6 and above support async syntax
*/
async function upload() {
const failed = []
const successful = []
try {
//Connecting to the server
await ssh.connect({
host: remoteConfig.host,
username: remoteConfig.username,
password: remoteConfig.password,
})
//Delete directory and upload again
await ssh.execCommand('rm -rf ../' + buildDirName, { cwd: remoteConfig.remotePath })
//Start to upload files to the remote specified directory
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 failed, the error message is as follows = = > ', error))
return false
}
log( chalk.green ('transfer complete '))
log( chalk.green ('number of files transferred successfully = = >', successful.length )
log( chalk.green ('number of transfer failed files = = >', failed.length )
//Exit
process.exit()
}

Node Auto Packaging legacy problems

  • Multiple projects, each project should be introduced deploy.js File. I feel a little uncomfortable. I haven’t thought of any good method for the moment. Ladies and gentlemen, what’s a good plan? Take me~

Conclusion

  • If there are any mistakes in this article, please correct them. Thank you very much
  • The old fellow who feels useful, double click, and walk with a little red heart.
  • Welcome to water, come on, hurt each other_ Haha

reference material

  • FTP installation related configuration
  • Explanation of FTP command
  • Explanation of FTP command
  • Ftpusers and users_ Detailed explanation of list file
  • LFTP common commands
  • Vue auto publish
  • Vue auto publish