含Buildtime Variables的JavaScript应用流水线流程及问题咨询

嘿，这个问题我之前帮团队解决过，其实核心是要搞清楚流水线平台的设计逻辑，以及怎么利用它们的内置功能来满足你的构建时变量需求～

首先，为什么Bitbucket、Azure这类平台默认不鼓励直接把环境依赖变量写在流水线配置里？主要有两个原因：

• 安全性：硬编码在yml里的变量会被提交到版本库，容易泄露敏感信息；
• 构建一致性：理想状态是「一次构建，多环境部署」，但如果你的应用必须在构建时注入环境变量（比如某些前端框架的静态资源路径、API地址是编译到产物里的），那这个需求完全合理，只是需要用正确的方式来实现。

下面给你几个不用把变量写在xyz-pipelines.yml里的解决方案：

1. 用平台的环境变量管理功能 #

Bitbucket和Azure都提供了专门的变量存储，完全可以替代yml里的硬编码：

• Bitbucket：在仓库设置里找到「Repository variables」（通用变量）或者「Deployment variables」（按环境区分的变量），把APP_URL这类变量按环境存进去。构建步骤里直接用$APP_URL（Linux/macOS）或者%APP_URL%（Windows）来引用就行。
• Azure Pipelines：创建「Variable Groups」，给每个环境（dev/staging/prod）单独建一个组，然后在流水线的stage里关联对应的变量组，构建命令里用$(APP_URL)引用。

这种方式既安全，又能灵活切换环境变量，还不用修改yml文件。

2. 动态生成环境配置文件 #

如果你的构建工具需要读取特定的配置文件（比如.env），可以在构建前加一个脚本步骤，根据当前流水线的环境标识，自动生成配置文件：
比如在Bitbucket Pipelines里，用shell脚本生成.env：

# 根据当前部署环境获取对应的变量
case "$BITBUCKET_DEPLOYMENT_ENVIRONMENT" in
  production)
    echo "APP_URL=$PROD_APP_URL" > .env
    ;;
  staging)
    echo "APP_URL=$STAGING_APP_URL" > .env
    ;;
  *)
    echo "APP_URL=$DEV_APP_URL" > .env
    ;;
esac

# 执行构建命令
npm run build

这里的PROD_APP_URL、STAGING_APP_URL都是存在Bitbucket Deployment Variables里的，不用写在yml里。

3. 按环境拆分构建阶段 #

在流水线配置里，给每个环境单独定义构建阶段，每个阶段关联对应的变量集：
比如Azure Pipelines的yml示例：

stages:
- stage: BuildDev
  variables:
  - group: DevVariables
  jobs:
  - job: Build
    steps:
    - script: npm run build
      env:
        APP_URL: $(APP_URL)
- stage: BuildStaging
  variables:
  - group: StagingVariables
  jobs:
  - job: Build
    steps:
    - script: npm run build
      env:
        APP_URL: $(APP_URL)

这里的DevVariables和StagingVariables是在Azure里创建的变量组，里面存着对应环境的APP_URL，yml里只需要引用变量名，不用写具体值。

最后要说明：你们的流水线流程并没有错，很多前端应用因为框架限制或者业务需求，确实需要构建时注入环境变量。只要利用好平台的变量管理功能，就能既满足需求，又符合流水线的最佳实践～

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