Azure DevOps中Angular多环境部署配置实现咨询

这问题其实很常见，Angular本身就原生支持多环境配置，结合你的CI/CD流水线调整就能轻松实现需求。我给你一步步拆解：

1. 先确认Angular项目的环境配置基础（没配置好的话先补全） #

首先得确保你的项目里已经有对应的环境文件和构建配置：

• 检查src/environments文件夹，里面应该有environment.dev.ts（测试环境）和environment.prod.ts（生产环境），分别定义对应环境的专属变量，比如API地址、调试开关：

  // environment.dev.ts
  export const environment = {
    production: false,
    apiUrl: 'https://test-api.yourdomain.com'
  };
  
  // environment.prod.ts
  export const environment = {
    production: true,
    apiUrl: 'https://prod-api.yourdomain.com'
  };
  

• 打开angular.json，找到projects -> [你的项目名称] -> architect -> build -> configurations，确保已经配置了dev和prod两个构建配置项，核心是fileReplacements部分要正确指向对应的环境文件：

  "configurations": {
    "prod": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      // 生产环境的优化配置，保持你原来的设置就行
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "namedChunks": false
    },
    "dev": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.dev.ts"
        }
      ],
      // 测试环境可以保留调试相关配置，方便排查问题
      "optimization": false,
      "outputHashing": "none",
      "sourceMap": true,
      "namedChunks": true
    }
  }
  

2. 调整你的构建流水线（核心是分两次构建+部署） #

因为你是提交到Master分支后触发流水线，现在需要让流水线分别构建测试和生产环境的制品，再部署到各自环境。不管你用的是GitHub Actions、GitLab CI还是Jenkins，核心逻辑都是一致的：

通用流程步骤 #

1. 拉取Master分支的最新代码
2. 安装项目依赖（npm ci比npm install更适合CI环境，因为会严格按照package-lock.json安装）
3. 构建测试环境制品：用ng build --configuration=dev命令，建议指定不同的输出目录（比如--output-path=dist/dev），避免和生产产物互相覆盖
4. 将测试环境的制品部署到你的测试服务器/平台
5. 构建生产环境制品：用ng build --configuration=prod命令，输出目录可以设为dist/prod
6. 将生产环境的制品部署到你的生产服务器/平台

举个GitHub Actions的示例片段（你可以根据自己的CI工具调整） #

name: Master Branch CI/CD

on:
  push:
    branches: [ master ]

jobs:
  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'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      # 构建测试环境产物
      - name: Build for Test Env
        run: ng build --configuration=dev --output-path=dist/dev

      # 部署到测试环境（这里用SSH部署举例，替换成你实际的部署方式）
      - name: Deploy to Test Server
        uses: appleboy/ssh-action@v1.0.3
        with:
          host: ${{ secrets.TEST_SERVER_HOST }}
          username: ${{ secrets.TEST_SERVER_USER }}
          key: ${{ secrets.TEST_SERVER_SSH_KEY }}
          script: |
            sudo rm -rf /var/www/test-app/*
            sudo cp -r ./dist/dev/* /var/www/test-app/
            sudo systemctl reload nginx

      # 构建生产环境产物
      - name: Build for Prod Env
        run: ng build --configuration=prod --output-path=dist/prod

      # 部署到生产环境（同样替换成你的实际部署方式）
      - name: Deploy to Prod Server
        uses: appleboy/ssh-action@v1.0.3
        with:
          host: ${{ secrets.PROD_SERVER_HOST }}
          username: ${{ secrets.PROD_SERVER_USER }}
          key: ${{ secrets.PROD_SERVER_SSH_KEY }}
          script: |
            sudo rm -rf /var/www/prod-app/*
            sudo cp -r ./dist/prod/* /var/www/prod-app/
            sudo systemctl reload nginx

小 Tips #

• 如果你的CI工具支持并行任务，可以把测试和生产的构建+部署拆成两个并行任务，这样能节省时间（前提是依赖安装只做一次，用缓存或者工作区共享）
• 生产环境的构建配置保持原有优化即可，测试环境关闭优化、保留sourceMap，方便调试
• 部署步骤根据你实际使用的平台调整，比如用AWS S3的话就用AWS CLI上传，用Azure App Service就用对应的部署动作

3. 验证配置是否生效（可选但推荐） #

可以在项目里加个简单的验证方式，比如在app.component.ts里打印当前环境信息：

import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ngOnInit() {
    console.log('当前环境配置:', environment);
    console.log('API地址:', environment.apiUrl);
  }
}

部署后打开浏览器控制台，就能确认是不是用了对应的环境配置啦。

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