GitHub与Plesk集成CI/CD：SCSS编译产物部署时机及方式咨询

问题背景 #

我们已通过Webhooks实现GitHub与Plesk集成，将stage分支代码部署到预发布服务器，流程正常。现需新增SCSS自动编译，将生成的CSS同步到预发布服务器，但存在两个疑问：

1. 编译Action是否会在部署前执行？
2. 编译后的CSS产物如何同步到服务器？

当前使用的GitHub Actions YAML配置：

on:
  push:
    branches:
      - stage

jobs:
  build_css:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source Git branch
        uses: actions/checkout@v2
        with:
            ref: stage
            fetch-depth: 10
            submodules: true
      - name: Make destination directory for compiled CSS
        run: mkdir -vp /tmp/theme/assets/
        
      - name: Compile CSS from SCSS files
        uses: gha-utilities/sass-build@v0.4.11
        with:
          source: assets/src/main.scss
          destination: /tmp/theme/assets/

      - name: Move compiled CSS to path within stage branch
        run: mv /tmp/theme/assets assets/

解决方案 #

1. 时序问题说明 #

当前你的工作流仅包含build_css任务，而原Plesk部署是通过Webhook独立触发的——Webhook会在代码push到stage分支时立即启动部署，而GitHub Actions是push后才开始执行编译，部署会先于编译完成，导致预发布服务器拿不到最新的CSS文件。

要保证编译在部署前执行，必须将编译与部署整合到同一个GitHub Actions工作流中（此方案复杂度更低，更易维护）。

2. 编译产物同步方案 #

当前配置中，编译后的CSS仅存在于Actions运行容器的assets/目录，并未同步到仓库或服务器，因此Plesk部署无法获取。推荐两种方案：

方案一：将编译产物推回stage分支（不推荐）

在build_css任务末尾添加提交推送步骤，把编译后的CSS推回分支，让原Webhook部署能拉取到文件：

# 在现有steps后添加
- name: Configure Git identity
  run: |
    git config --global user.name "GitHub Actions"
    git config --global user.email "actions@github.com"
- name: Commit compiled CSS
  run: |
    git add assets/
    git commit -m "Auto-compile SCSS to CSS [skip ci]"
- name: Push changes to stage
  run: git push origin stage

⚠️ 缺点：会给stage分支增加大量自动提交，污染源码分支的提交历史。

方案二：在Actions中直接完成编译+部署（推荐）

放弃原Webhook触发的部署，改用GitHub Actions直接部署到Plesk，确保编译完成后再推送所有文件到服务器：

1. 前置准备：
   • 在Plesk后台生成API密钥（路径：工具与设置 > API密钥 > 添加密钥）
   • 在GitHub仓库的「Settings > Secrets and variables > Actions」中添加两个Secret：
     • PLESK_SERVER_URL：Plesk服务器地址（如https://your-plesk-server:8443）
     • PLESK_API_KEY：刚才生成的Plesk API密钥
2. 修改后的YAML配置：

on:
  push:
    branches:
      - stage

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source Git branch
        uses: actions/checkout@v2
        with:
            ref: stage
            fetch-depth: 10
            submodules: true
      - name: Make destination directory for compiled CSS
        run: mkdir -vp /tmp/theme/assets/
        
      - name: Compile CSS from SCSS files
        uses: gha-utilities/sass-build@v0.4.11
        with:
          source: assets/src/main.scss
          destination: /tmp/theme/assets/

      - name: Move compiled CSS to project directory
        run: mv /tmp/theme/assets/* assets/

      # 新增：部署到Plesk预发布服务器
      - name: Deploy to Plesk
        uses: plesk/plesk-deploy-action@v1
        with:
          server-url: ${{ secrets.PLESK_SERVER_URL }}
          api-key: ${{ secrets.PLESK_API_KEY }}
          domain: your-stage-domain.com # 替换为你的预发布域名
          source: ./ # 部署当前工作目录的所有文件（含编译后的CSS）

此方案中，整个流程为：push到stage分支 → 拉取代码 → 编译SCSS → 将CSS移到项目目录 → 部署到Plesk，完全保证时序正确，编译产物直接同步到服务器。

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