在运行时读取Angular中的服务器环境变量

Question

我是新来的角度。我已经在aws中的docker容器中部署了一个角度应用程序。应用程序需要连接到aws s3 bucket。我不需要硬编码aws键，所以我在docker中设置了一个环境变量。angular被部署为ngbuild中的dist文件夹由nginx docker容器提供服务。

一旦dist文件夹中的内容被送达服务器，是否可以通过角度读取服务器环境变量？就像php和nodejs中的env函数一样

Answer 1

php 和 nodejs 在服务器端运行，这就是为什么它们可以访问服务器环境变量的原因。

当Angular在浏览器中运行时，您的Angular应用程序可以读取的任何内容都会暴露给客户端。我假设您不希望您的AWS密钥在客户端上浮动，任何用户都可以准备它们。这会使您的后端暴露给恶意使用。

如果您真的选择走该路径，则始终可以在您的角度应用程序正在谈论的服务器应用程序中创建一个endpoint，以公开服务器环境变量。

更常见的模式是让您的服务器endpoint将数据提供给角度，而不是它的环境变量：

1. 您的角度服务调用发球点的点;
2. 服务器使用其配置和变量获取数据;
3. 服务器使用数据响应角度服务调用;

我过度简化了服务器交互，因为我建议您与此问题分开阅读。这篇文章将帮助您开始后端/前端分离。

Answer 2

不幸的是，在Angular中无法读取类似于nodejs或SpringBoot等服务器框架提供的机制的环境变量。

然而，您可以在Angular应用程序启动之前从服务器加载环境(在采取这种方法之前，请阅读下面的缺点)。

从服务器加载环境变量：

• 从您的根模块（例如AppModule）中删除引导组件，使其不会自动引导
• 在root中创建一个加载环境变量的单例服务，例如：

import { Injectable } from "@angular/core";

@Injectable({ providedIn: "root" })
export class EnvService {
  public myEnv: string;

  fetchEnv() {
    // This has to retrieved from some server.
    return fetch("some-url").then(env => {this.myEnv = env.myEnv; return Promise.resolve("env loaded");};
  }
}

• 延迟根模块中的引导，直到加载环境：

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent]
})
export class AppModule {
  constructor(private envService: EnvService) {}
  ngDoBootstrap(app) {
    this.envService.fetchEnv().then(() => app.bootstrap(AppComponent));
  }
}

这种方法有几个缺点:

< li >在加载其他环境变量之前，必须知道从中检索环境设置的url from > < li >如果无法加载环境变量，Angular应用程序将无法启动。当您使用Docker时，您可以在Docker容器中托管一个小型web服务器，在Angular应用程序的专用endpoint上提供环境变量。然而，这可能会带来自己的问题，因为这使得创建您的角Docker容器更加复杂。

因此，我建议在构建过程中配置env变量。

在构建过程中，有两种方法可以设置环境变量:

1） 使用自定义 webpack 配置在构建中设置环境变量

请参阅此文章。

您可以在angular.json中指定自定义webpack配置:

"architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "extra-webpack.config.js"
            },
...

webpack配置文件如下所示:

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        // Here you can set your env variables.
        SERVER_URL: JSON.stringify(process.env.SERVER_URL)
      }
    })
  ]
}

此方法需要更多依赖项：

@angular-builders/custom-webpack
dotenv

2） 在生成期间动态创建环境文件

例如，请参阅自动生成的src/environments/environmental.prod.ts。您可以使用正确的环境值生成此文件，或在生成过程中替换此文件中的占位符。

编辑：另见法比奥的答案。您可能不希望您的用户知道 S3 存储桶，并且应尽可能通过 Web 服务器将您的请求路由到存储桶。