您现在的位置是：网站首页 > 手动部署（FTP 上传，改一行代码传一次）文章详情

手动部署（FTP 上传，改一行代码传一次）

陈川【前端综合】 29875人已围观 3766字

手动部署（FTP 上传，改一行代码传一次）

手动部署是前端开发中一种常见的部署方式，尤其适合小型项目或个人开发。通过FTP上传文件，每次修改代码后都需要重新上传，虽然效率不高，但操作简单直接。

FTP 工具的选择

使用FTP部署需要选择合适的工具。常见的FTP客户端包括：

FileZilla：开源免费，支持多平台
WinSCP：Windows平台专用，支持SFTP
Cyberduck：Mac平台专用，界面友好
命令行工具：如lftp、curl等

# 使用lftp上传文件的示例
lftp -u username,password ftp.example.com -e "put localfile.html; bye"

部署流程详解

连接FTP服务器
- 输入主机地址、用户名、密码
- 设置端口（默认21）
- 选择传输模式（主动/被动）
上传文件
- 本地目录和远程目录同步
- 拖放文件或使用右键菜单上传
- 注意文件权限设置（通常为644）
验证部署
- 清除浏览器缓存
- 访问网站查看更改是否生效
- 使用开发者工具检查网络请求

常见问题与解决方案

文件上传失败

检查磁盘空间是否充足
确认文件权限是否正确
网络连接是否稳定

// 前端可以通过这段代码检查部署版本
const checkVersion = async () => {
  const response = await fetch('/version.txt?t=' + Date.now());
  const version = await response.text();
  console.log('Current version:', version);
};

文件覆盖问题

上传前备份重要文件
使用时间戳命名策略
建立版本控制机制

自动化改进方案

虽然手动上传简单，但可以通过一些方法提高效率：

使用批处理脚本

#!/bin/bash
# 自动上传修改过的文件
lftp -u user,pass ftp.example.com << EOF
mirror -R --only-newer ./local_dir /remote_dir
quit
EOF

结合Git钩子

// package.json中添加部署脚本
"scripts": {
  "deploy": "node deploy.js"
}

文件监控自动上传

// 使用chokidar监控文件变化
const chokidar = require('chokidar');
const ftp = require('basic-ftp');

const client = new ftp.Client();
watcher.on('change', async (path) => {
  await client.access({
    host: 'ftp.example.com',
    user: 'username',
    password: 'password'
  });
  await client.uploadFrom(path, path);
});

安全注意事项

凭证保护
- 不要将FTP密码提交到版本库
- 使用.env文件存储敏感信息
- 考虑使用SSH密钥认证
传输加密
- 优先选择SFTP或FTPS
- 避免在公共网络传输敏感数据
- 定期更换密码
备份策略
- 保持3-2-1备份原则
- 自动化备份重要数据
- 测试恢复流程

性能优化建议

文件压缩
- 上传前压缩静态资源
- 启用服务器端Gzip
- 合并小型文件

// 使用terser压缩JS文件示例
const { minify } = require('terser');
const fs = require('fs');

const code = fs.readFileSync('script.js', 'utf8');
minify(code).then((minified) => {
  fs.writeFileSync('script.min.js', minified.code);
});

缓存控制
- 设置适当的Cache-Control头
- 使用文件哈希命名策略
- 配置ETag优化
增量上传
- 只上传修改过的文件
- 利用rsync等工具同步
- 建立文件修改时间比对机制

与其他部署方式对比

优势

无需复杂配置
适合小型项目
直观可见文件变化

劣势

效率低下
容易出错
缺乏版本回滚能力

适用场景

个人网站维护
快速修复紧急bug
服务器限制无法使用CI/CD

进阶技巧

多环境部署

# 部署到测试环境
lftp -e "set ftp:ssl-allow no; open test.example.com; user testuser password; mirror -R ./dist /public_html; quit"

# 部署到生产环境
lftp -e "set ftp:ssl-allow no; open prod.example.com; user produser password; mirror -R ./dist /public_html; quit"

错误处理机制

// 实现重试机制
async function uploadWithRetry(filePath, retries = 3) {
  let lastError;
  for (let i = 0; i < retries; i++) {
    try {
      await client.uploadFrom(filePath, path.basename(filePath));
      return;
    } catch (err) {
      lastError = err;
      await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
    }
  }
  throw lastError;
}

部署日志记录

// 记录部署历史
const fs = require('fs');
const path = require('path');

function logDeployment(file, success) {
  const logEntry = `${new Date().toISOString()} | ${file} | ${success ? 'SUCCESS' : 'FAILED'}\n`;
  fs.appendFileSync(path.join(__dirname, 'deploy.log'), logEntry);
}

实际案例分析

案例一：静态网站更新

修改index.html中的标题
通过FileZilla重新上传
刷新页面查看变化

案例二：CSS热修复

/* 修改前 */
.button {
  background: #f00;
}

/* 修改后 */
.button {
  background: #09f;
}

上传更新后的style.css
强制刷新浏览器(Ctrl+F5)

案例三：JavaScript调试

// 添加调试日志
function calculateTotal(items) {
  console.log('Calculating total for:', items); // 新增调试语句
  return items.reduce((sum, item) => sum + item.price, 0);
}