如何自动化React项目构建后上传GoDaddy cPanel的部署流程

方案核心逻辑 #

不用依赖cPanel网页端上传功能，通过FTP协议+CI流水线把你现在手动做的5步全串成自动流程，代码推送到主分支后自动完成构建、旧文件清理、全目录上传，全程不需要手动登录cPanel操作。

落地步骤 #

• 前置准备：登录cPanel面板找到「FTP账户」功能，创建一个指向public_html站点根目录的专用FTP账号，记录好FTP服务器地址、账号、密码，给账号分配读写删除权限。如果你的主机支持SFTP/SSH，用SFTP稳定性更高，普通FTP也完全满足需求。
• 配置CI流水线（以公开Git仓库最常用的GitHub为例，GitLab、Gitee等平台逻辑完全一致）：
  1. 进入仓库的设置页面，把刚才记录的FTP信息存为仓库加密密钥，分别命名为FTP_SERVER、FTP_USER、FTP_PASSWORD，不要把账号密码直接写在代码文件里。
  2. 在仓库根目录新建.github/workflows/deploy.yml配置文件，内容如下，流水线会自动完成依赖安装、生产构建、远程旧文件清理、嵌套目录全量上传的全流程：

name: 自动部署到cPanel
on:
  push:
    branches: [ "main" ] # 替换为你实际使用的主分支名
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: 拉取仓库代码
      uses: actions/checkout@v4
    - name: 配置Node环境
      uses: actions/setup-node@v4
      with:
        node-version: 20 # 对齐你本地开发用的Node大版本
        cache: 'npm'
    - name: 安装依赖
      run: npm ci
    - name: 生产环境构建
      run: npm run build
    - name: 上传构建产物到cPanel
      uses: SamKirkland/FTP-Deploy-Action@v4.3.5
      with:
        server: ${{ secrets.FTP_SERVER }}
        username: ${{ secrets.FTP_USER }}
        password: ${{ secrets.FTP_PASSWORD }}
        local-dir: ./build/
        server-dir: ./public_html/
        dangerous-clean-slate: true # 自动删除远程目录下的旧构建文件，等价于手动删旧版本的操作
        exclude: .htaccess, cgi-bin # 排除cPanel系统自带文件，避免误删导致主机异常

• 配置完成后，把配置文件推送到主分支，之后所有合入/推送到主分支的代码都会自动触发部署流程，你可以在仓库的Actions页面查看部署进度，部署失败会直接显示报错信息。

常见问题适配 #

• 如果FTP连接失败，先确认GoDaddy给你的FTP服务端口，默认是21，如果是特殊端口，在上面的上传步骤配置里加一行port: 你的端口号即可。
• 如果你不想每次部署清空所有旧文件，把dangerous-clean-slate参数设为false即可，部署时会自动覆盖同名文件，不会删除原有内容。
• React单页应用需要做路由适配，否则刷新子路由会报404：在项目的public目录下新建.htaccess文件，写入以下重写规则，构建时会自动把这个文件打包到产物里，不需要手动上传：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

• 如果你不想用云端CI，也可以做本地一键部署：在项目里安装ftp-deploy依赖，写一个本地部署脚本，本地跑完npm run build之后直接执行脚本就自动完成上传，不需要打开网页端cPanel逐层传文件。

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