如何让Apache服务器上的React应用始终指向main分支？

我当前通过执行npm build并将构建文件放入Apache2虚拟主机指向的目录来部署React应用。但问题是，线上网站会随服务器root用户切换的Git分支而变化：当执行git checkout dev时，网站就会显示dev分支的构建版本，而非main分支版本。我希望线上站点始终展示main分支的内容，请问该如何实现？以下是我的Apache配置：

<VirtualHost {my_ip}>
    ServerAdmin webmaster@localhost
    DocumentRoot {path_to_react_build}
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

其中path_to_react_build存放着React应用的构建文件。

1. 分离代码仓库与生产部署目录 #

核心思路是不让Apache直接指向Git仓库内的build文件夹，而是单独创建一个独立的生产部署目录，只把main分支的构建产物放到这里，彻底切断分支切换对线上内容的影响：

• 创建专门的生产部署目录：

  mkdir -p /var/www/react-production
  

• 每次更新线上版本时，固定操作main分支：

  git checkout main
  git pull origin main
  npm install
  npm run build
  # 将构建产物复制到部署目录
  cp -r build/* /var/www/react-production/
  

• 修改Apache配置的DocumentRoot为这个独立目录：

  <VirtualHost {my_ip}>
      ServerAdmin webmaster@localhost
      DocumentRoot /var/www/react-production
      ErrorLog ${APACHE_LOG_DIR}/error.log
      CustomLog ${APACHE_LOG_DIR}/access.log combined
  </VirtualHost>
  

• 重启Apache生效：

  sudo systemctl restart apache2
  

2. 用Git钩子自动同步（简化操作） #

如果不想每次手动复制构建产物，可以给main分支添加post-merge钩子，拉取代码后自动完成构建和部署：

• 进入Git仓库的钩子目录，创建可执行文件：

  cd /path/to/your/react-repo/.git/hooks
  touch post-merge
  chmod +x post-merge
  

• 编辑post-merge内容，仅在main分支触发同步：

  #!/bin/bash
  CURRENT_BRANCH=$(git rev-parse --abbrev-ref HEAD)
  if [ "$CURRENT_BRANCH" = "main" ]; then
      npm install
      npm run build
      cp -r build/* /var/www/react-production/
      echo "已同步main分支构建产物到生产目录"
  fi
  

之后在main分支执行git pull时，会自动完成部署流程。

3. 不要用root操作代码仓库（最佳实践） #

创建专门的部署用户（比如deploy），限制权限避免误操作：

useradd -m deploy
# 给部署用户分配目录权限
chown -R deploy:deploy /var/www/react-production
chown -R deploy:deploy /path/to/your/react-repo

后续用该用户完成代码拉取、构建操作，root仅负责系统级配置。

内容的提问来源于stack exchange，提问作者NFeruch - FreePalestine