如何实现从GitLab自动部署React应用到Heroku？

当然可以实现！你只需要在现有的GitLab CI配置中添加一个部署阶段，将构建完成的dist/目录推送到Heroku即可。下面是详细的分步操作：

1. 准备Heroku认证信息 #

• 登录你的Heroku账户，进入账户设置页面，找到并复制你的API Key。
• 确认你要部署的Heroku应用名称（比如my-react-app）。

2. 添加GitLab CI/CD变量 #

登录你的GitLab项目，进入设置 > CI/CD > 变量，添加两个变量：

• HEROKU_APP_NAME：值为你的Heroku应用名称
• HEROKU_API_KEY：值为你刚才复制的Heroku API Key
  （勾选"保护变量"和"掩码变量"，避免敏感信息泄露）

3. 修改GitLab CI配置文件 #

更新你的.gitlab-ci.yml，添加一个deploy阶段，依赖于build阶段（确保只有构建成功后才会部署）：

image: node:8.10.0-alpine
cache:
  key: "alpine"
  paths:
    - node_modules/
before_script:
  - npm install
  # 安装Heroku CLI及依赖工具
  - apk add --no-cache git curl
  - curl https://cli-assets.heroku.com/install.sh | sh

build:
  stage: build
  artifacts:
    paths:
      - dist/
  script:
    - npm run build
  only:
    - master
  tags:
    - docker

deploy:
  stage: deploy
  dependencies:
    - build  # 依赖build阶段生成的dist产物
  script:
    # 初始化临时Git仓库，用于推送静态文件到Heroku
    - cd dist
    - git init
    - git add .
    - git commit -m "Deploy from GitLab CI"
    # 添加Heroku远程仓库并强制推送
    - git remote add heroku https://heroku:$HEROKU_API_KEY@git.heroku.com/$HEROKU_APP_NAME.git
    - git push -f heroku master
  only:
    - master
  tags:
    - docker

额外说明 #

• 因为Alpine镜像默认没有Git和Heroku CLI，所以我们在before_script里补充安装了这些工具。
• deploy阶段会进入dist目录创建临时仓库，把静态文件提交后推送到Heroku的Git仓库，-f参数是为了覆盖Heroku仓库的历史记录（毕竟每次构建都是全新的静态文件）。
• 如果你的React应用需要处理单页路由，建议给Heroku应用添加静态文件buildpack，并在dist目录下创建static.json配置路由规则：

{
  "root": ".",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}

这样配置完成后，每次你向master分支推送代码，GitLab CI都会自动完成构建并部署到Heroku啦！

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