如何在Angular代码中程序化检测应用是否运行在云模式下

API 探路者

2026-6-18

在Angular中程序化检测云环境的方法

1. 扩展默认环境变量配置

Angular自带的environment.ts和environment.prod.ts仅区分开发/生产环境，你可以手动添加自定义字段来标记云环境：

在本地开发的environment.ts中：

export const environment = {
  production: false,
  isCloudEnvironment: false
};

在生产/云部署的environment.prod.ts中：

export const environment = {
  production: true,
  isCloudEnvironment: true
};

如果需要区分不同云服务商（比如AWS、Azure），还可以细化为cloudProvider: 'aws' | 'azure' | null这类字段，方便后续逻辑处理。

2. 利用云平台自带的环境变量

主流云平台（AWS Elastic Beanstalk、Azure App Service、Netlify、Vercel等）都会暴露专属环境变量，你可以通过两种方式在Angular中读取：

构建时注入：通过Angular CLI的自定义配置或构建脚本，将平台环境变量注入到环境文件。比如在package.json中添加构建脚本：
```
"build:cloud": "ng build --configuration=production --environment=cloud"
```
同时创建environment.cloud.ts，专门处理云环境的配置。
运行时读取：部分平台会将环境变量挂载到window对象，直接读取即可：
```
const isCloud = !!window?.AWS_ENV || !!window?.AZURE_APP_SERVICE;
```

3. 通过域名或后端接口检测

如果你的云环境有固定域名后缀（比如.elasticbeanstalk.com、.cloudapp.azure.com），可以通过当前页面域名判断：

const currentHost = window.location.hostname;
const isCloudEnvironment = currentHost.includes('.elasticbeanstalk.com') || currentHost.includes('.cloudapp.azure.com');

另外，部分云平台提供元数据API（比如AWS的实例元数据接口），但前端直接调用会有跨域问题，需要后端代为请求后返回标识。