Vue/Vite项目Github CI/CD部署：如何复用SSH连接分步执行脚本？

核心结论 #

可以在单次SSH连接下拆分出多个带名称的独立操作，不需要每次执行脚本都重新建立SSH连接。下面提供两种适合新手的实现方式：

方法1：在ssh-action的script中添加步骤标识（最简单） #

不需要修改整体结构，只需在原有脚本中加入echo输出步骤名称，这样在Github Actions的日志里就能清晰区分每个操作阶段，同时全程保持一次SSH连接。

修改后的Deploy任务配置：

deploy:
    name: "Deploy"
    needs: project_setup
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to server (single SSH connection)
        uses: appleboy/ssh-action@master
        env:
          GIT_REPO: Comet-Frontend
          GIT_SSH: ${{ github.repositoryUrl }}
        with:
          host: ${{ secrets.VPS_IP }}
          username: ${{ secrets.VPS_USER }}
          password: ${{ secrets.VPS_PASSWORD }}
          port: ${{ secrets.VPS_PORT }}
          envs: GIT_SSH, GIT_REPO
        script: |
            echo "=== 步骤1：切换到项目目录 ==="
            cd /var/www/vue
            
            echo "=== 步骤2：拉取最新代码 ==="
            git pull
            
            echo "=== 步骤3：查看目录内容 ==="
            ls
            
            echo "=== 步骤4：安装依赖 ==="
            yarn
            
            echo "=== 步骤5：构建项目 ==="
            yarn build
            
            echo "=== 步骤6：复制构建产物 ==="
            cp -R /root/Frontend/dist /var/www/vue

这样在Actions日志里，每个echo的内容会作为步骤标识显示，你能清楚看到每个操作的执行情况，而且全程只建立一次SSH连接。

方法2：使用ssh-agent维持连接，拆分独立步骤（更规范） #

如果希望每个操作都作为Github Actions的独立步骤显示（而不是在一个步骤的日志里），可以用webfactory/ssh-agent来管理SSH密钥，然后每个步骤通过ssh命令执行操作，这样所有步骤复用同一个SSH连接池，不需要重复验证。

修改后的Deploy任务配置：

deploy:
    name: "Deploy"
    needs: project_setup
    runs-on: ubuntu-latest
    steps:
      - name: 设置SSH代理
        uses: webfactory/ssh-agent@v0.5.4
        with:
          ssh-private-key: ${{ secrets.VPS_SSH_PRIVATE_KEY }} # 建议用密钥登录替代密码，更安全

      - name: 步骤1：切换到项目目录并拉取代码
        run: ssh -p ${{ secrets.VPS_PORT }} ${{ secrets.VPS_USER }}@${{ secrets.VPS_IP }} "cd /var/www/vue && git pull"

      - name: 步骤2：查看目录内容
        run: ssh -p ${{ secrets.VPS_PORT }} ${{ secrets.VPS_USER }}@${{ secrets.VPS_IP }} "cd /var/www/vue && ls"

      - name: 步骤3：安装依赖
        run: ssh -p ${{ secrets.VPS_PORT }} ${{ secrets.VPS_USER }}@${{ secrets.VPS_IP }} "cd /var/www/vue && yarn"

      - name: 步骤4：构建项目
        run: ssh -p ${{ secrets.VPS_PORT }} ${{ secrets.VPS_USER }}@${{ secrets.VPS_IP }} "cd /var/www/vue && yarn build"

      - name: 步骤5：复制构建产物
        run: ssh -p ${{ secrets.VPS_PORT }} ${{ secrets.VPS_USER }}@${{ secrets.VPS_IP }} "cp -R /root/Frontend/dist /var/www/vue"

注意：这种方式需要你将VPS的SSH私钥添加到Github Secrets中（VPS_SSH_PRIVATE_KEY），替代原有的密码登录，安全性更高。SSH代理会自动复用连接，避免每次步骤都重新建立连接。

额外建议 #

• 优先选择方法1，对新手更友好，配置改动小，且能满足步骤拆分的需求。
• 如果用方法2，建议使用SSH密钥登录而非密码，避免密码泄露风险。
• 你的Build任务可以把构建产物上传到Github Artifacts，然后在Deploy任务中下载到Runner，再通过SCP传到VPS，这样不需要在VPS上执行构建，节省VPS资源，也更符合CI/CD的最佳实践。

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