How to upload Vue project to server automatically after packaging


Write at the beginning

Let me talk about why I want to write this first. Because I was not able to write the 5.0 System before, after modifying the bug, the front end will passnpm run buildAfter packaging, the file is generated, and then uploaded to the server through FTP tool. In the whole process, I need to manually copy it to the server. If I package several times a day, I have to manually copy it several times, which is very cumbersome

Front end deployment project

Front end deployment

  1. adoptnpm run buildTo build the front-end static resource file
  2. Just upload the built resource file, and then upload it to the specified directory of the server
  3. Configure related nginx or other related services to access resource files

Server deployment

  1. Upload front end project file
  2. To build a server front-end environment, it is generally necessary to performnpm i, install build dependencies
  3. implementpackage.jsonInscriptsConfigure packaging related commands in
  4. Then the packaged file is placed in the specified directory
  5. Configure related nginx or other related services to access resource files

Front end deployment vs server deployment

  1. The server deployment will go through thenpm i, install a series of dependent packages. These dependent packages are likely to have bugs due to the inconsistency between the packaging environment on the server and the local packaging environment. The development machine of the front-end deployment itself has installed all the environments. In fact, the front-end deployment is a more efficient choice for publishing, but I don’t recommend it, In this way, the source file (of course, the source file is also on git or SVN) is on the local developer’s computer, and some companies have special packaging server deployment
  2. For front-end deployment, back-end Deployers do not need to pay attention to some front-end build commands, environment variables and other issues

How to operate

5.0 bid opening system is not available

Create connection server file

Create in rootupload.server.jsfile

//Server configuration information
const server = {
    Host: 'xxx. XXX. XX. XX' // server IP
    Port: '22' // the default port is 22
    User name: 'xxxxx' // user name
    Password: 'xxxxx' // password
    Pathnmae: 'bidopen5' // upload to server location
    Locapath: '. / test /' // location of local packing file

//Introducing SCP2
const client = require('scp2');
const ora = require('ora');
Const spinner = ora ('publishing to server... ');

const Client = require('ssh2').Client; //  Create shell script
const conn = new Client();

Console.log ('connecting ');
conn.on('ready', function () {
    Console.log ('connected ')
        Console.log ('connection closed ');
        return false;
    //Here I splice the location of the server resource directory, and delete the files in this directory through RM - RF
    conn.exec('rm -rf /xxxx/' + server.pathNmae + '/*', function (err, stream) {
        Console.log ('delete file ');
        stream.on('close', function (code, signal) {
            Console.log ('Start upload ')
            client.scp(server.locaPath, {
                "port": server.port,
                "username": server.username,
                "password": server.password, 
                "path": '/xxxx/'+ server.pathNmae
            }, err => {
                if (!err) {
                    Console.log ('project release completed ');
                } else {
                    console.log("err", err)
                Conn.end() // end command
    port: server.port,
    username: server.username,
    password: server.password
    //Privatekey: '// log in with private key. At present, the test server does not need to use private key
const client = require('scp2');

scp2Is a command line tool, can connect to the server, can quickly copy, download, upload files

SCP2 specific API

const Client = require('ssh2').Client;

ssh2Connection service, can execute some related commands and so on, actually usessh2Can also complete the file upload, download and so on, do not usescp2

SSH2 specific API parameter GitHub

Configure startup items

Starting in package. JSON

Here I take the test environment as an example

"scripts": {
    "Test": "Vue cli service build -- mode test" // build test package
    "Upload": "node upload. Server. JS" // upload server files
    "Publish": "NPM run test & & NPM run upload" // issue the command (execute the above two commands)

Execute on the command linenpm run publishThe effect is as follows
The first choice is to executevue-cli-service build --mode testcommand

How to upload Vue project to server automatically after packaging

Then, after the execution, it was executednode upload.server.js

How to upload Vue project to server automatically after packaging

View the server file is also updated

How to upload Vue project to server automatically after packaging

Executing node script through webpack

If your project is based onvue-cliBuild the project in vue.config.jsconfigureWebpackIn the module

         const plugins = [];
                    //After compiling
                    compiler.hooks.done.tap('DonePlugin', compilation => {
                        Console.log ('compile complete ')
                        //By configuring package. JSON, execute the specified node. JS script
                        exec('npm run upload', {stdio: 'inherit'});
    return { plugins }

compiler.hooks.done.tapIt’s an API provided by webpack,DonePluginIt’s an instruction to complete the build,Detailed webpack build commandAnd then execute the node script

Execute the file directly through the node

There are two steps in the process of direct execution, one is to get the static resource file compiled by the front end, and the other is to call the upload script

npm run test
node upload.server.js

actuallypackage.jsonIs to execute the specified node script, but the collation is more standardized

Server deployment

have access toJenkinsFor reference,Practical notes: Jenkins creates powerful front end automated workflow, visual management, recommended


Server connection configuration should be placed in.env.xxxEnvironment files, so that you can automatically upload different environment server files for different projects
The above front-end deployment just adapts to the current front-end packaging situation of the company