前端使用scp命令部署到服务器
由于没有弄自动部署环境,每次打包后,不是要把代码发给后端就是发给运维,比较麻烦。所以想到了命令部署。弄起来也很简单,使用nodejs 的scp即可
以 vue-cli创建的vue2项目为例
安装scp
npm install scp2 --save-dev
配置命令
然后在 package.json 里面的scripts选项配置命令 scp
"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "scp": "npm run build && node scp2.js" },
创建执行文件scp2.js
在项目根目录下创建scp2.js
代码如下
const scp = require('scp2'); const ora = require('ora'); const chalk = require('chalk'); //设置命令颜色的 const spinner = ora(chalk.blue('正在部署到服务器...')); //显示加载 spinner.start(); scp.scp('./dist/',{ host:'127.0.0.1', // 服务器的地址 port: 22, // 服务器端口, 一般为 22 username: 'root', // 用户名 password: '123456, // 密码 path: '/test/ui/dist/' //服务器存放文件路径 }, err =>{ if (!err) { console.log(chalk.green(`部署完成!`)) } else { console.log(chalk.red(部署失败!`)) } spinner.stop(); })
ok,搞定。
多服务器部署优化
如果想一次部署多个服务器呢?其实也简单,但前提是不需要改api请求域名及环境配置。那就for循环调用好了。示例:
const scp = require('scp2'); const ora = require('ora'); const chalk = require('chalk'); const defaultPort='22' const defaultUsername='root' const defaultPassword='123456' const defaultPath='/test/ui/dist/' const delopyIps=[{host:'127.0.0.1',isEnd:false},{host:'127.0.0.2',isEnd:false}] const spinner = ora(chalk.blue('正在部署到服务器...')); spinner.start(); for(let i=0;i<delopyIps.length;i++){ let {host,port,username,password,path}=delopyIps[i] scp.scp('./dist/',{ host, // 服务器的IP地址 port: port || defaultPort, // 服务器端口, 一般为 22 username: username || defaultUsername, // 用户名 password: password || defaultPassword, // 密码 path: path || defaultPath }, err =>{ delopyIps[i].isEnd=true if (!err) { console.log(chalk.green(`${host}部署完成!`)) } else { console.log(chalk.red(`${host}部署失败!`)) } let hasNotEnd=delopyIps.find(item=>!item.isEnd) if(!hasNotEnd){ spinner.stop(); for(let i=0;i<delopyIps.length;i++){ delopyIps[i].isEnd=false } } }) }
使用 npm run scp
分类:
js
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)