如何实现推送GitHub分支自动部署React应用至GoDaddy？

核心原理 #

GitHub Actions 是 GitHub 提供的自动化工具，当你触发指定事件（比如推代码到特定分支）时，它会在云端虚拟机上按配置执行一系列操作——拉取代码、构建项目、上传到cPanel，完全替代手动流程。

步骤1：准备cPanel连接信息 #

首先把cPanel的FTP/SFTP信息存在GitHub仓库的加密 Secrets里，避免明文泄露：

• 登录你的GitHub仓库，进入「Settings」→「Secrets and variables」→「Actions」
• 点击「New repository secret」，添加以下4个秘密变量：
  • FTP_SERVER: GoDaddy的FTP主机地址（比如ftp.yourdomain.com，可在cPanel的「FTP Accounts」中查看）
  • FTP_USERNAME: cPanel的FTP用户名（或cPanel主账号用户名）
  • FTP_PASSWORD: cPanel的FTP密码（或对应FTP账号的密码）
  • FTP_TARGET_DIR: 网站根目录路径（GoDaddy默认是public_html/，子目录则写public_html/your-subfolder/）

步骤2：创建GitHub Actions配置文件 #

在项目根目录下新建路径：.github/workflows/deploy.yml，粘贴以下配置并按需修改：

# 触发条件：推代码到main分支时触发部署
on:
  push:
    branches: [ main ] # 改成你需要自动部署的分支，比如prod

jobs:
  deploy:
    runs-on: ubuntu-latest # 使用云端Ubuntu虚拟机运行任务
    steps:
      # 1. 拉取仓库代码到虚拟机
      - name: Checkout code
        uses: actions/checkout@v4

      # 2. 设置Node.js环境（React构建依赖Node）
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20.x' # 改成你项目使用的Node版本，比如18.x

      # 3. 安装项目依赖
      - name: Install dependencies
        run: npm install # 用yarn的话改成yarn install

      # 4. 构建React项目，生成build文件夹
      - name: Build project
        run: npm run build # 用yarn的话改成yarn build

      # 5. 上传build文件夹到cPanel指定目录
      - name: Deploy to GoDaddy via FTP
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./build/ # React构建产物目录，无需修改（除非你的项目构建后是dist等其他目录）
          server-dir: ${{ secrets.FTP_TARGET_DIR }}
          # 若使用更安全的SFTP，取消下方两行注释，并确保server为SFTP地址
          # protocol: sftp
          # port: 22

关键配置说明 #

• on.push.branches: 指定触发自动部署的分支，比如你想推到prod分支才部署，就把main替换成prod
• node-version: 必须和本地开发用的Node版本一致，避免依赖安装或构建报错
• SFTP配置：GoDaddy支持SFTP，比FTP更安全，启用时需确认cPanel的SFTP端口为22（默认是）

测试部署 #

提交配置文件到仓库，然后推代码到指定分支，去GitHub仓库的「Actions」标签页查看运行状态：

• 绿勾表示部署成功，刷新网站即可看到新内容
• 红叉表示失败，点击进入查看日志排查问题：常见原因包括Node版本不匹配导致依赖安装失败、Secrets信息填错导致FTP连接失败、目标目录路径错误等

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