如何根据Serverless应用分支/环境自动切换config.js中的API_URL？

当然有成熟的自动化方案来解决这个问题，不用再手动来回修改config.js里的配置。结合Serverless应用的特性，我推荐以下几种实用的实现方式：

1. 使用环境变量（最推荐，符合Serverless最佳实践） #

这是最稳妥的方案，核心思路是将配置与代码分离，不再在config.js中硬写固定的API_URL，而是通过环境变量动态读取。

• 首先修改config.js，让它读取环境变量：

  // config.js
  module.exports = {
    API_URL: process.env.API_URL || 'api.prod.some-server.com' // 生产环境作为默认值
  };
  

• 然后根据分支对应的环境，在部署时注入对应的环境变量：

  • 如果使用Serverless Framework，可以在serverless.yml中通过stage来区分环境，自动绑定配置：

    service: your-serverless-app
    provider:
      name: aws # 或者你用的其他云服务商
      stage: ${opt:stage, 'dev'} # 默认用dev环境，可通过命令行指定
      environment:
        API_URL: ${self:custom.apiUrls.${self:provider.stage}}
    custom:
      apiUrls:
        dev: api.dev.some-server.com
        prod: api.prod.some-server.com
    

  部署时，develop分支执行serverless deploy --stage dev，master分支执行serverless deploy --stage prod，就能自动加载对应环境的API_URL了。

2. Git分支切换钩子（post-checkout） #

如果你需要在本地切换分支时就自动修改config.js，可以用Git的post-checkout钩子脚本，在分支切换完成后自动替换配置内容。

• 在项目的.git/hooks目录下创建post-checkout文件（没有的话直接新建），写入以下脚本：

  #!/bin/bash
  # 获取当前分支名称
  CURRENT_BRANCH=$(git rev-parse --abbrev-ref HEAD)
  
  # 根据分支替换API_URL
  if [ "$CURRENT_BRANCH" = "develop" ]; then
    # macOS用sed -i ''，Linux用sed -i
    sed -i '' 's/api.prod.some-server.com/api.dev.some-server.com/g' config.js
  elif [ "$CURRENT_BRANCH" = "master" ]; then
    sed -i '' 's/api.dev.some-server.com/api.prod.some-server.com/g' config.js
  fi
  

• 给脚本添加执行权限：

  chmod +x .git/hooks/post-checkout
  

⚠️ 注意：这个方法会修改本地的config.js文件，产生未提交的变更。如果要避免误提交，可以把config.js加入.gitignore，但需要确保团队成员都有对应的基础配置模板（比如config.example.js）。

3. 构建阶段替换（适合前端Serverless应用） #

如果你的Serverless应用是前端项目（比如React、Vue），可以借助构建工具（Webpack、Vite等）在构建时根据环境替换变量。

• 以Vite为例，在项目根目录创建环境配置文件：

  • .env.development：

    VITE_API_URL=api.dev.some-server.com
    

  • .env.production：

    VITE_API_URL=api.prod.some-server.com
    

• 修改config.js读取环境变量：

  // config.js
  export const API_URL = import.meta.env.VITE_API_URL;
  

• 在package.json中添加对应环境的构建脚本：

  "scripts": {
    "build:dev": "vite build --mode development",
    "build:prod": "vite build --mode production"
  }
  

部署develop分支时执行npm run build:dev，master分支执行npm run build:prod，构建后的产物会自动使用对应环境的API_URL。

总结 #

优先推荐环境变量方案，它完全符合Serverless应用“配置与代码分离”的设计原则，不会产生本地文件修改的困扰，也更便于后续扩展多环境配置。

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