Angular应用部署时如何安全管理环境变量？

我有两个环境文件存储在公开的GitHub仓库中：

• environment.ts：

export const environment = { token: '345' };

• environment.development.ts：

export const environment = { token: '123' };

我希望在Netlify或Vercel部署应用时，将token替换为真实密钥，但在平台配置环境变量后并未生效。我不想把真实token写在代码里，可如果直接修改environment.development.ts又会被公开，平台是从仓库拉取代码的，陷入两难。

尝试给环境对象添加production: true, token: '345'后，值仍然没有变化。当前angular.json配置如下：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "flightSearch": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/flight-search",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "src/styles.css",
              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
              "node_modules/primeng/resources/primeng.min.css"
            ],
            "scripts": [],
            "server": "src/main.server.ts",
            "prerender": true,
            "ssr": {
              "entry": "server.ts"
            }
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.development.ts"
                }
              ]
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "flightSearch:build:production"
            },
            "development": {
              "buildTarget": "flightSearch:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "flightSearch:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": ["zone.js", "zone.js/testing"],
            "tsConfig": "tsconfig.spec.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.css"],
            "scripts": []
          }
        }
      }
    }
  },
  "cli": {
    "analytics": "3921564e-694e-4bc9-aa09-49b8c3772415"
  }
}

1. 修改环境文件，加入占位符 #

把两个环境文件的token值替换为统一的占位符，这样后续可以通过构建命令替换为真实密钥：

environment.ts：

export const environment = {
  production: true,
  token: '%MY_APP_TOKEN%'
};

environment.development.ts：

export const environment = {
  production: false,
  token: '%MY_APP_TOKEN%'
};

2. 在部署平台配置环境变量 #

• Netlify：进入项目设置 → 环境变量，添加MY_APP_TOKEN，值设为你的真实密钥。
• Vercel：进入项目设置 → 环境变量，添加MY_APP_TOKEN，值设为你的真实密钥，确保勾选「在构建时可用」选项。

3. 调整构建命令，添加替换逻辑 #

Angular本身不会自动替换环境变量，需要在构建流程中加入文本替换步骤，以下两种方案任选其一：

方案A：使用sed命令（适配Linux/macOS） #

修改package.json中的build命令：

{
  "scripts": {
    "build": "ng build && sed -i 's/%MY_APP_TOKEN%/'\"$MY_APP_TOKEN\"'/g' dist/flight-search/browser/main*.js"
  }
}

注意：如果是macOS系统，sed命令需要调整为：

sed -i '' 's/%MY_APP_TOKEN%/'\"$MY_APP_TOKEN\"'/g' dist/flight-search/browser/main*.js

方案B：使用replace-in-file包（跨平台） #

1. 安装依赖：

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

2. 在项目根目录创建replace-token.js文件：

const replace = require('replace-in-file');
const options = {
  files: 'dist/flight-search/browser/main*.js',
  from: /%MY_APP_TOKEN%/g,
  to: process.env.MY_APP_TOKEN
};

replace(options)
  .then(results => console.log('Token替换完成:', results))
  .catch(error => console.error('替换出错:', error));

3. 修改package.json的build命令：

{
  "scripts": {
    "build": "ng build && node replace-token.js"
  }
}

4. 验证配置 #

提交修改后的代码到GitHub，触发Netlify/Vercel的自动构建。构建完成后，检查生产环境的打包代码，确认%MY_APP_TOKEN%已被真实密钥替换。

额外优化（可选） #

当前angular.json的生产环境配置缺少文件替换规则，若需要区分生产/开发的基础配置，可以给production配置添加fileReplacements：

"production": {
  // 原有配置...
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.production.ts"
    }
  ]
}

同时创建environment.production.ts文件，保持和其他环境文件一致的占位符结构即可。

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