如何配置Jenkins将React应用部署至Apache2并自动更新网站？

核心问题解决思路 #

要让Jenkins直接在/var/www/目录下拉取代码、构建并部署，核心要解决权限配置、工作目录指定、跨系统兼容三个问题，以下是分步实现方案：

1. 先解决Jenkins的目录权限问题 #

Ubuntu和CentOS Stream中，Apache的网站目录分别属于www-data（Ubuntu）和apache（CentOS）用户组，Jenkins默认以jenkins用户运行，必须赋予它读写/var/www/的权限：

• Ubuntu系统执行：

  sudo usermod -aG www-data jenkins
  sudo chmod -R g+w /var/www/
  sudo systemctl restart jenkins
  

• CentOS Stream系统执行：

  sudo usermod -aG apache jenkins
  sudo chmod -R g+w /var/www/
  sudo systemctl restart jenkins
  

2. 配置Jenkins项目直接使用/var/www/作为工作目录 #

方案一：Pipeline项目推荐

直接在Pipeline脚本中指定/var/www/下的项目目录（比如/var/www/react-app），替代默认工作区。注意你之前的dir命令报错大概率是路径写错，以下是正确写法：

pipeline {
    agent any
    stages {
        stage('拉取最新代码') {
            steps {
                dir('/var/www/react-app') {
                    git url: '你的Git仓库地址', branch: 'main'
                }
            }
        }
        stage('安装依赖并构建React') {
            steps {
                dir('/var/www/react-app') {
                    // 确保Jenkins已安装Node.js插件并配置好环境
                    sh 'npm install'
                    sh 'npm run build'
                    // 将构建产物复制到Apache默认根目录
                    sh 'cp -r build/* /var/www/html/'
                }
            }
        }
        stage('重启Apache生效') {
            steps {
                // 自动适配Ubuntu/CentOS的Apache服务名
                sh '''
                    if [ -f /etc/os-release ] && grep -qi "ubuntu" /etc/os-release; then
                        sudo systemctl restart apache2
                    else
                        sudo systemctl restart httpd
                    fi
                '''
            }
        }
    }
}

方案二：Freestyle项目配置

1. 进入Freestyle项目配置页，在源码管理中填写Git仓库地址；
2. 在构建环境中勾选Use custom workspace，填写路径/var/www/react-app；
3. 添加构建步骤→执行shell，输入命令：

   cd /var/www/react-app
   npm install
   npm run build
   cp -r build/* /var/www/html/
   # 适配系统的Apache重启命令
   if [ -f /etc/os-release ] && grep -qi "ubuntu" /etc/os-release; then
       sudo systemctl restart apache2
   else
       sudo systemctl restart httpd
   fi
   

3. 配置代码推送自动触发构建 #

在Git仓库的Webhook设置中，添加Jenkins的触发地址（比如http://你的Jenkins地址/github-webhook/），选择推送事件触发，这样代码一提交就会自动启动Jenkins部署流程。

常见问题排查 #

• 如果npm命令找不到：安装Jenkins的NodeJS插件，在全局工具配置中添加Node.js版本并关联到项目；
• 如果cp或systemctl执行报错：确保jenkins用户有sudo权限，可编辑sudoers文件添加jenkins ALL=(ALL) NOPASSWD: /usr/bin/systemctl, /bin/cp（仅限必要命令，避免过度授权）；
• 之前的dir命令报错：检查路径是否正确（你写的/www/var/home/osboxes/jenkins/var/jenkins_home/workspace/CI - CD是错误路径，应该直接指向/var/www/下的目标目录）。

内容的提问来源于stack exchange，提问作者Gustavo-Valdez