前端不求人系列 之 一条命令自动部署项目

以前部署前端项目，你是不是也这样：本地npm run build打完包，然后打开FTP工具，手动把dist文件夹里的文件一个个拖到服务器？要是遇到更新频繁的日子，光部署就能浪费半小时。但看完这篇文章你会发现，自动部署原来可以这么简单！

---

🤔 为什么需要自动部署？

手动部署的痛点：

1. 重复劳动：每次更新都要重复打包、上传操作
2. 容易出错：可能漏传文件或传错文件
3. 效率低下：传输过程中你只能干等着

而自动部署只需要一句命令：

npm run deploy

---

🛠 核心工具：ssh2-sftp-client

这是一个基于Node.js的SFTP客户端，让我们能用代码操作文件传输：

它能做什么？

• 📤 上传/下载文件或整个文件夹
• 📁 查看服务器文件列表
• 🗑 删除远程文件
• ✏️ 重命名文件

---

🚀 三步实现自动部署

第一步：安装插件

npm install ssh2-sftp-client --save-dev

第二步：创建部署脚本 deploy.js

const SftpClient = require('ssh2-sftp-client')

// 配置服务器信息
const config = {
  host: '你的服务器IP',
  port: '22',
  username: '登录账号',
  password: '密码' // 建议用环境变量存储，不要直接写在这里
}

const sftp = new SftpClient()
const remoteDir = '/var/www/your-project' // 服务器项目路径

sftp.connect(config)
  .then(() => {
    console.log('🚀 开始上传最新文件...')
    return sftp.uploadDir('dist', remoteDir) // 将本地的dist文件夹整个上传
  })
  .then(() => {
    console.log('✅ 部署成功！')
    sftp.end()
  })
  .catch(err => {
    console.error('❌ 部署失败：', err.message)
    sftp.end()
  })

第三步：配置package.json

{
  "scripts": {
    "deploy": "node deploy.js"
  }
}

---

💡 实际应用技巧

1. 安全配置： 不要把密码硬编码在代码里！建议使用环境变量：

password: process.env.SFTP_PASSWORD

2. 部署前自动打包：

{
  "scripts": {
    "build": "npm run build",
    "deploy": "npm run build && node deploy.js"
  }
}

3. 增加备份环节（重要！）：

// 上传前先备份现有版本
const backupDir = `/var/www/backups/project-${Date.now()}`
await sftp.rename(remoteDir, backupDir)

---

🏆 为什么要用这种方式？

适合场景：

• 中小型项目快速部署
• 没有搭建CI/CD的简单项目
• 需要快速验证线上效果

优势：

• ⚡ 5分钟搞定配置
• 📦 零额外服务依赖
• 🔧 灵活可控，随时调整

---

🌟 进阶玩法

当你熟悉基本操作后，还可以：

1. 搭配Git钩子，实现git push后自动部署
2. 增加文件差异对比，只上传修改过的文件
3. 部署完成后自动发送通知到钉钉/企业微信

---

📊 手动部署 vs 自动部署

方式	时间消耗	出错概率	需要专注
手动部署	5-15分钟	高	需要
自动部署	10秒钟	低	不需要

---

💬 总结

自动部署不是大公司的专利，任何一个前端项目都值得拥有。用ssh2-sftp-client实现自动部署，就像给你的开发流程装上了加速器------省下来的时间，喝杯咖啡不香吗？

尝试一次，你就会发现：原来部署可以这么优雅，再也不想回到手动拖拽的时代了！

---

小提示： 本文示例是最简版本，实际使用时记得添加错误处理和日志记录哦！