基于ShipitJS部署：本地React项目构建产物同步至服务器问询

我来帮你把Shipit配置补全，再一步步指导你完成React应用的部署流程。

一、完整的Shipitfile.js配置 #

你的配置片段有点不完整，我帮你补全并优化，确保能正确同步dist目录：

var utils = require('shipit-utils');

module.exports = function (shipit) {
  // 引入shipit-deploy核心模块
  require('shipit-deploy')(shipit);

  // 初始化配置
  shipit.initConfig({
    default: {
      workspace: '.', // 本地项目根目录
      dirToCopy: 'dist/', // 要同步的构建产物目录
      keepReleases: 2, // 保留最近2个版本，方便回滚
      deleteOnRollback: false, // 回滚时不删除旧版本
      key: '~/.ssh/id_rsa', // 本地SSH私钥路径
      shallowClone: false, // 因为我们同步本地构建产物，无需浅克隆Git仓库
      deployTo: '/var/www/react-app', // 远程服务器的部署根目录
      ignores: ['.git', 'node_modules', 'src'], // 忽略不需要同步的目录
      rsync: ['--del'], // rsync参数：删除远程服务器上本地已不存在的文件
    },
    staging: {
      servers: 'user@xx.x.x.xxx', // 远程服务器的SSH地址（去掉末尾斜杠）
    },
    // 可选：添加生产环境配置
    // production: {
    //   servers: 'user@yy.y.y.yy'
    // }
  });

  // 可选钩子：部署前自动执行React构建命令
  utils.registerTask(shipit, 'build:react', function () {
    return shipit.local('npm run build')
      .then(() => shipit.log('React项目构建完成！'))
      .catch(err => {
        shipit.log('构建失败：', err);
        throw err;
      });
  });

  // 让deploy任务先触发构建
  shipit.on('deploy:started', () => shipit.start('build:react'));
};

二、部署前准备 #

1. 安装Shipit依赖
   在React项目根目录执行命令，安装所需模块：

   npm install shipit-cli shipit-deploy shipit-utils --save-dev
   

2. 确认远程服务器配置

   • 测试本地SSH私钥能否无密码登录远程服务器：ssh user@xx.x.x.xxx
   • 提前在远程服务器创建部署目录，确保用户有读写权限：

     ssh user@xx.x.x.xxx "mkdir -p /var/www/react-app"
     

三、执行部署 #

方式一：自动构建+部署（推荐） #

直接运行以下命令，会自动完成本地构建+远程同步：

npx shipit staging deploy

方式二：手动构建后部署 #

如果你已经手动执行过npm run build，可以直接运行部署命令：

npx shipit staging deploy

四、常用额外命令 #

• 查看部署历史版本：

  npx shipit staging deploy:list
  

• 回滚到上一个版本：

  npx shipit staging rollback
  

• 查看远程服务器部署目录结构：

  npx shipit staging server:exec "ls -la /var/www/react-app"
  

五、注意事项 #

• 确保React项目的package.json里有build脚本（create-react-app生成的项目默认自带："build": "react-scripts build"）
• 如果远程服务器用非默认SSH端口，可在servers里指定：user@xx.x.x.xxx:2222
• 不需要自动构建的话，可删除配置里的build:react任务和对应的钩子

内容的提问来源于stack exchange，提问作者prajeesh