preface

In the general deployment process of Vue projects, NPM run build package ->FTP upload to the server, but after each package, the new Dist folder needs to be manually overwritten by FTP software to the original corresponding server directory. This might seem like a bit of a hassle, but I’d like to do this with a single command, such as NPM run Push, so with automated deployment in mind, let me detail two ways to do it.

The first method: modify package.json

Execute the content through the package.json custom command, and then execute the NPM run directive. Here are a few problems need to pay attention to, SCP – r/dist/[email protected]: / WWW/below/targetFloder this command is used for file transfer in a Linux system commands, -r recursively, Namely the dist folder recursive 42.192.141.179 uploaded to the server/WWW/below/targetFloder directory, remember to put my server IP instead of your own. PS: the server should have the corresponding folder, otherwise you how to pass ah XD.

"scripts": {
    "dev": "npm run serve"."serve": "vue-cli-service serve"."build": "vue-cli-service build".// Perform packaging and upload to the specified directory on the server
    "buildToProduct": "NPM run build && SCP -r dist / * [email protected]: / WWW/below/targetFloder".// Upload the file to the specified directory on the server
    "push": "SCP -r dist / * [email protected]: / WWW/below/targetFloder"
  },
Copy the code

Let’s try it. Executenpm run buildToProduct, the results are shown as follows:At this point, the execution is completenpm run buildAfter uploading to the server, the user root’s password is prompted, so after I input the password, the file will start uploading, as shown in the picture:

How to solve the problem that you need to input your password every time

Step 1 (Generate an SSH Key)

Generate an SSH key: Use Git bash or powershell to run ssh-keygen to generate an SSH key. If the key already exists, it will ask whether to overwrite it. If it exists, type n.

Step 2 (Synchronize the SSH key to the remote server)

SSH - copy - id - I ~ /. SSH/id_rsa pub [email protected]Copy the code

After you enter the password, you do not need to enter the password again. ~/.ssh/authorized_keys ~/.ssh/authorized_keysSSH /id_rsa.pub file and append it to ~/.ssh/authorized_keys. The root user is used in the whole process, so there is no file operation permission problem. If the user who created the folder is not a remote login user, files may fail to be synchronized. In this case, you need to run the chmod command on the remote server to change the read and write permissions of the folder.

The second method: write the nodejs script

Also customize the NPM run directive in the package, and then write the Node execution script under your project root.

Step 1 (Define instructions)

Json to customize the NPM run directive

"scripts": {
    "dev": "npm run serve"."serve": "vue-cli-service serve"."build": "vue-cli-service build".// Upload the file to the specified directory on the server
    "upload": "npm run build && node upload.js"
  },
Copy the code

Step 2 (Adding a Node script)

Under the project root, add upload.js

const client = require('scp2');
const ora = require('ora');
const chalk = require('chalk');
const spinner = ora(chalk.green('Publishing to the test server... '));
spinner.start();

client.scp('./dist/', { // The location of the local package file
	"host": '* * *. * * *. * * *. * * *'./ / IP address
	"port": '22'.// Server port
	"username": '* * *'./ / user name
	"password": '* * *'./ / password
	"path": '/www/wwwroot/targetFolder' // Project path
}, err= > {
	spinner.stop();
	if(! err) {console.log(chalk.green("Deployed."))}else {
		console.log("err", err)
	}
})
Copy the code

Step 3 (Installing node dependency packages)

Since upload.js requires dependency packages scp2, ORA, and chalk, install dependency packages first.

npm i scp2 ora chalk -D
Copy the code

Step 4 (Test)

conclusion

In my humble opinion, automated deployment is the use of commands instead of manually uploading files, and the automated deployment in this article is the use of Linux SCP file transfer commands. However, I have another question, how to implement version rollback, after all, when bugs occur, rollback operation is relatively common. I wish there was someone big enough to help me out. I currently use git commit versions, and when I need to roll back, I switch the Git version and upload it to the server.

This paper reference links: mp.weixin.qq.com/s/qggBoEega… Blog.csdn.net/qq_36990263…