如何将Visual Studio Code代码变更推送到Google Cloud Compute Engine更新站点

一、前置权限确认 #

你已经完成GitHub与Google Source Repositories（以下简称GSR）的关联，只需要额外确认GCE实例的默认服务账号已被授予GSR的读取权限，避免后续拉取代码时报权限错误。

二、GCE实例（CentOS 7）端基础配置 #

• 安装Git工具：
  yum install git -y
• 备份原有站点内容，假设你的网站主目录为/var/www/html：
  mv /var/www/html /var/www/html.bak
• 直接将GSR仓库克隆到网站主目录，替换对应占位符为你自己的GSR仓库名、GCP项目ID：
  gcloud source repos clone 你的GSR仓库名 /var/www/html --project=你的GCP项目ID
• 配置站点目录权限，根据你使用的Web服务调整所属用户：
  • Nginx环境：chown -R nginx:nginx /var/www/html && chmod -R 755 /var/www/html
  • Apache环境：chown -R apache:apache /var/www/html && chmod -R 755 /var/www/html

三、配置代码推送自动同步规则 #

提供两种方案可选，根据你的更新频率选择即可：

方案1：轻量定时同步（适合低频率更新场景） #

用系统定时任务定时拉取GSR最新代码，配置后最小1分钟延迟同步：

• 执行crontab -e编辑定时任务，添加如下行（如果你的主分支名为master，把main替换为master即可）：
  * * * * * cd /var/www/html && git pull origin main > /var/log/git_sync.log 2>&1
• 保存退出后定时任务自动生效，同步日志会写入/var/log/git_sync.log可排查问题。

方案2：实时推送同步（适合高频率更新场景） #

通过webhook实现GSR收到代码后立即触发GCE拉取同步：

• 安装webhook服务：
  yum install epel-release -y && yum install webhook -y
• 编写同步脚本/opt/sync_site.sh，内容如下：

  #!/bin/bash
  cd /var/www/html
  git reset --hard origin/main
  git pull origin main
  # 下面权限配置根据你的Web服务调整
  chown -R nginx:nginx /var/www/html
  echo "同步完成 at $(date)" >> /var/log/git_sync.log
  

• 给脚本添加执行权限：chmod +x /opt/sync_site.sh
• 编写webhook配置文件/etc/webhook.conf，替换其中的自定义密钥字符串：

  [
    {
      "id": "sync-site",
      "execute-command": "/opt/sync_site.sh",
      "command-working-directory": "/var/www/html",
      "trigger-rule": {
        "match": {
          "type": "value",
          "value": "你自定义的校验密钥",
          "parameter": {
            "source": "payload",
            "name": "secret"
          }
        }
      }
    }
  ]
  

• 启动webhook服务并放行端口：

  systemctl start webhook && systemctl enable webhook
  firewall-cmd --add-port=9000/tcp --permanent && firewall-cmd --reload
  

• 最后到GSR设置页添加webhook，触发地址填http://你的GCE公网IP:9000/hooks/sync-site，触发条件选择代码推送时触发，密钥填你刚才自定义的校验密钥即可。

四、VSCode端操作验证 #

你本地VSCode正常关联原有GitHub仓库即可，代码修改后直接推送到GitHub，因为你已经完成GitHub和GSR的关联，代码会自动同步到GSR，之后会自动触发GCE的同步规则，刷新站点即可看到更新效果。

注意：如果你的站点配置了静态资源缓存、运行时缓存，同步后需要手动清理缓存才能看到最新内容。如果拉取代码时报权限错误，可以在GCE上生成SSH密钥添加到GSR的访问密钥列表解决。

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