前端上传文件到服务器 2025-04-23

1. 简介

• 前端上传文件到服务器方法历程

手动上传（winScp、fileZilla 等软件链接服务器实现手动上传文件）-》脚本自动上传-》CI/CD （jenkins 实现git 自动更新部署）

• 前言
  windows 下做开发运维的小伙伴，应该比较喜欢用 winScp 去管理远程服务器的文件。图形化管理确实好用，界面布局也符合操作。不过不适用mac ，因此mac 推荐用 fileZilla。

2.手动上传 以fileZilla 为例

• 特点：

  1. 易于使用
  2. 多协议支持
     支持FTP、FTPS、SFTP等文件传输协议。
  3. 支持中文
  4. 免费使用
  5. 跨平台 windows也可以使用。

• 下载
  网站找到到对应版本下载安装

• 使用教程

1. 第一步

   
   image.png

2. 第二步

   
   image.png

3. 第三步

   
   image.png

3.通过js脚本上传

• 本次使用一个npm来使用自动上传: deploy cli 工具： deploy-cli-service/
• 安装

1. 执行 npm install deploy-cli-service -g 进行全局安装 或者 -D 安装到当前项目
2. 执行 deploy-cli-service -v 查看版本

3. 初始化配置文件
   在项目根目录执行 deploy-cli-service init 进行初始化
   deploy-cli-service init命令执行后项目目录下会出现一个名为deploy.config的文件,如下：

   
   image.png

deploy-cli-service init初始化的内容会被默认输入到 deploy.config 中

4. 修改配置文件
   deploy-cli-service init初始化之后输入的内容都会默认被写入deploy.config文件中。

module.exports = {
  projectName: 'vue_samples', // 项目名称
  privateKey: '/Users/fuchengwei/.ssh/id_rsa',
  passphrase: '',
  readyTimeout: 20000, // 超时时间(毫秒)
  cluster: [], // 集群部署配置，要同时部署多台配置此属性如: ['dev', 'test', 'prod']
  dev: {
    // 环境对象
    name: '开发环境', // 环境名称
    script: 'npm run build', // 打包命令
    host: '192.168.0.1', // 服务器地址
    port: 22, // 服务器端口号
    username: 'root', // 服务器登录用户名
    password: '123456', // 服务器登录密码
    distPath: 'dist', // 本地打包生成目录
    webDir: '/usr/local/nginx/html', // 服务器部署路径（不可为空或'/'）
    bakDir: '/usr/local/nginx/backup', // 备份路径 (打包前备份之前部署目录 最终备份路径为 /usr/local/nginx/backup/html.zip)
    isRemoveRemoteFile: true, // 是否删除远程文件（默认true）
    isRemoveLocalFile: true // 是否删除本地文件（默认true）
  },
  test: {
    // 环境对象
    name: '测试环境', // 环境名称
    script: 'npm run build:test', // 打包命令
    host: '192.168.0.1', // 服务器地址
    port: 22, // 服务器端口号
    username: 'root', // 服务器登录用户名
    password: '123456', // 服务器登录密码
    distPath: 'dist', // 本地打包生成目录
    webDir: '/usr/local/nginx/html', // 服务器部署路径（不可为空或'/'）
    bakDir: '/usr/local/nginx/backup', // 备份路径 (打包前备份之前部署目录 最终备份路径为 /usr/local/nginx/backup/html.zip)
    isRemoveRemoteFile: true, // 是否删除远程文件（默认true）
    isRemoveLocalFile: true // 是否删除本地文件（默认true）
  },
  prod: {
    // 环境对象
    name: '生产环境', // 环境名称
    script: 'npm run build:prod', // 打包命令
    host: '192.168.0.1', // 服务器地址
    port: 22, // 服务器端口号
    username: 'root', // 服务器登录用户名
    password: '123456', // 服务器登录密码
    distPath: 'dist', // 本地打包生成目录
    webDir: '/usr/local/nginx/html', // 服务器部署路径（不可为空或'/'）
    bakDir: '/usr/local/nginx/backup', // 备份路径 (打包前备份之前部署目录 最终备份路径为 /usr/local/nginx/backup/html.zip)
    isRemoveRemoteFile: true, // 是否删除远程文件（默认true）
    isRemoveLocalFile: true // 是否删除本地文件（默认true）
  }
}

然后看看相关的属性有没有什么需要修改的就ok。

5. 配置部署命令
   注意：命令后面需要加 --mode 环境对象 （如：--mode dev）

在项目根目录下的 package.json 文件中 scripts 脚本中添加如下代码

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "deploy": "deploy-cli-service deploy",
  "deploy:dev": "deploy-cli-service deploy --mode dev",
  "deploy:test": "deploy-cli-service deploy --mode test",
  "deploy:prod": "deploy-cli-service deploy --mode prod"
}

然后执行下面命令完成部署操作

npm run deploy:dev

成功部署后会如下显示：
npm run deploy:dev

6. 注意
   配置 deploy.config.js时尽量使用ssh密钥登录，不要使用服务器密码，把服务器密码写在前端代码里是一件非常不好的操作。