云构建不适用于不同的环境角度

问题描述

下面的命令，我正在尝试使用云构建触发器运行，但它仍然选择了 environment.ts 文件

cloudbuild.yaml

- name: gcr.io/cloud-builders/npm
  args: [ run,build,--configuration=Staging ]

下面是 Package.json 脚本代码

  "scripts": {
    "ng": "ng","start": "ng serve","build": "ng build","test": "ng test","lint": "ng lint","e2e": "ng e2e"}

angular.json 中的文件替换代码

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json","version": 1,"newProjectRoot": "projects","projects": {
    "projectname": {
      "root": "","sourceRoot": "src","projectType": "application","prefix": "app","schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser","options": {
            "outputPath": "dist/projectname","index": "src/index.html","main": "src/main.ts","polyfills": "src/polyfills.ts","tsConfig": "src/tsconfig.app.json","assets": [
              "src/favicon.ico","src/assets"
            ],"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css","src/styles.scss","src/assets/css/style.css"
            ],"scripts": [
              "src/assets/js/jquery.min.js","node_modules/bootstrap/dist/js/bootstrap.min.js","node_modules/chart.js/dist/Chart.bundle.min.js"
            ]
          },"configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
                }
              ],"optimization": true,"outputHashing": "all","sourceMap": false,"extractCss": true,"namedChunks": false,"aot": true,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true,"budgets": [
                {
                  "type": "initial","maximumWarning": "5mb","maximumError": "8mb"
                }
              ]
            },"staging": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts","with": "src/environments/environment.staging.ts"
                }
              ],"dev": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts","with": "src/environments/environment.dev.ts"
                }
              ],"maximumError": "8mb"
                }
              ]
            }
          }
        },"serve": {
          "builder": "@angular-devkit/build-angular:dev-server","options": {
            "browserTarget": "projectname:build"
          },"configurations": {
            "production": {
              "browserTarget": "projectname:build:production"
            }
          }
        },"extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n","options": {
            "browserTarget": "projectname:build"
          }
        },"test": {
          "builder": "@angular-devkit/build-angular:karma","options": {
            "main": "src/test.ts","tsConfig": "src/tsconfig.spec.json","karmaConfig": "src/karma.conf.js","styles": [
              "src/styles.scss"
            ],"scripts": [],"src/assets"
            ]
          }
        },"lint": {
          "builder": "@angular-devkit/build-angular:tslint","options": {
            "tsConfig": [
              "src/tsconfig.app.json","src/tsconfig.spec.json"
            ],"exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },"projectname-e2e": {
      "root": "e2e/","prefix": "","architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor","options": {
            "protractorConfig": "e2e/protractor.conf.js","devServerTarget": "projectname:serve"
          },"configurations": {
            "production": {
              "devServerTarget": "projectname:serve:production"
            }
          }
        },"options": {
            "tsConfig": "e2e/tsconfig.e2e.json","exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },"defaultProject": "projectname","cli": {
    "analytics": "51d20bdf-c925-4ff9-b30c-d7fe27412dc1"
  }
}

你能帮我哪里出错吗？我也用 --prod 尝试过，但不起作用，它总是需要 evironment.ts 文件。但是，当我在本地执行时，它工作正常。我看到云构建有替代变量概念，不确定使用它的最佳方式。

编辑

即使我在云构建中有以下暂存命令，它也总是需要 ng build。请参阅图像。 我没有看到任何错误，一切都成功了。

- name: gcr.io/cloud-builders/npm
  args: [ run,--configuration=staging ]

解决方法

将 cloudbuild.yaml 改为下面

steps:

- name: gcr.io/cloud-builders/npm
  args: [ install ]


- name: gcr.io/cloud-builders/npm
  args: ['run','build','--','--prod']

- name: gcr.io/cloud-builders/gcloud
  args: ['app','deploy','--version=$SHORT_SHA']

如果您希望将其用于生产环境以外的环境，请将 --prod 替换为 --configuration=staging

,

尝试在 fileReplacements 对象中也指定 build（这个用于 ng serve）。

  "build": {
    "options": {
      [...]
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"
        }
      ]      
    },"configurations": {
      // other - non default - configurations 
    }
  }

,

在名为 environment.staging.ts 的环境文件夹中创建一个文件并使用以下命令

ng build --configuration=staging