如何在GitHub Actions CI/CD中为Shopify结账扩展传递环境变量？

针对Shopify结账扩展（浏览器沙箱环境）无法直接读取Node环境变量的问题，核心解决思路是在构建阶段静态注入环境变量，结合GitHub Actions实现分环境CI/CD。以下是具体实现步骤：

一、本地开发环境变量配置 #

1. 创建环境变量文件
   在扩展根目录创建对应环境的.env文件（不要提交到Git，添加到.gitignore）：

• .env.local：本地开发用
• .env.staging：预发布环境用
• .env.production：生产环境用

文件内容示例：

API_ENDPOINT=https://local-api.yourdomain.com

2. 代码中使用占位变量
   在扩展代码中定义配置文件（比如src/config.ts），用占位符标记需要替换的变量：

// src/config.ts
export const API_ENDPOINT = '__API_ENDPOINT__';

3. 添加环境变量替换脚本
   安装replace-in-file工具用于构建前替换变量：

npm install replace-in-file --save-dev

创建替换脚本scripts/replace-env.js：

const replace = require('replace-in-file');
const options = {
  files: './src/config.ts',
  from: /__API_ENDPOINT__/g,
  to: process.env.API_ENDPOINT,
};

try {
  replace.sync(options);
  console.log('环境变量替换完成');
} catch (err) {
  console.error('环境变量替换失败:', err);
  process.exit(1);
}

4. 配置构建/启动脚本
   在package.json中添加分环境的脚本：

{
  "scripts": {
    "prebuild:local": "cross-env API_ENDPOINT=https://local-api.yourdomain.com node scripts/replace-env.js",
    "build:local": "shopify extension build",
    "prebuild:staging": "cross-env API_ENDPOINT=https://staging-api.yourdomain.com node scripts/replace-env.js",
    "build:staging": "shopify extension build",
    "prebuild:production": "cross-env API_ENDPOINT=https://prod-api.yourdomain.com node scripts/replace-env.js",
    "build:production": "shopify extension build",
    "serve:local": "cross-env API_ENDPOINT=https://local-api.yourdomain.com node scripts/replace-env.js && shopify extension serve"
  }
}

注：安装cross-env兼容跨系统环境变量设置：npm install cross-env --save-dev

二、GitHub Actions CI/CD配置 #

1. 添加仓库密钥
   进入GitHub仓库 → Settings → Secrets and variables → Actions，添加以下Secrets：

• SHOPIFY_CLI_TOKEN：Shopify CLI认证令牌（用于部署）
• STAGING_API_ENDPOINT：预发布环境API地址
• PRODUCTION_API_ENDPOINT：生产环境API地址

2. 创建CI/CD workflow文件
   在.github/workflows/extension-deploy.yml中写入：

name: 部署Shopify结账扩展
on:
  push:
    branches:
      - main       # 生产环境分支
      - staging    # 预发布环境分支

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: 配置Node.js环境
        uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'npm'
      - name: 安装依赖
        run: npm ci
      - name: 构建预发布版本
        if: github.ref == 'refs/heads/staging'
        run: |
          npm run prebuild:staging
          npm run build:staging
        env:
          API_ENDPOINT: ${{ secrets.STAGING_API_ENDPOINT }}
      - name: 构建生产版本
        if: github.ref == 'refs/heads/main'
        run: |
          npm run prebuild:production
          npm run build:production
        env:
          API_ENDPOINT: ${{ secrets.PRODUCTION_API_ENDPOINT }}
      - name: 部署到Shopify
        run: shopify extension deploy --force
        env:
          SHOPIFY_CLI_TOKEN: ${{ secrets.SHOPIFY_CLI_TOKEN }}

三、关键注意事项 #

• 所有.env文件必须加入.gitignore，避免敏感信息泄露
• 每个环境需要单独构建部署，因为变量是静态注入到构建产物中的
• 确保extension.toml中network_access设置为true，否则扩展无法访问外部API端点

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