如何在GitHub Actions构建Vite项目时避免生产API URL泄露

方案1：将构建与部署合并到同一个Job（推荐） #

直接在同一个GitHub Actions Job中完成构建和部署，不需要上传构建产物作为工件，从根源避免泄露风险。

具体步骤：

• 配置Job，指定合适的Runner（比如ubuntu-latest）
• 拉取代码后，从GitHub Secrets读取API URL并写入.env文件（或直接作为环境变量传入Vite构建）
• 执行依赖安装和构建命令
• 直接将构建产物部署到生产服务器（可使用scp、rsync或云服务商的部署工具）

示例配置：

name: Build and Deploy
on:
  push:
    branches: [main]

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install dependencies
        run: npm ci

      - name: Create .env file
        run: echo "VITE_API_URL=${{ secrets.PROD_API_URL }}" > .env

      - name: Build project
        run: npm run build

      - name: Deploy to production server
        uses: appleboy/ssh-action@v1.0.3
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SERVER_SSH_KEY }}
          script: |
            rm -rf /var/www/html/*
            cp -r ./dist/* /var/www/html/

说明：构建产物仅存在于Runner的临时环境中，部署完成后Runner环境会被销毁，不会生成可公开访问的工件，完全避免API URL泄露。

方案2：部署后替换构建产物中的占位符 #

如果必须拆分构建和部署Job，可以在构建时用占位符代替真实API URL，部署到服务器后再替换为真实值，跨Job传递的构建产物不含敏感信息。

具体步骤：

1. 代码中使用占位符：比如在Vite配置或业务代码中用VITE_API_URL=__API_URL_PLACEHOLDER__作为默认值
2. 构建阶段正常执行npm run build，产物中仅包含占位符，无真实API URL
3. 将构建产物上传为工件（此时无敏感信息，无需担心泄露）
4. 部署阶段下载工件后，在生产服务器上用脚本替换占位符为真实API URL（从服务器本地密钥管理或环境变量读取）

示例构建阶段配置：

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install dependencies
        run: npm ci

      - name: Build with placeholder
        run: VITE_API_URL=__API_URL_PLACEHOLDER__ npm run build

      - name: Upload artifact
        uses: actions/upload-artifact@v4
        with:
          name: dist
          path: dist/

部署阶段配置（以SSH部署为例）：

deploy:
  needs: build
  runs-on: ubuntu-latest
  steps:
    - name: Download artifact
      uses: actions/download-artifact@v4
      with:
        name: dist
        path: dist/

    - name: Deploy and replace placeholder
      uses: appleboy/ssh-action@v1.0.3
      with:
        host: ${{ secrets.SERVER_HOST }}
        username: ${{ secrets.SERVER_USER }}
        key: ${{ secrets.SERVER_SSH_KEY }}
        script: |
          rm -rf /var/www/html/*
          cp -r ./dist/* /var/www/html/
          # 替换占位符为真实API URL
          sed -i 's/__API_URL_PLACEHOLDER__/${{ secrets.PROD_API_URL }}/g' /var/www/html/**/*.js /var/www/html/**/*.css

说明：工件中仅包含占位符，即使被查看也不会泄露真实API URL，敏感信息仅在部署阶段传递到服务器并完成替换。

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