概括

您可以通过Amplify Console切换托管在其上的Angular应用的环境设置。由于Amplify Console可以在分支级别上管理环境变量，您可以利用它来自定义构建流程，并在任何环境下进行托管。

Angular 环境配置

在Angular中，可以在项目中定义特定环境的变量，例如开发环境、测试环境和生产环境等。在下面给出的目录结构中，可以将默认设置写入environment.ts文件，并在指定环境时使用各个环境文件中的内容进行覆盖。

└──myProject/src/environments/
   　         　　　　　　　　　└──environment.ts
   　         　　　　　　　　　└──environment.prod.ts
   　         　　　　　　　　　└──environment.stage.ts

在 angular.json 文件中，可以将配置添加到 configurations 下面。

"configurations": {
  "prod": { ... },
  "stage": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.stage.ts"
      }
    ]
  }
}

使用stage环境设置进行构建时，需指定以下选项–configuration=stage并执行build操作。

ng build --configuration=stage

Amplify Console的环境变量

建筑流程

我們將修改 Amplify 的建構設定。在 amplify.yml 檔案的建構命令中指定 ng build -c ${env}，就可以使用之前指定的分支與環境變數來執行 Angular 應用程式的主機託管。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - echo ${env}
        - npm install
        - npm install -g @angular/cli@12.1.4
    build:
      commands:
        - ng build -c ${env}
  artifacts:
    baseDirectory: dist/ElectricWeb
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

请参考

https://angular.jp/guide/build 可以用下列方式进行简单生成和部署Angular应用程序。

https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/environment-variables.html 提供了关于在AWS Amplify中设置环境变量的详细指南。