如何在 heroku 中为我的 Angular 应用程序使用环境变量？答案

【问题标题】：How do I use environment variables in heroku for my angular app?如何在 heroku 中为我的 Angular 应用程序使用环境变量？
【发布时间】：2022-01-20 21:07:01
【问题描述】：

我正在尝试为 Heroku 中的 Angular 应用程序设置环境变量（或 Heroku 世界中的 Config Vars），例如 production=true。但是，我不知道如何设置 postinstall 和 build 脚本来使用它们。把它放在我的 packahge.json 文件中：

"postinstall": "ng build --aot --configuration=${ENV}"

只会导致 Heroku 运行这个命令：

> ng build --aot --configuration=${ENV}

如果我无法更改构建配置，我就无法利用 Angular 的文件替换来设置我的 firebase api 密钥等内容。

我发现 this article 似乎表明我可以访问 package.json 文件中的配置变量，但它不起作用。

我也尝试在我的 environment.ts 文件中只使用 process.env.FIREBASE_API_KEY 并完全绕过文件替换，虽然应用程序在 heroku 中成功构建，但我在控制台中看到了这一点

Uncaught ReferenceError: process is not defined

我不确定处理此问题的最佳方法是什么。谢谢！

【问题讨论】：

标签： angular heroku

【解决方案1】：

您可以使用 Heroku Dashboard 来设置环境变量，例如 article

像这样设置环境变量可以让你动态控制你的环境变量

所以在Node.js中，使用process.env.something来访问环境变量

【讨论】：

我已经在仪表板中设置了环境变量，并且我已经尝试使用 process.env，但在我的问题中收到了错误。
面临同样的问题。我想知道为什么这不起作用。
@FernandoKosh 它不起作用，因为 process.env 仅在 NodeJs（服务器技术）中可用。 Angular 在浏览器中运行，所以它看不到 process.env 的东西。有很多方法可以解决这个问题；默认使用 Angular 自己的环境文件夹，ng build 命令将读取该文件夹。因此，您可以将 process.env 放在这些文件中，并且构建命令在运行时会读取它们（因为该命令是在 Node.Js 的上下文中运行的）。请参阅有关此的官方 Angular 文档。 angular.io/guide/build
@FernandoKosh 另请阅读：ferie.medium.com/…

【解决方案2】：

我能够通过这样做来克服这个问题：

将配置变量ENV 设置为production 或staging
创建 post-install.js 文件：

const { exec } = require('child_process');

let command;

if (process.env.ENV === 'production') {
    command = exec('ng build --aot --configuration=production');
} else if (process.env.ENV === 'staging') {
    command = exec('ng build --aot --configuration=staging');
}

if (command != undefined) {
    command.stdout.on('data', (data) => {
        console.log(data);
    });

    command.stderr.on('data', (data) => {
        console.error(data);
    });

    command.on('close', (code) => {
        console.log(`child process exited with code ${code}`);
    });
} else {
    console.error('process.env.ENV: ' + process.env.ENV);
}

然后我修改了我的 package.json 的 postinstall 脚本来运行该文件

"postinstall": "node post-install.js"

因此，当 Heroku 运行安装后脚本时，它将构建适当的版本（并替换正确的环境文件）。

【讨论】：

我认为你不需要这个。在 Heroku 中创建环境变量 ENV 后，您可以这样做：ng build --aot --configuration=${ENV}

【解决方案3】：

您可以创建自己的 bash 脚本并使用您在 Heroku 上为您的应用设置的环境变量定义该逻辑。

查看第一个答案：Deploying angular app to Heroku using correct environments file

【讨论】：

【解决方案4】：

我尝试了多种方式来正确构建 Heroku。然后我决定这对我来说不是一个好主意。

现在，我在本地构建它，然后推送到 Heroku（或 git）。

为了在 Heroku 端使用 ENV var，我使用 PHP 来获取 env 并传递给应用索引。

在这个例子中，我得到了 api_url:

在 INDEX.HTML 中

<script>

    let apiFromEnv = '<?php echo getenv("API_URL")?>'
    if (apiFromEnv.indexOf('.com') > 0) {
        document.apiURL = apiFromEnv
    } else {
        document.apiURL = null
    }

</script>

在打字稿中使用时：

let apiURL = environment.API_URL;
if (document['apiURL']) {
  apiURL = document['apiURL'];
}

在这行之后，我举个例子，把你的node应用切换到php

将您的应用构建包切换到 php，使用 composer.json

heroku 安装后，你必须将 index.html 名称更改为 index.php；这是 composer.json 文件（将其放在 Procfile 附近项目的根目录），它包含用于更改 Heroku 构建的 php。

{
  "require": {
    "php": "^7.1.3"
  },
  "scripts": {
    "post-install-cmd": [
      "mv dist/index.html dist/index.php"
    ]
  }
}

我使用 .htaccess 来重定向服务器的规则和目录索引：

DirectoryIndex index.php
<IfModule mod_rewrite.c>
RewriteEngine On

# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.php
RewriteRule ^ index.php

</IfModule>

最后一件事，不要忘记在 angular.json 资产复制规则中添加 .htaccess：

"architect": {
    "build": {
      .....,
      "options": {
        ....
        "assets": [
          .....,
          "src/.htaccess"
        ],
......

【讨论】：