如何在Angular应用中访问AWS Amplify环境变量？

一、核心问题原因 #

你在Amplify构建阶段能拿到环境变量，但前端代码里process.env.ENV_VAR_NAME返回undefined，是因为前端浏览器环境没有process对象——process.env是Node.js环境的变量，Angular这类前端框架需要把环境变量注入到浏览器可访问的全局变量或环境配置文件中，而非直接读取process.env。

二、Amplify环境变量访问解决方案 #

1. 修改amplify.yml，构建前注入环境变量到Angular配置 #

Angular默认用src/environments/environment.ts（开发）和environment.prod.ts（生产）存储环境配置，你需要在构建前把Amplify的环境变量写入这些文件：

更新amplify.yml的构建命令：

build:
  commands:
    # 将环境变量注入生产环境配置文件
    - echo "export const environment = { production: true, ENV_VAR_NAME: '$ENV_VAR_NAME' };" > src/environments/environment.prod.ts
    # 执行生产构建
    - npm run build --prod

若不想覆盖整个配置文件，可先在environment.prod.ts中预留占位符（如ENV_VAR_NAME: 'PLACEHOLDER'），再用sed命令替换：

- sed -i "s/PLACEHOLDER/$ENV_VAR_NAME/g" src/environments/environment.prod.ts

2. 在Angular组件中访问环境变量 #

直接从环境配置文件导入变量使用：

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

// 组件内调用
console.log(environment.ENV_VAR_NAME);

3. 验证配置 #

确认Amplify控制台的「应用设置→环境变量」中已正确添加目标变量，构建阶段会自动将变量注入配置文件并打包到前端代码。

三、AWS Systems Manager参数存储（SSM）访问方案 #

若要从SSM读取密钥，需在Amplify构建阶段拉取参数后注入前端配置：

1. 给Amplify服务角色添加SSM权限 #

在IAM控制台找到Amplify应用的服务角色（名称格式通常为amplify-<app-name>-<env>-<随机字符串>），添加以下权限策略：

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": "ssm:GetParameter",
      "Resource": "arn:aws:ssm:<区域>:<账号ID>:parameter/<你的参数路径>"
    }
  ]
}

替换<区域>、<账号ID>、<你的参数路径>为实际值；若需读取多个参数，可使用通配符/参数路径/*。

2. 在amplify.yml中拉取SSM参数并注入 #

更新构建命令，用AWS CLI拉取参数并写入配置：

build:
  commands:
    # 拉取SSM加密参数并存储到临时变量
    - SSM_SECRET=$(aws ssm get-parameter --name "/你的参数路径" --with-decryption --query "Parameter.Value" --output text)
    # 替换环境配置文件中的占位符
    - sed -i "s/SSM_SECRET_PLACEHOLDER/$SSM_SECRET/g" src/environments/environment.prod.ts
    # 执行生产构建
    - npm run build --prod

3. 前端访问SSM参数 #

同样从环境配置文件导入使用：

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

console.log(environment.SSM_SECRET);

四、关键注意事项 #

• 前端打包后的所有环境变量会暴露在静态资源中，敏感密钥绝对不能直接注入前端——后端专用密钥应在Amplify Lambda等后端服务中读取SSM参数，前端通过API调用获取。
• 可在amplify.yml中添加echo命令验证参数取值，比如echo "SSM_SECRET=$SSM_SECRET"。

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