浅析前端自动部署工具deploy-cli-service和vscode使用sftp自动部署插件

一、前端自动部署工具deploy-cli-service

1、先安装deploy-cli-service依赖

// 全局安装 deploy-cli-service
npm install deploy-cli-service -g

// 本地安装 deploy-cli-service
npm install deploy-cli-service --save-dev

2、查看版本，表示安装成功

deploy-cli-service - v

3、项目中配置：<package.json>中加上

"deployDev": "deploy-cli-service deploy --mode dev"

4、根目录下新建一个<deploy.config.js>文件：

module.exports = {
  projectName: 'YourProjectName',
  privateKey: '',
  passphrase: '',
  cluster: [],
  dev: {
    name: '开发环境',
    script: 'npm run build',
    host: '192.168.0.1',
    port: 22,
    username: 'userName',
    password: '12345678',
    distPath: 'dist',
    webDir: '/wwwroot/YourProject/www',
    bakDir: '/wwwroot/YourProject/_bak',
    isRemoveRemoteFile: true,
    isRemoveLocalFile: true
  }
}

5、具体内容见文档：https://github.com/fuchengwei/deploy-cli-service

二、vscode使用sftp

1、应用场景

　　如果你是一个开发脚本语言的程序员，比如HTML，JS，NodeJS，Python，PHP，Ruby，部署服务器是Linux平台，而项目中的文件，需要时常更新到服务器上才能测试的话，那么这是一个非常优秀的插件。会很大的提高开发的效率

2、安装 sftp插件

　　插件名字就叫SFTP，作者是liximomo，五星插件，下载次数超三万次，只有上传和下载功能。请在VS Code中的应用扩展商店搜索SFTP插件。

3、配置和使用

　　添加配置文件：按 F1 或 ctrl+shift+p 输入 SFTP:Config 会生成一个’.vscode/sftp.json’

{
    "name": "Test", 
    "host": "*.*.*.*",
    "protocol": "sftp",
    "port": 22,
    "username": "root",
    "password": "xxxx",
    "remotePath": "/home/xx/web/webapp",
    "uploadOnSave": true,
    "ignore": [
        "**/.idea/**",
        "**/.vscode/**",
        "**/.git/**",
        "**/.DS_Store"
    ],
    "watcher": {
        "files": "*",
        "autoUpload": false,
        "autoDelete": false
    }
}

　　remotePath：工作站上与本地工程同步的文件夹路径，需要和本地工程文件根目录同名，且在使用sftp上传文件之前要手动在工作站上使用mkdir生成这个根目录，根目录下的其他子目录会自动对应生成。

name： 你为这个sftp的连接起一个命名
host：目标主机IP地址，需自己查看并填写（先确保远端开启了sftp服务）
protocol：传输协议，sftp，不需要改动
port：传输端口，默认22，不需要改动
username：登录的用户名，需自己确认
password：若不想每次登录输入密码，可以增加此字段，硬编码进去
privateKeyPath：本地私钥，与password选用一个就好
remotePath：远端同步的路径
uploadOnSave：当你按下 ctrl + s 时，自动同步代码到远端服务器
ignore：不需要同步的目录or文件

　　uploadOnSave：本地更新文件保存会自动同步到远程文件（不会同步重命名文件和删除文件） 比较常用！！！
　　ignore：忽略的文件（匹配的文件不会同步）
　　watcher：监听器（可以重命名文件和删除文件）

autoUpload：文件变更会自动同步（修改和重命名）
autoDelete：文件删除会自动同步
不建议开启autoUpload和autoDelete操作，避免不小心把临时改动update到服务器上，就不好了。

　　设置完后就可以同步代码了，首先先同步一次，在vscode工程目录下右键选择 syncLocal->Remote 即可同步

　　同时，还可以用 CTRL + SHIFT + P 调出命令窗口，选择同步