有没有办法在运行时配置环境变量？

Question

有没有一种方法可以一次性构建工件并将其传播到不同的环境，但仍然使它们能够从要部署到的计算机中读取环境变量？

因此，例如，我们有一个构建管道，在获得工件后，我们将它们部署到 3 个环境：

dev, qa, prod

。

有没有一种方法可以让部署到

dev

的工件以某种方式知道它们在

dev

上，在

qa

上的工件知道它们在

qa

上，并且

prod

上的工件在

prod

上，而无需单独构建各个环境？

我了解客户端计算机上的角度运行，因此这也会对托管解决方案产生影响。我只是想知道是否有某种方法可以在运行时或实际上在为应用程序提供服务时注入某种变量，例如将

CURRENT_ENVIRONMENT

注入块或

main.ts

甚至

index.html

？

Answer 1

正如这个答案中所指定的，您可以使用 html 属性将变量传递给 Angular 根组件，我想您可以使用为您的应用程序提供服务的 Web 服务器将环境变量注入到您的 index.html 中。

为了解决这个问题，我会在自定义 html 属性中放置一个要替换的值（我通常将这种字符串封装在双倍 % 符号之间，但这只是我的习惯，不一定是正确的方法）

考虑以下代码片段：

index.html

<app-root envAttribute="%%ENV%%">
    <div>Loading...</div>
</app-root>

有了这个，您可以用定义应用程序运行环境的变量替换占位符，如果您的 Web 服务器是 nginx，则可以使用

sub_filter

或 Apache 中的

mod_substitute

来实现此目的（这是我唯一的两个）熟悉，因此如果您不使用其中之一，您可能需要寻找更具体的解决方案。）

nginx

location / {
    sub_filter '%%ENV%%' dev;
}

阿帕奇

<IfModule mod_substitute.c>
    <Files "index.html">
        AddOutputFilterByType SUBSTITUTE text/html
        # Replace %%ENV%% with dev, n = full string match, no regex, i = case insensitive
        Substitute "s/%%ENV%%/dev/ni"
    </Files>
</IfModule>

（请注意，mod_substitute 仅自 Apache 版本 2.2.7 起可用）

然后，一旦应用程序启动，您只需恢复

app.component

中的自定义属性的值即可：

app.component.ts

export class AppComponent {
    constructor(private elementRef: ElementRef) {
        const env = this.elementRef.nativeElement.getAttribute('envAttribute');
    }
}

希望这有帮助！