如何使用GitHub部署并托管我的React应用

以下是两种不同场景的实现方式，完全基于GitHub原生能力：

方案1：纯前端静态React项目（无自定义服务端逻辑）部署 #

适用于只有前端代码、调用第三方接口的普通单页应用：

• 先在本地项目的package.json中添加homepage字段，值为"homepage": "https://你的GitHub用户名.github.io/你的仓库名称/"
• 安装部署工具包，本地运行命令：npm install gh-pages --save-dev
• 在package.json的scripts配置块中新增两条命令：

  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
  

• 本地执行npm run deploy，命令运行完成后会自动将打包后的build目录产物推送到仓库的gh-pages分支
• 打开GitHub对应仓库的「Settings」页面，找到「Pages」配置项，将部署源分支设置为gh-pages、目录选择根目录，保存后等待2-3分钟即可通过第一步填写的homepage地址正常访问项目

方案2：带自定义服务端代码的全栈React项目自动部署 #

如果你的项目包含自研的后端服务逻辑，可以用GitHub Actions实现代码推送后自动部署：

• 提前在你使用的服务端托管平台拿到部署所需的密钥、应用标识等凭证
• 打开GitHub对应仓库的「Settings」→「Secrets and variables」→「Actions」页面，将上述凭证添加为仓库机密，避免明文泄露
• 在项目根目录新建.github/workflows/deploy.yml文件，编写对应部署工作流配置，核心逻辑设置为：触发条件为main分支有代码推送时执行，先拉取仓库代码、安装前后端依赖、打包前端产物，再将全量代码推送到托管平台完成部署
• 将新增的workflow文件推送到GitHub仓库，之后每次你推送代码到main分支都会自动触发部署流程，无需手动操作

常见问题排查 #

• 部署后打开页面空白：先检查package.json中homepage字段填写是否正确，其次如果用了React Router，将BrowserRouter改为HashRouter即可解决刷新404的问题
• 部署流程失败：直接进入GitHub仓库的「Actions」标签页，点开对应失败的工作流任务查看运行日志，定位错误即可

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